/* ============================================================
 * tokens.css — Design tokens for high-tech math UI
 * Loaded BEFORE styles.css so legacy values still win where set,
 * but exposes new vars for .ui-* components and themes.css.
 * ============================================================ */

:root {
  /* ---------- spacing scale (8px baseline) ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;

  /* ---------- radius scale ---------- */
  --r-1: 6px;
  --r-2: 12px;
  --r-3: 18px;
  --r-4: 24px;
  --r-5: 32px;
  --r-pill: 999px;

  /* ---------- typography scale ---------- */
  --fs-xs: clamp(11px, 2.6vw, 12px);
  --fs-sm: clamp(12px, 3vw, 13px);
  --fs-md: clamp(14px, 3.4vw, 15px);
  --fs-lg: clamp(16px, 4vw, 18px);
  --fs-xl: clamp(20px, 5vw, 24px);
  --fs-2xl: clamp(26px, 6.5vw, 32px);
  --fs-hero: clamp(36px, 9vw, 56px);
  --fs-display: clamp(48px, 14vw, 96px);

  /* ---------- letter spacing ---------- */
  --ls-tight: -0.02em;
  --ls-tech: 0.08em;
  --ls-wide: 0.16em;

  /* ---------- font features ---------- */
  --num-feat: "tnum" 1, "lnum" 1, "ss01" 1, "cv01" 1;

  /* ---------- mono stack for "tech" numbers ---------- */
  --font-mono: ui-monospace, "Cascadia Mono", "JetBrains Mono", "SF Mono",
               Consolas, "Roboto Mono", "Liberation Mono", monospace;

  /* ---------- color tokens (default = cyber baseline) ---------- */
  --ui-bg: #050813;
  --ui-bg-2: #0a1024;
  --ui-surface: rgba(15, 26, 51, 0.72);
  --ui-surface-2: rgba(22, 38, 71, 0.78);
  --ui-surface-elev: rgba(28, 48, 88, 0.88);
  --ui-text: #e6f1ff;
  --ui-text-soft: #b8c8e0;
  --ui-muted: #7186a8;
  --ui-border: rgba(125, 211, 252, 0.18);
  --ui-border-strong: rgba(125, 211, 252, 0.42);

  --ui-accent: #22d3ee;        /* cyan */
  --ui-accent-2: #a78bfa;      /* purple */
  --ui-accent-soft: rgba(34, 211, 238, 0.16);

  --ui-ok: #34d399;
  --ui-bad: #f87171;
  --ui-warn: #fbbf24;
  --ui-info: #60a5fa;

  --ui-gold: #fbbf24;
  --ui-silver: #cbd5e1;
  --ui-bronze: #f97316;

  /* ---------- effect tokens ---------- */
  --ui-glow: 0 0 12px var(--ui-accent), 0 0 24px rgba(34, 211, 238, 0.35);
  --ui-glow-soft: 0 0 8px rgba(34, 211, 238, 0.45);
  --ui-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --ui-shadow-2: 0 4px 16px rgba(0, 0, 0, 0.45);
  --ui-shadow-3: 0 8px 32px rgba(0, 0, 0, 0.55);
  --ui-blur: blur(20px) saturate(150%);
  --ui-ring: 0 0 0 2px rgba(34, 211, 238, 0.55);

  /* ---------- motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 360ms;
  --dur-4: 600ms;

  /* ---------- z-index scale ---------- */
  --z-bg: -1;
  --z-base: 1;
  --z-overlay: 100;
  --z-modal: 1000;
  --z-toast: 2000;
}

/* Honor reduced motion globally for new components */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0ms;
    --dur-2: 0ms;
    --dur-3: 0ms;
    --dur-4: 0ms;
  }
  *, *::before, *::after {
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0ms !important;
  }
}