/* ============================================================
   INTERTrack — Design Tokens v2
   Single source of truth for all visual decisions.
   Light default · Dark toggle via [data-theme="dark"]
   Brand: Intercept Technology — Orange #E8611A + Navy #1E293B
   ============================================================ */

:root,
:root[data-theme="light"] {

  /* ── Surfaces ── */
  --bg-base:       #EEF2F7;
  --bg-surface:    #FFFFFF;
  --bg-surface-2:  #E3E8F1;
  --bg-elevated:   #FFFFFF;
  --bg-nav:        rgba(245, 246, 250, 0.88);

  /* ── Text ── */
  --text-primary:   #0F1729;
  --text-secondary: #475569;
  --text-tertiary:  #94A3B8;
  --text-muted:     #CBD5E1;
  --text-inverse:   #F5F6FA;

  /* ── Borders ── */
  --border-subtle:  rgba(15, 17, 23, 0.06);
  --border-default: rgba(15, 17, 23, 0.10);
  --border-strong:  rgba(15, 17, 23, 0.22);

  /* ── Brand orange ── */
  --amber:        #F5731F;
  --amber-hover:  #E15F19;
  --amber-on:     #FFFFFF;
  --amber-soft:   rgba(245, 115, 31, 0.10);
  --amber-border: rgba(245, 115, 31, 0.30);

  /* ── Semantic ── */
  --success:      #059669;
  --success-soft: rgba(5, 150, 105, 0.08);
  --danger:       #DC2626;
  --danger-soft:  rgba(220, 38, 38, 0.08);
  --info:         #2563EB;

  /* ── Fonts ── */
  --font-display: 'Geist', 'Inter', -apple-system, sans-serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SF Mono', monospace;

  /* ── Type scale ── */
  --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px;
  --fs-15: 15px; --fs-16: 16px; --fs-17: 17px; --fs-18: 18px;
  --fs-20: 20px; --fs-24: 24px; --fs-28: 28px; --fs-32: 32px;
  --fs-40: 40px; --fs-48: 48px; --fs-64: 64px; --fs-80: 80px;

  /* ── Spacing (4px base) ── */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px; --sp-11: 160px;

  /* ── Radii ── */
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px;
  --r-lg: 12px; --r-xl: 16px; --r-pill: 999px;

  /* ── Layout ── */
  --max-w:   1280px;
  --pad-x:   32px;
  --nav-h:   64px;

  /* ── Motion ── */
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --dur-fast: 140ms;
  --dur-med:  240ms;
  --dur-slow: 400ms;
}

:root[data-theme="dark"] {

  /* ── Surfaces ── */
  --bg-base:       #0F1729;
  --bg-surface:    #17233F;
  --bg-surface-2:  #1E2B49;
  --bg-elevated:   #26355A;
  --bg-nav:        rgba(15, 23, 41, 0.82);

  /* ── Text ── */
  --text-primary:   #F4F4F5;
  --text-secondary: #94A3B8;
  --text-tertiary:  #64748B;
  --text-muted:     #475569;
  --text-inverse:   #0F1117;

  /* ── Borders ── */
  --border-subtle:  rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.10);
  --border-strong:  rgba(255, 255, 255, 0.20);

  /* ── Brand orange ── */
  --amber:        #F5731F;
  --amber-hover:  #FF8A3D;
  --amber-on:     #FFFFFF;
  --amber-soft:   rgba(245, 115, 31, 0.14);
  --amber-border: rgba(245, 115, 31, 0.34);

  /* ── Semantic ── */
  --success:      #34D399;
  --success-soft: rgba(52, 211, 153, 0.10);
  --danger:       #F87171;
  --danger-soft:  rgba(248, 113, 113, 0.10);
  --info:         #60A5FA;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}