/* Design tokens — OKLCH, role-based, theme-aware via light-dark().
   Loaded before site.css so every downstream rule can reference the variables.

   Visual language: Linear/Vercel "developer tool" aesthetic — near-black dark
   mode, violet brand accent, generous radii, dramatic type scale, layered
   elevation. Light mode keeps readability with faintly violet-tinted neutrals. */

:root {
  color-scheme: light dark;

  /* Surfaces — slight violet undertone (hue 280) so neutrals feel intentional,
     not generic blue-gray. Dark mode goes near-black to make accent colours pop. */
  --color-bg: light-dark(oklch(98.5% 0.006 280), oklch(9% 0.012 280));
  --color-surface: light-dark(oklch(100% 0 0), oklch(12% 0.014 280));
  --color-surface-raised: light-dark(oklch(98% 0.008 280), oklch(15% 0.016 280));
  --color-surface-muted: light-dark(oklch(95% 0.014 280), oklch(18% 0.02 280));
  --color-surface-sunken: light-dark(oklch(96% 0.01 280), oklch(7% 0.012 280));

  /* Text */
  --color-text: light-dark(oklch(22% 0.04 280), oklch(94% 0.015 280));
  --color-text-muted: light-dark(oklch(42% 0.04 280), oklch(72% 0.018 280));
  --color-text-subtle: light-dark(oklch(55% 0.035 280), oklch(58% 0.02 280));
  --color-text-on-accent: oklch(98% 0.01 280);
  --color-text-on-danger: oklch(98% 0 0);

  /* Borders */
  --color-border: light-dark(oklch(90% 0.018 280), oklch(26% 0.022 280));
  --color-border-strong: light-dark(oklch(78% 0.028 280), oklch(40% 0.028 280));
  --color-border-subtle: light-dark(oklch(94% 0.014 280), oklch(22% 0.02 280));

  /* Accent — violet brand (primary action, active state, link hover).
     290 hue reads distinctly brand-violet at both lightness levels. */
  --color-accent: light-dark(oklch(55% 0.22 290), oklch(72% 0.2 290));
  --color-accent-hover: light-dark(oklch(48% 0.24 290), oklch(80% 0.18 290));
  --color-accent-soft: light-dark(oklch(95% 0.06 290), oklch(25% 0.14 290));
  --color-accent-soft-fg: light-dark(oklch(35% 0.22 290), oklch(88% 0.14 290));
  --color-accent-border: light-dark(oklch(60% 0.22 290), oklch(55% 0.22 290));

  /* Info — cooler violet-blue (secondary / regenerate affordances). */
  --color-info: light-dark(oklch(58% 0.18 265), oklch(72% 0.16 265));
  --color-info-hover: light-dark(oklch(48% 0.2 265), oklch(80% 0.15 265));
  --color-info-soft: light-dark(oklch(96% 0.025 265), oklch(25% 0.1 265));
  --color-info-soft-fg: light-dark(oklch(30% 0.17 265), oklch(86% 0.11 265));

  /* Danger — warm red stays distinct from the brand family. */
  --color-danger: light-dark(oklch(55% 0.21 25), oklch(68% 0.19 25));
  --color-danger-hover: light-dark(oklch(46% 0.22 25), oklch(76% 0.18 25));
  --color-danger-soft: light-dark(oklch(94% 0.04 25), oklch(26% 0.09 25));
  --color-danger-soft-fg: light-dark(oklch(32% 0.17 25), oklch(90% 0.1 25));

  /* Focus ring — saturated violet so keyboard nav reads the brand language. */
  --color-focus-ring: light-dark(oklch(58% 0.24 290), oklch(78% 0.2 290));

  /* Loading overlay backdrop (semi-transparent surface). */
  --color-overlay: light-dark(oklch(98.5% 0.006 280 / 0.85), oklch(9% 0.012 280 / 0.85));

  /* Typography — system stack; tighter letter-spacing on display sizes for
     confident editorial feel. */
  --font-family-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, Tahoma, sans-serif;
  --font-family-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --font-size-xs: clamp(0.75rem, 0.72rem + 0.08vw, 0.82rem);
  --font-size-sm: clamp(0.875rem, 0.83rem + 0.15vw, 0.95rem);
  --font-size-base: clamp(1rem, 0.95rem + 0.22vw, 1.12rem);
  --font-size-lg: clamp(1.25rem, 1.15rem + 0.35vw, 1.4rem);
  --font-size-xl: clamp(1.5rem, 1.3rem + 0.7vw, 1.85rem);
  --font-size-2xl: clamp(2rem, 1.6rem + 1.5vw, 2.75rem);
  --font-size-3xl: clamp(2.5rem, 2rem + 2vw, 3.5rem);

  --line-height-tight: 1.15;
  --line-height-base: 1.55;
  --line-height-loose: 1.7;

  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;

  --measure-prose: 65ch;

  /* Spacing (4px step) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* Radii — bumped for a more contemporary read. */
  --radius-xs: 0.375rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-pill: 999px;

  /* Elevation — layered shadows so cards actually feel like surfaces, not outlines.
     The "ring" pairs a crisp 1px inner line with a diffuse shadow (Linear pattern). */
  --shadow-sm: 0 1px 2px color-mix(in oklch, black 8%, transparent);
  --shadow-md: 0 4px 12px color-mix(in oklch, black 10%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in oklch, black 14%, transparent);
  --shadow-ring: 0 0 0 1px color-mix(in oklch, black 8%, transparent), 0 12px 32px color-mix(in oklch, black 14%, transparent);
  --shadow-accent: 0 8px 24px color-mix(in oklch, oklch(55% 0.22 290) 30%, transparent);

  /* Motion */
  --motion-fast: 120ms;
  --motion-standard: 220ms;
  --motion-slow: 360ms;
  --motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --motion-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --motion-ease-out: cubic-bezier(0, 0, 0.2, 1);

  /* Layout sizes */
  --sidebar-width: 244px;
  --content-max-width: 1200px;
  --control-min-size: 1.75rem;
}

/* Manual theme override — locks light-dark() resolution to the chosen value.
   Applied by theme.js (and mirrored server-side via the trpg.theme cookie to avoid FOUC). */
:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 1ms;
    --motion-standard: 1ms;
    --motion-slow: 1ms;
  }
}