/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  /* — Colors — */
  --clr-bg:          #08080F;
  --clr-bg-glass:    rgba(8,8,15,0.85);
  --clr-surface:     #0F0F1A;
  --clr-surface-2:   #161625;
  --clr-surface-3:   #1E1E30;
  --clr-border:      rgba(255,255,255,0.07);
  --clr-border-glow: rgba(79,142,247,0.25);

  --clr-accent:      #4F8EF7;       /* electric blue */
  --clr-accent-dim:  rgba(79,142,247,0.15);
  --clr-gold:        #C9A84C;       /* warm gold */
  --clr-gold-dim:    rgba(201,168,76,0.15);
  --clr-gradient:    linear-gradient(135deg, #4F8EF7 0%, #8B5CF6 50%, #C9A84C 100%);
  --clr-gradient-h:  linear-gradient(135deg, #6BA3FF 0%, #A87EFF 50%, #E0BF6B 100%);

  --clr-text-primary:   #EEEEF8;
  --clr-text-secondary: #8888AA;
  --clr-text-muted:     #55556A;

  /* — Typography — */
  --font-display: 'Syne', 'Arial Black', sans-serif;
  --font-body:    'Inter', 'Helvetica Neue', sans-serif;

  --size-xs:   0.75rem;   /* 12px */
  --size-sm:   0.875rem;  /* 14px */
  --size-base: 1rem;      /* 16px */
  --size-lg:   1.125rem;  /* 18px */
  --size-xl:   1.25rem;   /* 20px */
  --size-2xl:  1.5rem;    /* 24px */
  --size-3xl:  2rem;      /* 32px */
  --size-4xl:  2.5rem;    /* 40px */
  --size-5xl:  clamp(2.5rem, 5vw, 3.5rem);
  --size-hero: clamp(3rem, 7vw, 6.5rem);

  /* — Spacing — */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-16:  64px;
  --sp-20:  80px;
  --sp-24:  96px;
  --sp-32:  128px;

  /* — Border radii — */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  32px;
  --radius-full: 9999px;

  /* — Shadows — */
  --shadow-glow-blue: 0 0 40px rgba(79,142,247,0.20);
  --shadow-glow-gold: 0 0 40px rgba(201,168,76,0.20);
  --shadow-card:      0 4px 32px rgba(0,0,0,0.40);
  --shadow-card-hover: 0 16px 64px rgba(0,0,0,0.60), 0 0 0 1px var(--clr-border-glow);

  /* — Transitions — */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:  200ms;
  --dur-mid:   400ms;
  --dur-slow:  700ms;

  /* — Layout — */
  --max-w:      1400px;
  --content-w:  1200px;
  --gutter:     clamp(1rem, 4vw, 3rem);
}

/* ============================================================
   LIGHT MODE OVERRIDES
   ============================================================ */
[data-theme="light"] {
  --clr-bg:          #F8F9FA;
  --clr-bg-glass:    rgba(248, 249, 250, 0.85);
  --clr-surface:     #FFFFFF;
  --clr-surface-2:   #F1F3F5;
  --clr-surface-3:   #E9ECEF;
  --clr-border:      rgba(0,0,0,0.1);
  --clr-border-glow: rgba(79,142,247,0.4);

  --clr-text-primary:   #111111;
  --clr-text-secondary: #444444;
  --clr-text-muted:     #777777;

  --shadow-card:      0 4px 20px rgba(0,0,0,0.06);
  --shadow-card-hover: 0 12px 40px rgba(0,0,0,0.12), 0 0 0 1px var(--clr-border-glow);
}