/* Design tokens. Cascade-layer order is declared here (loaded first). */
@layer tokens, base, components, utilities;

@layer tokens {
  :root {
    color-scheme: light dark;

    /* Color — OKLCH with automatic light/dark via light-dark(). */
    --color-bg: light-dark(oklch(97% 0.01 255), oklch(18% 0.02 260));
    --color-surface: light-dark(oklch(100% 0 0), oklch(23% 0.02 260));
    --color-surface-2: light-dark(oklch(98% 0.01 255), oklch(27% 0.02 260));
    --color-text: light-dark(oklch(25% 0.02 260), oklch(95% 0.01 255));
    --color-muted: light-dark(oklch(52% 0.02 260), oklch(72% 0.02 260));
    --color-border: light-dark(oklch(90% 0.01 260), oklch(34% 0.02 260));
    --color-primary: oklch(58% 0.17 264);
    --color-primary-strong: oklch(50% 0.18 264);
    --color-primary-contrast: oklch(99% 0 0);
    --color-danger: oklch(57% 0.2 25);
    --color-danger-bg: color-mix(in oklab, var(--color-danger) 14%, transparent);
    --color-success: oklch(62% 0.16 150);
    --color-warning: oklch(75% 0.15 85);

    /* Badge/status text needs more contrast than the base status hues, and the
       readable shade differs per scheme. */
    --color-success-text: light-dark(oklch(45% 0.14 150), oklch(82% 0.14 150));
    --color-danger-text: light-dark(oklch(50% 0.19 25), oklch(78% 0.15 25));
    --color-warning-text: light-dark(oklch(48% 0.12 80), oklch(85% 0.12 85));

    --focus-ring: 0 0 0 3px color-mix(in oklab, var(--color-primary) 25%, transparent);

    /* Fluid spacing + radii. */
    --space-1: clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem);
    --space-2: clamp(0.5rem, 0.4rem + 0.5vw, 0.9rem);
    --space-3: clamp(0.9rem, 0.7rem + 1vw, 1.5rem);
    --space-4: clamp(1.4rem, 1rem + 2vw, 2.5rem);
    --radius-sm: 8px;
    --radius: 14px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    /* Typography. */
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, "Cascadia Code", "Fira Code", Consolas, monospace;
    --text-xl: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);

    --shadow: 0 10px 30px -12px oklch(20% 0.05 260 / 0.35);
    --shadow-sm: 0 2px 8px -4px oklch(20% 0.05 260 / 0.3);
  }

  /* The theme toggle sets data-theme; pin color-scheme so light-dark() resolves to
     the chosen theme instead of always following the OS preference. */
  :root[data-theme="light"] {
    color-scheme: light;
  }
  :root[data-theme="dark"] {
    color-scheme: dark;
  }
}