/* Design tokens, copied from the Vibe reference app (pwa-player/src/index.css).
   One deliberate difference: in the light scheme --primary, --ring and --warning are darker than
   Vibe's, because white text on Vibe's light green is about 3:1 and WCAG AA needs 4.5:1 (D-18).
   Same names, same oklch values. Vibe switches with a `.dark` class kept in localStorage;
   here the scheme follows the system (D-04) through light-dark(), and the page-life toggle
   sets data-theme on <html>. Added on top of Vibe: --warning and --nick-*. */

:root {
  color-scheme: light dark;

  --radius: 0.625rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);

  --background: light-dark(oklch(0.985 0 0), oklch(0.141 0 0));
  --foreground: light-dark(oklch(0.16 0 0), oklch(0.985 0 0));
  --card: light-dark(oklch(1 0 0), oklch(0.192 0 0));
  --card-foreground: light-dark(oklch(0.16 0 0), oklch(0.985 0 0));
  --popover: light-dark(oklch(1 0 0), oklch(0.216 0 0));
  --popover-foreground: light-dark(oklch(0.16 0 0), oklch(0.985 0 0));
  --primary: light-dark(oklch(0.5 0.14 150), oklch(0.723 0.192 149.6));
  --primary-foreground: light-dark(oklch(0.99 0 0), oklch(0.16 0.04 150));
  --secondary: light-dark(oklch(0.955 0 0), oklch(0.269 0 0));
  --secondary-foreground: light-dark(oklch(0.22 0 0), oklch(0.985 0 0));
  --muted: light-dark(oklch(0.955 0 0), oklch(0.269 0 0));
  --muted-foreground: light-dark(oklch(0.52 0 0), oklch(0.708 0 0));
  --accent: light-dark(oklch(0.94 0 0), oklch(0.3 0 0));
  --accent-foreground: light-dark(oklch(0.22 0 0), oklch(0.985 0 0));
  --destructive: light-dark(oklch(0.58 0.22 27), oklch(0.637 0.237 25.3));
  --destructive-foreground: oklch(0.99 0 0);
  /* Not in Vibe: a deeper red for button backgrounds, so white text on it passes AA in both schemes. */
  --destructive-solid: oklch(0.53 0.22 27);
  --border: light-dark(oklch(0.9 0 0), oklch(1 0 0 / 11%));
  --input: light-dark(oklch(0.9 0 0), oklch(1 0 0 / 16%));
  --ring: light-dark(oklch(0.5 0.14 150), oklch(0.723 0.192 149.6));

  --surface: light-dark(oklch(0.97 0 0), oklch(0.168 0 0));
  --surface-foreground: light-dark(oklch(0.16 0 0), oklch(0.985 0 0));
  --elevated: light-dark(oklch(1 0 0), oklch(0.226 0 0));

  /* Not in Vibe: amber for "be careful" notices. */
  --warning: light-dark(oklch(0.5 0.12 65), oklch(0.82 0.15 85));

  /* Not in Vibe: 12 nickname colours, same lightness/chroma, different hue. */
  --nick-0: light-dark(oklch(0.5 0.17 25), oklch(0.78 0.14 25));
  --nick-1: light-dark(oklch(0.5 0.17 55), oklch(0.78 0.14 55));
  --nick-2: light-dark(oklch(0.5 0.15 85), oklch(0.8 0.14 90));
  --nick-3: light-dark(oklch(0.5 0.17 125), oklch(0.78 0.15 125));
  --nick-4: light-dark(oklch(0.5 0.17 150), oklch(0.78 0.15 150));
  --nick-5: light-dark(oklch(0.5 0.12 185), oklch(0.78 0.11 185));
  --nick-6: light-dark(oklch(0.5 0.13 220), oklch(0.78 0.12 220));
  --nick-7: light-dark(oklch(0.5 0.17 255), oklch(0.78 0.13 255));
  --nick-8: light-dark(oklch(0.5 0.19 285), oklch(0.78 0.13 285));
  --nick-9: light-dark(oklch(0.5 0.2 315), oklch(0.78 0.14 315));
  --nick-10: light-dark(oklch(0.5 0.19 345), oklch(0.78 0.14 345));
  --nick-11: light-dark(oklch(0.5 0.02 250), oklch(0.78 0.02 250));

  --font-sans: 'Inter var', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'Cascadia Mono', Menlo, Consolas, monospace;

  /* Tailwind's default shadows, which Vibe uses. */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);

  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

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

:root[data-theme='light'] {
  color-scheme: light;
}