/*
 * Slayply design tokens, shared by the side panel and the site. Light is the default; dark applies
 * when the system asks for it, unless data-theme="light" is set, or whenever data-theme="dark" is
 * set. The contrast test (theme.test.ts) reads this file, so a theme that fails WCAG AA cannot ship.
 * --border is decoration (cards, dividers); --border-strong is for controls and needs 3:1.
 */

html {
  --font-ui: system-ui, sans-serif;
  --font-display: var(--font-ui);
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.75rem;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-pop: cubic-bezier(0.2, 0.7, 0.2, 1);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --border-w: 1px;
}

html[data-theme="light"],
html:not([data-theme="dark"]) {
  --bg: #ffffff;
  --surface: #f5f6f8;
  --surface-2: #eceef2;
  --ink: #16181d;
  --ink-muted: #5b6272;
  --accent: #0b5fff;
  --accent-ink: #ffffff;
  --accent-soft: #e8efff;
  --focus: #0b5fff;
  --border: #e0e3e9;
  --border-strong: #7a8190;
  --ok: #137a43;
  --ok-soft: #e3f4ea;
  --warn: #8a5a00;
  --warn-soft: #fdf1d6;
  --bad: #b42318;
  --bad-soft: #fde8e6;
  --on-status: #ffffff;
  --shadow: 0 1px 2px rgb(16 24 40 / 6%), 0 4px 12px rgb(16 24 40 / 6%);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --bg: #0e0d0d;
    --surface: #181717;
    --surface-2: #262525;
    --ink: #ecebeb;
    --ink-muted: #a3a1a1;
    --accent: #7fa8ff;
    --accent-ink: #0d1424;
    --accent-soft: #1b2438;
    --focus: #7fa8ff;
    --border: #302f2f;
    --border-strong: #7d7b7b;
    --ok: #62c88c;
    --ok-soft: #13231a;
    --warn: #e8b64f;
    --warn-soft: #3d2e0a;
    --bad: #f08a80;
    --bad-soft: #2d1815;
    --on-status: #0e0d0d;
    --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 4px 12px rgb(0 0 0 / 25%);
    color-scheme: dark;
  }
}

html[data-theme="dark"] {
  --bg: #0e0d0d;
  --surface: #181717;
  --surface-2: #262525;
  --ink: #ecebeb;
  --ink-muted: #a3a1a1;
  --accent: #7fa8ff;
  --accent-ink: #0d1424;
  --accent-soft: #1b2438;
  --focus: #7fa8ff;
  --border: #302f2f;
  --border-strong: #7d7b7b;
  --ok: #62c88c;
  --ok-soft: #13231a;
  --warn: #e8b64f;
  --warn-soft: #3d2e0a;
  --bad: #f08a80;
  --bad-soft: #2d1815;
  --on-status: #0e0d0d;
  --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 4px 12px rgb(0 0 0 / 25%);
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  html {
    --dur-fast: 0.01ms;
    --dur-base: 0.01ms;
    --dur-slow: 0.01ms;
  }
}