/* waves — the one palette, every surface.
   Light on the root; dark under the viewer's preference, under an explicit
   data-theme="dark", and inside any .stage element (video tiles and what
   sits over them), which is dark on every page. The timeline console is
   not a stage: it follows the studio's theme like every other panel.
   Colour literals live here and nowhere else; tests/test_tokens.py keeps
   it that way. Old token names at the bottom keep resolving.

   Type: Instrument Sans (UI) and JetBrains Mono (timecodes, codes, feed
   addresses), both under the SIL Open Font License, self-hosted as the
   latin subset with system fallbacks for everything else. */

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/static/instrument-sans.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(/static/jetbrains-mono.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light dark;
  --bg: #F7F6F3;
  --surface: #FFFFFF;
  --surface-2: #F1EFEA;
  --surface-3: #E9E6E0;
  --line: #E4E1DA;
  --line-input: #948F86;
  --text: #1B1A17;
  --text-2: #55534C;
  --muted: #6E6B63;
  --accent: #2E4FD8;
  --accent-hover: #2542B8;
  --accent-text: #2442BE;
  --accent-soft: #E8ECFB;
  --live: #D3382F;
  --live-text: #B42D25;
  --danger: #B42318;
  --danger-text: #B42318;
  --success: #1D7A4C;
  --success-soft: #E3F3EA;
  --warning: #9A6700;
  --warning-soft: #FBF1DA;
  --focus: #2E4FD8;
  --shadow-1: 0 1px 2px rgba(27, 26, 23, 0.06);
  --shadow-2: 0 4px 16px rgba(27, 26, 23, 0.08);
  --shadow-3: 0 16px 48px rgba(27, 26, 23, 0.14);
  --track: rgba(27, 26, 23, 0.14);
  --backdrop: rgba(27, 26, 23, 0.45);
  --shadow: rgba(27, 26, 23, 0.18);
  --theme-color: #F7F6F3;
  --stage-bg: #121110;
  --stage-tile: #000000;
  --stage-glass: rgba(31, 29, 26, 0.92);
  --lane-0: #5CC8F2;
  --lane-1: #9B7BFF;
  --lane-2: #4CC38A;
  --lane-3: #E0A83A;
  --lane-4: #FF7A90;
  --lane-5: #48C6B0;
  --on-accent: #FFFFFF;
  --on-live: #FFFFFF;
  --r-s: 6px;
  --r-m: 10px;
  --r-l: 16px;
  --r-pill: 999px;
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --font-ui: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Old token names. Declared on .stage as well as the root: a var() inside a
   custom property is substituted where it is declared, so a root-only
   alias would carry the page's colours into a dark stage. */
:root, .stage {
  --panel: var(--surface);
  --panel-2: var(--surface-2);
  --line-2: var(--line-input);
  --good: var(--success);
  --warn: var(--warning);
  --bad: var(--danger-text);
  --cyan: var(--accent);
  --violet: var(--accent);
  --hi: var(--text);
  --rec: var(--live);
  --keep: var(--warning);
  --body: var(--bg);
  --bar: var(--surface);
  --thumb: var(--text);
  --toast-bg: var(--surface);
  --toast-fg: var(--text);
  --ph-bg: var(--surface-2);
  --ph-fg: var(--text-2);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
  --bg: #171614;
    --surface: #1F1D1A;
    --surface-2: #262421;
    --surface-3: #2E2B27;
    --line: #35322D;
    --line-input: #55514A;
    --text: #ECEAE4;
    --text-2: #B4B0A6;
    --muted: #8C887E;
    --accent: #3D5BD9;
    --accent-hover: #4C69E6;
    --accent-text: #8FA8FF;
    --accent-soft: #2C2F3A;
    --live: #D3382F;
    --live-text: #FF6F66;
    --danger: #B42318;
    --danger-text: #FF7B72;
    --success: #4CC38A;
    --success-soft: #1E2E25;
    --warning: #E0A83A;
    --warning-soft: #33291A;
    --focus: #8FA8FF;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.45);
    --shadow-3: 0 16px 48px rgba(0, 0, 0, 0.6);
    --track: rgba(255, 255, 255, 0.14);
    --backdrop: rgba(0, 0, 0, 0.6);
    --shadow: rgba(0, 0, 0, 0.5);
    --theme-color: #171614;
  }
}

:root[data-theme="dark"],
.stage {
  color-scheme: dark;
  color: var(--text);
  --bg: #171614;
  --surface: #1F1D1A;
  --surface-2: #262421;
  --surface-3: #2E2B27;
  --line: #35322D;
  --line-input: #55514A;
  --text: #ECEAE4;
  --text-2: #B4B0A6;
  --muted: #8C887E;
  --accent: #3D5BD9;
  --accent-hover: #4C69E6;
  --accent-text: #8FA8FF;
  --accent-soft: #2C2F3A;
  --live: #D3382F;
  --live-text: #FF6F66;
  --danger: #B42318;
  --danger-text: #FF7B72;
  --success: #4CC38A;
  --success-soft: #1E2E25;
  --warning: #E0A83A;
  --warning-soft: #33291A;
  --focus: #8FA8FF;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 16px 48px rgba(0, 0, 0, 0.6);
  --track: rgba(255, 255, 255, 0.14);
  --backdrop: rgba(0, 0, 0, 0.6);
  --shadow: rgba(0, 0, 0, 0.5);
  --theme-color: #171614;
}

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