/* ═══════════════════════════════════════════
   DESIGN TOKENS — Single Source of Truth
   SkyGlobal Beta · Dark Navy + Electric Blue
   ═══════════════════════════════════════════ */

:root {
  /* ── Color: Backgrounds ── */
  --color-bg-deep:      #060a14;
  --color-bg-base:      #0a0f1e;
  --color-bg-raised:    #0f1629;
  --color-bg-surface:   #141c35;
  --color-bg-hover:     #1a2440;

  /* ── Color: Accent (Electric Blue) ── */
  --color-accent:         #2d7aff;
  --color-accent-bright:  #5a9aff;
  --color-accent-dim:     #1a5ccc;
  --color-accent-glow:    rgba(45, 122, 255, 0.15);
  --color-accent-surface: rgba(45, 122, 255, 0.08);

  /* ── Color: Gold (Brand secondary) ── */
  --color-gold:     #d4a843;
  --color-gold-dim: #a68430;

  /* ── Color: Text ── */
  --color-text-primary:   #e8ecf4;
  --color-text-secondary: #a0aec0;
  --color-text-tertiary:  #5a6a80;
  --color-text-disabled:  #3a4560;

  /* ── Color: Semantic ── */
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-error:   #ef4444;
  --color-info:    var(--color-accent);

  /* ── Gradients ── */
  --gradient-hero:         linear-gradient(135deg, #060a14 0%, #0a0f1e 40%, #0f1629 100%);
  --gradient-accent:       linear-gradient(135deg, #2d7aff 0%, #1a5ccc 100%);
  --gradient-gold:         linear-gradient(135deg, #d4a843 0%, #a68430 100%);
  --gradient-glass-border: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.03) 100%);

  /* ── Glassmorphism: Tier 1 — Nav ── */
  --glass-nav-bg:     rgba(10, 15, 30, 0.72);
  --glass-nav-blur:   20px;
  --glass-nav-border: 1px solid rgba(255, 255, 255, 0.08);
  --glass-nav-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);

  /* ── Glassmorphism: Tier 2 — Cards ── */
  --glass-card-bg:           rgba(15, 22, 41, 0.65);
  --glass-card-blur:         16px;
  --glass-card-border:       1px solid rgba(255, 255, 255, 0.06);
  --glass-card-shadow:       0 8px 32px rgba(0, 0, 0, 0.25);
  --glass-card-hover-bg:     rgba(15, 22, 41, 0.78);
  --glass-card-hover-border: 1px solid rgba(45, 122, 255, 0.15);

  /* ── Glassmorphism: Tier 3 — Stats ── */
  --glass-stat-bg:     rgba(10, 15, 30, 0.82);
  --glass-stat-blur:   24px;
  --glass-stat-border: 1px solid rgba(255, 255, 255, 0.10);
  --glass-stat-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255,255,255,0.05);

  /* ── Glassmorphism: Tier 4 — Modal ── */
  --glass-modal-bg:     rgba(6, 10, 20, 0.88);
  --glass-modal-blur:   32px;
  --glass-modal-border: 1px solid rgba(255, 255, 255, 0.06);
  --glass-modal-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);

  /* ── Typography: Families ── */
  --font-display: 'Space Grotesk', sans-serif;
  --font-body:    'IBM Plex Sans', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* ── Typography: Scale (fluid) ── */
  --text-hero:    clamp(3.5rem, 8vw, 7rem);
  --text-h1:      clamp(2.5rem, 5vw, 4.5rem);
  --text-h2:      clamp(2rem, 3.5vw, 3rem);
  --text-h3:      clamp(1.5rem, 2.5vw, 2rem);
  --text-h4:      clamp(1.125rem, 1.5vw, 1.375rem);
  --text-body:    clamp(0.9375rem, 1.1vw, 1.0625rem);
  --text-small:   clamp(0.8125rem, 0.9vw, 0.875rem);
  --text-caption: 0.75rem;
  --text-eyebrow: 0.6875rem;
  --text-stat:    clamp(3rem, 6vw, 6rem);
  --text-marquee: clamp(8rem, 14vw, 16rem);

  /* ── Typography: Line Heights ── */
  --leading-hero:    0.92;
  --leading-heading: 1.05;
  --leading-body:    1.7;
  --leading-tight:   1.3;
  --leading-stat:    1.0;

  /* ── Typography: Letter Spacing ── */
  --tracking-tight:   -0.03em;
  --tracking-normal:  -0.01em;
  --tracking-body:     0em;
  --tracking-wide:     0.06em;
  --tracking-wider:    0.14em;
  --tracking-widest:   0.22em;

  /* ── Typography: Weights ── */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;

  /* ── Spacing (8px grid) ── */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;
  --space-40:  10rem;

  /* ── Layout ── */
  --section-gap:       clamp(5rem, 12vh, 10rem);
  --section-padding-x: clamp(1.5rem, 5vw, 5rem);
  --container-max:     1400px;
  --container-narrow:  900px;
  --card-padding:      clamp(1.5rem, 2.5vw, 2.5rem);
  --card-gap:          clamp(1rem, 1.5vw, 1.5rem);
  --nav-height:        72px;
  --nav-height-mobile: 56px;
  --nav-padding-x:     clamp(1.5rem, 3vw, 3rem);

  /* ── Border Radius ── */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* ── Motion: Easing ── */
  --ease-out:     cubic-bezier(0.2, 0, 0, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:  cubic-bezier(0.22, 1, 0.36, 1);

  /* ── Motion: Duration ── */
  --duration-instant:  100ms;
  --duration-fast:     200ms;
  --duration-normal:   300ms;
  --duration-slow:     500ms;
  --duration-slower:   700ms;
  --duration-slowest:  1000ms;

  /* ── Motion: Stagger ── */
  --stagger-fast:   50ms;
  --stagger-normal: 80ms;
  --stagger-slow:   120ms;
}