/* Design tokens — single source of truth for the dark / cobalt direction.
   See docs/superpowers/specs/2026-05-14-opal-direction-design.md §4.2 and §4.3. */

:root {
  /* — Surfaces — */
  --surface: oklch(11% 0.015 265);
  --surface-2: oklch(14% 0.018 265);

  /* — Ink (white + steps) — */
  --ink: oklch(98% 0.01 60);
  --ink-soft: oklch(75% 0.012 60);
  --ink-mute: oklch(50% 0.012 60);
  --ink-dim: oklch(30% 0.012 60);

  /* — Rules / borders — */
  --rule: oklch(28% 0.015 265);

  /* — Accent (cobalt — the only chromatic color in any volume) — */
  --accent: oklch(62% 0.22 252);
  --accent-hot: oklch(70% 0.25 252);
  --accent-glow: oklch(62% 0.22 252 / 0.55);
  --accent-soft: oklch(62% 0.22 252 / 0.15);

  /* — Per-project hint accents — used only on a section's `live` dot — */
  --embers-hint: oklch(72% 0.16 60);
  --root3d-hint: oklch(55% 0.13 155);

  /* — Status (operational green) — */
  --status-up: oklch(70% 0.18 145);

  /* — Type families — */
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-serif: "Source Serif 4", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* — Fluid type scale — */
  --text-xs: clamp(0.7rem, 0.68rem + 0.1vw, 0.78rem);
  --text-sm: clamp(0.82rem, 0.8rem + 0.15vw, 0.9rem);
  --text-base: clamp(0.95rem, 0.92rem + 0.2vw, 1.05rem);
  --text-lg: clamp(1.1rem, 1.05rem + 0.3vw, 1.3rem);
  --text-xl: clamp(1.4rem, 1.3rem + 0.6vw, 1.8rem);
  --text-2xl: clamp(2rem, 1.7rem + 1.5vw, 3rem);
  --text-3xl: clamp(2.6rem, 2rem + 3vw, 4.6rem);
  --text-4xl: clamp(3rem, 2.2rem + 4vw, 5.5rem);
  --text-5xl: clamp(3.5rem, 2.4rem + 6vw, 7rem);
  --text-hero: clamp(4rem, 12vw, 12rem); /* §01 hero special */

  /* — Space (4pt scale) — */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-5xl: 128px;

  /* — Radii — */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* — Motion — */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:  cubic-bezier(0.65, 0, 0.35, 0);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 450ms;

  /* — Layout — */
  --container-max: 1400px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);
}