/* ═══════════════════════════════════════════════
   MUCHYI AI — DESIGN TOKENS
   variables.css
═══════════════════════════════════════════════ */

:root {
  /* ── COLORS (dark mode default) ── */
  --bg:         #07070F;
  --bg2:        #0C0C18;
  --ink1:       #111120;
  --ink2:       #16162A;
  --ink3:       #1C1C32;
  --ink4:       #22223A;
  --border:     rgba(255,255,255,.07);
  --border2:    rgba(255,255,255,.13);

  --text:       #F0EDE8;
  --text2:      #CCC8C0;
  --text3:      #9A9690;
  --text4:      #6A6860;
  --text5:      #3A3830;

  --gold:       #C9A84C;
  --gold-lt:    #E8C96A;
  --gold-dk:    #9A7830;
  --gold-glow:  rgba(201,168,76,.18);
  --gold-pale:  rgba(201,168,76,.07);
  --gold-ring:  rgba(201,168,76,.28);

  --green:      #22C55E;
  --green-bg:   rgba(34,197,94,.1);
  --green-lt:   #4ade80;
  --red:        #F87171;
  --blue:       #60A5FA;
  --orange:     #FB923C;
  --purple:     #A78BFA;

  /* ── TYPOGRAPHY ── */
  --font-head:  'Playfair Display', Georgia, serif;
  --font-body:  'DM Sans', system-ui, sans-serif;
  --font-quote: 'Cormorant Garamond', Georgia, serif;
  --font-mono:  'DM Mono', 'Courier New', monospace;

  /* ── SPACING ── */
  --r:   6px;
  --r2:  10px;
  --r3:  14px;
  --r4:  20px;
  --r5:  28px;

  /* ── SHADOWS ── */
  --shadow-sm:  0 4px 20px rgba(0,0,0,.4);
  --shadow:     0 16px 60px rgba(0,0,0,.6);
  --shadow-lg:  0 32px 80px rgba(0,0,0,.75);
  --shadow-gold: 0 8px 32px rgba(201,168,76,.25);

  /* ── TRANSITIONS ── */
  --t:    .2s ease;
  --t2:   .35s cubic-bezier(.34,1.56,.64,1);
  --t3:   .5s cubic-bezier(.25,.46,.45,.94);

  /* ── LAYOUT ── */
  --container: 1200px;
  --header-h:  64px;
}

/* ── LIGHT MODE OVERRIDES ── */
[data-theme="light"] {
  --bg:        #FAFAF7;
  --bg2:       #F4F2EC;
  --ink1:      #EDEAE3;
  --ink2:      #E6E3DA;
  --ink3:      #DEDAD0;
  --ink4:      #D6D2C6;
  --border:    rgba(0,0,0,.08);
  --border2:   rgba(0,0,0,.15);
  --text:      #1A1814;
  --text2:     #3A3628;
  --text3:     #5A5648;
  --text4:     #7A7668;
  --text5:     #9A9688;
  --gold-glow: rgba(201,168,76,.1);
  --gold-pale: rgba(201,168,76,.06);
  --shadow-sm: 0 4px 20px rgba(0,0,0,.1);
  --shadow:    0 16px 60px rgba(0,0,0,.15);
  --shadow-lg: 0 32px 80px rgba(0,0,0,.2);
}
