/* F8 Sounds — design tokens. Contrast ratios: docs/superpowers/specs/2026-10-09-f8-sounds-identity-design.md §3.
   Light is the default; dark follows the device unless the visitor picked a theme. */
:root {
  --bg: #FFFFFF; --panel: #F5F5F7; --raise: #FFFFFF; --line: #E3E3E8;
  --text: #1D1D1F; --muted: #6E6E73;
  --accent: #FF7A59; --accent-text: #B83A24; --on-accent: #0E0E10;
  --ok: #1B7F4E; --ok-bg: #E8F6EE; --bad: #C62828; --bad-bg: #FDEDE7;
  --note: #8A6100; --note-bg: #FDF4DC; --info: #1F5FBF; --info-bg: #E8F1FD;
  --mark-bg: #FF7A59; --mark-fg: #1D1D1F; --mark-cap: #1D1D1F;
  --unlit: .28; --tint-1: 25%; --tint-2: 10%; --tint-base: #FFFFFF;
  --shadow: 0 18px 40px -18px rgba(0, 0, 0, .28);
  --raise-ring: 0 0 0 1px var(--line);
  --scrim: rgba(0, 0, 0, .5); /* dims the page behind drawers and dialogs in both themes */

  --font: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Bricolage Grotesque", var(--font);
  --wordmark: var(--font);
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --measure: 31em; /* ~70 characters a line (Atkinson averages .44em a character; its wide figures make 68ch nearer 90) */
  --radius: 12px; --radius-lg: 16px;
  --side-w: 268px; --top-h: 56px; --dock-h: 72px; --tab-h: 64px;

  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.3, 1.6, .5, 1);
  --dur-fast: 150ms; --dur-base: 250ms; --dur-slow: 450ms;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E0E10; --panel: #18181C; --raise: #26262C; --line: #2A2A30;
    --text: #F5F5F7; --muted: #A1A1AA; --accent-text: #FF7A59;
    --ok: #3DDC97; --ok-bg: #14241E; --bad: #FF6B7A; --bad-bg: #2A1A14;
    --note: #FFD23F; --note-bg: #2A2410; --info: #6CB8FF; --info-bg: #132232;
    --mark-bg: #1C1C20; --mark-fg: #FFFFFF; --mark-cap: #FF7A59;
    --unlit: .2; --tint-1: 35%; --tint-2: 15%; --tint-base: #000000;
    --shadow: 0 18px 40px -12px rgba(0, 0, 0, .55);
    --scrim: rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0E0E10; --panel: #18181C; --raise: #26262C; --line: #2A2A30;
  --text: #F5F5F7; --muted: #A1A1AA; --accent-text: #FF7A59;
  --ok: #3DDC97; --ok-bg: #14241E; --bad: #FF6B7A; --bad-bg: #2A1A14;
  --note: #FFD23F; --note-bg: #2A2410; --info: #6CB8FF; --info-bg: #132232;
  --mark-bg: #1C1C20; --mark-fg: #FFFFFF; --mark-cap: #FF7A59;
  --unlit: .2; --tint-1: 35%; --tint-2: 15%; --tint-base: #000000;
  --shadow: 0 18px 40px -12px rgba(0, 0, 0, .55);
  --scrim: rgba(0, 0, 0, .5);
  color-scheme: dark;
}