/* ==========================================================================
   Design tokens — Prime Scale
   Deep ink-navy surfaces tinted toward the brand hue, one cobalt accent
   at three depths. Accent is reserved for CTAs, real numbers, and data.
   ========================================================================== */

:root {
  /* ---- Surfaces (all tinted toward hue 260 for cohesion) ---- */
  --bg:        oklch(13.5% 0.02 260);
  --bg-2:      oklch(16% 0.022 260);
  --surface:   oklch(19% 0.024 260);
  --surface-2: oklch(23% 0.026 260);
  --surface-3: oklch(28% 0.028 260);

  --border:   oklch(90% 0.02 260 / 12%);
  --border-2: oklch(90% 0.02 260 / 22%);
  --border-3: oklch(90% 0.02 260 / 34%);

  /* ---- Text ---- */
  --text:    oklch(97% 0.008 250);
  --text-2:  oklch(85% 0.014 252);
  --muted:   oklch(72% 0.025 255);
  --muted-2: oklch(63% 0.03 258);

  /* ---- Accent: one hue, three depths ---- */
  --accent:      oklch(70% 0.175 256);
  --accent-2:    oklch(58% 0.2 264);
  --accent-3:    oklch(82% 0.11 242);
  --accent-soft: oklch(70% 0.175 256 / 13%);
  --accent-line: oklch(70% 0.175 256 / 34%);
  --accent-glow: oklch(70% 0.175 256 / 38%);
  --accent-ink:  oklch(12% 0.03 260);

  /* ---- Type families ---- */
  --font-display: 'Clash Display', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'General Sans', 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'Martian Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* ---- Type scale (fluid, mobile floor) ---- */
  --t-xs:  0.75rem;
  --t-sm:  0.875rem;
  --t-base: 1rem;
  --t-md:  1.0625rem;
  --t-lg:  clamp(1.2rem, 1.08rem + 0.55vw, 1.5rem);
  --t-xl:  clamp(1.6rem, 1.3rem + 1.35vw, 2.35rem);
  --t-2xl: clamp(2.1rem, 1.6rem + 2.3vw, 3.4rem);
  --t-3xl: clamp(2.6rem, 1.75rem + 3.7vw, 4.9rem);

  /* ---- Spacing (4pt scale) ---- */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.25rem;
  --s-6:  1.5rem;
  --s-8:  2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-20: 5rem;
  --s-24: 6rem;

  /* ---- Radius ---- */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-pill: 999px;

  /* ---- Motion ---- */
  --ease-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-soft:  cubic-bezier(0.4, 0, 0.2, 1);
  --d-fast: 0.18s;
  --d-med:  0.42s;
  --d-slow: 0.8s;

  /* ---- Layout ---- */
  --container: 1200px;
  --edge: clamp(1.15rem, 4vw + 0.4rem, 2.5rem);
  --header-h: 62px;

  /* ---- Elevation ---- */
  --sh-sm: 0 2px 12px oklch(0% 0 0 / 30%);
  --sh-md: 0 12px 34px oklch(0% 0 0 / 34%);
  --sh-lg: 0 28px 70px oklch(0% 0 0 / 45%);

  --z-header: 100;
  --z-cta: 90;
  --z-menu: 120;
}

@media (min-width: 768px) {
  :root { --header-h: 76px; }
}