/* ============================================================
   ZERO DRIVER — Design Tokens v1.0
   Source of truth. Derived from confirmed reference design.
   ============================================================ */

:root {

  /* ── SURFACES ─────────────────────────────────────────────
     Navy-black palette — cool, deep, cinematic
  ─────────────────────────────────────────────────────────── */
  --color-bg:               #0b141c;
  --color-surface-lowest:   #060f17;
  --color-surface-low:      #141c25;
  --color-surface:          #182029;
  --color-surface-high:     #222b34;
  --color-surface-bright:   #2d363f;

  /* ── GOLD ─────────────────────────────────────────────────
     Champagne gold — primary accent
  ─────────────────────────────────────────────────────────── */
  --color-gold:             #e5c484;
  --color-gold-deep:        #c8a96b;
  --color-gold-dim:         #e3c282;
  --color-on-gold:          #402d00;

  /* Gold transparencies */
  --color-gold-05:          rgba(229, 196, 132, 0.05);
  --color-gold-10:          rgba(229, 196, 132, 0.10);
  --color-gold-15:          rgba(229, 196, 132, 0.15);
  --color-gold-20:          rgba(229, 196, 132, 0.20);
  --color-gold-30:          rgba(229, 196, 132, 0.30);
  --color-gold-50:          rgba(229, 196, 132, 0.50);

  /* ── TEXT ─────────────────────────────────────────────────
     Cool blue-white — reads like moonlight
  ─────────────────────────────────────────────────────────── */
  --color-text:             #dae3ef;
  --color-text-secondary:   #d0c5b5;
  --color-text-muted:       #998f81;
  --color-text-dim:         #4d463a;

  /* White transparencies */
  --color-white-05:         rgba(255, 255, 255, 0.05);
  --color-white-08:         rgba(255, 255, 255, 0.08);
  --color-white-10:         rgba(255, 255, 255, 0.10);
  --color-white-20:         rgba(255, 255, 255, 0.20);

  /* ── GLASS PANEL ──────────────────────────────────────────
     Primary card surface throughout the design
  ─────────────────────────────────────────────────────────── */
  --glass-bg:               rgba(21, 28, 38, 0.70);
  --glass-blur:             blur(20px);
  --glass-border:           rgba(244, 241, 234, 0.05);
  --glass-shadow:           0 8px 32px 0 rgba(0, 0, 0, 0.37);
  --glass-border-top:       rgba(255, 255, 255, 0.05);

  /* ── TYPOGRAPHY ───────────────────────────────────────────  */
  --font-display:           'EB Garamond', Georgia, serif;
  --font-body:              'Manrope', system-ui, sans-serif;

  /* Scale */
  --text-display:           clamp(2.5rem, 5.5vw, 4rem);
  --text-headline-lg:       clamp(2rem, 4vw, 3rem);
  --text-headline-md:       clamp(1.5rem, 3vw, 2rem);
  --text-headline-sm:       1.5rem;
  --text-body-lg:           1.125rem;
  --text-body-md:           1rem;
  --text-body-sm:           0.875rem;
  --text-label:             0.75rem;

  /* Weights */
  --weight-regular:         400;
  --weight-medium:          500;
  --weight-semibold:        600;
  --weight-bold:            700;

  /* Leading */
  --leading-display:        1.1;
  --leading-headline:       1.2;
  --leading-tight:          1.3;
  --leading-normal:         1.5;
  --leading-relaxed:        1.6;

  /* Tracking */
  --tracking-tight:         -0.02em;
  --tracking-label:         0.10em;
  --tracking-wide:          0.30em;

  /* ── SPACING (8px base grid) ──────────────────────────────  */
  --space-sm:               0.5rem;
  --space-md:               1rem;
  --space-lg:               2rem;
  --space-xl:               4rem;
  --space-gutter:           1.5rem;
  --space-margin-mobile:    1.25rem;
  --space-margin-desktop:   4rem;
  --container-max:          1440px;

  /* ── BORDER RADIUS ────────────────────────────────────────  */
  --radius-sm:              0.25rem;
  --radius-default:         0.5rem;
  --radius-md:              0.75rem;
  --radius-lg:              1rem;
  --radius-xl:              1.5rem;
  --radius-2xl:             2rem;
  --radius-full:            9999px;

  /* ── TRANSITIONS ──────────────────────────────────────────  */
  --duration-fast:          150ms;
  --duration-default:       300ms;
  --duration-slow:          500ms;
  --duration-image:         700ms;

  --ease-standard:          cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:               cubic-bezier(0, 0, 0.2, 1);
  --ease-cinematic:         cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --transition-colors:      var(--duration-default) var(--ease-standard);
  --transition-transform:   var(--duration-slow) var(--ease-cinematic);
  --transition-image:       var(--duration-image) var(--ease-cinematic);

  /* ── Z-INDEX ──────────────────────────────────────────────  */
  --z-base:     1;
  --z-raised:   10;
  --z-sticky:   50;
  --z-overlay:  100;
  --z-modal:    200;

  /* ── SEMANTIC ─────────────────────────────────────────────  */
  --color-error:    #ffb4ab;
  --color-success:  #4caf7d;
}