/* ═══════════════════════════════════════════════════
   DESIGN TOKENS — Complete Variable System
   ═══════════════════════════════════════════════════ */

:root {
  /* ── PALETTE LIGHT ─────────────────────────── */
  --c-bg:           #F5F3EF;
  --c-bg-2:         #EDEAE4;
  --c-surface:      #FFFFFF;
  --c-surface-2:    #F0EDE8;
  --c-border:       rgba(10,10,10,0.08);
  --c-text:         #0A0A0A;
  --c-text-2:       #3D3D3D;
  --c-text-3:       #7A7A7A;
  --c-accent:       #C8FF00;
  --c-accent-dark:  #A8D900;
  --c-accent-glow:  rgba(200,255,0,0.3);
  --c-navy:         #1A1A2E;
  --c-navy-2:       #0F0F1A;

  /* ── TYPOGRAPHIE ────────────────────────────── */
  --font-display:   'Playfair Display', Georgia, serif;
  --font-heading:   'Outfit', sans-serif;
  --font-body:      'DM Sans', sans-serif;
  --font-mono:      'JetBrains Mono', 'Fira Code', monospace;

  /* Fluid type scale */
  --fs-mega:    clamp(72px,  12vw, 180px);
  --fs-hero:    clamp(52px,  8vw,  120px);
  --fs-h1:      clamp(40px,  5.5vw, 80px);
  --fs-h2:      clamp(32px,  4vw,   60px);
  --fs-h3:      clamp(22px,  2.5vw, 36px);
  --fs-h4:      clamp(18px,  1.8vw, 24px);
  --fs-body:    clamp(15px,  1.2vw, 18px);
  --fs-small:   clamp(12px,  0.9vw, 14px);
  --fs-label:   11px;

  /* ── SPACING ────────────────────────────────── */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   32px;
  --space-xl:   64px;
  --space-2xl:  128px;
  --space-3xl:  200px;
  --section-gap: clamp(48px, 6vw, 80px);

  /* ── LAYOUT ─────────────────────────────────── */
  --container:  1400px;
  --container-narrow: 900px;
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  24px;
  --radius-xl:  48px;
  --radius-full: 999px;

  /* ── ANIMATION ──────────────────────────────── */
  --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-expo:    cubic-bezier(0.7, 0, 0.84, 0);
  --ease-inout:      cubic-bezier(0.87, 0, 0.13, 1);
  --ease-bounce:     cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-elastic:    cubic-bezier(0.68, -0.55, 0.27, 1.55);
  --dur-fast:        200ms;
  --dur-normal:      400ms;
  --dur-slow:        700ms;
  --dur-xslow:       1200ms;

  /* ── SHADOWS ────────────────────────────────── */
  --shadow-sm:   0 2px 8px rgba(0,0,0,0.06);
  --shadow-md:   0 8px 32px rgba(0,0,0,0.10);
  --shadow-lg:   0 24px 64px rgba(0,0,0,0.14);
  --shadow-xl:   0 48px 120px rgba(0,0,0,0.20);
  --shadow-accent: 0 0 40px rgba(200,255,0,0.25);
  --shadow-glow:   0 0 80px rgba(200,255,0,0.15);

  /* ── Z-INDEX SCALE ──────────────────────────── */
  --z-below:    -1;
  --z-base:      0;
  --z-above:     10;
  --z-nav:       100;
  --z-modal:     200;
  --z-cursor:    999;
  --z-loader:    9999;
}

[data-theme="dark"] {
  --c-bg:          #080808;
  --c-bg-2:        #111111;
  --c-surface:     #141414;
  --c-surface-2:   #1C1C1C;
  --c-border:      rgba(240,237,232,0.08);
  --c-text:        #F0EDE8;
  --c-text-2:      #C8C4BE;
  --c-text-3:      #7A7672;
  --shadow-sm:     0 2px 8px rgba(0,0,0,0.3);
  --shadow-md:     0 8px 32px rgba(0,0,0,0.4);
  --shadow-lg:     0 24px 64px rgba(0,0,0,0.5);
}