/*
  The app's one token set (ADR 0294 decision 10): the labelling app's theme as the base, for
  every page on ulti.vision and the console. Primitives first, then roles; pages use the roles.
  Dark by default; the light variant follows prefers-color-scheme or [data-theme="light"].
  One meaning per pastel across the app: mint is the primary action and "done", sand is focus
  and keys, peach is queued and waiting, sky is running, lilac is "needs you", rose is failed or
  retracted. A status (shell.css .uv-status) always carries an icon and a word, never colour
  alone (owner, 2026-10-26: "what needs me vs what's queued vs what's done vs what's not
  started").
*/

@font-face {
  font-family: "Inter Tight";
  src: url("/static/fonts/inter-tight-variable.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/static/fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/static/fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* primitives: the greyscale spine */
  --grey-0: #0e0e10;
  --grey-1: #17171b;
  --grey-2: #1c1c20;
  --grey-3: #22222a;
  --grey-4: #2c2c34;
  --grey-5: #5c5c58;
  --grey-6: #93938e;
  --grey-7: #ecebe7;

  /* primitives: pastels and their inks */
  --mint: #bfe0cd;
  --mint-ink: #0e2b1c;
  --sand: #dfd3ae;
  --sand-ink: #2b230f;
  --peach: #e8c6ae;
  --peach-ink: #2b1a0f;
  --rose: #e2b8bd;
  --rose-ink: #2b1417;
  --lilac: #cdb8f2;
  --lilac-ink: #22163a;
  --sky: #b4cbf3;
  --sky-ink: #12223f;

  /* roles: surfaces and text */
  --bg: var(--grey-0);
  --grid-dot: var(--grey-2);
  --surface: var(--grey-1);
  --raised: var(--grey-3);
  --border: var(--grey-4);
  --text: var(--grey-7);
  --text-secondary: var(--grey-6);
  --text-tertiary: var(--grey-5);
  --nav-bg: rgba(23, 23, 27, 0.92);

  /* roles: meaning */
  --action: var(--mint);
  --action-ink: var(--mint-ink);
  --done: var(--mint);
  --focus: var(--sand);
  --waiting: var(--peach);
  --waiting-ink: var(--peach-ink);
  --failed: var(--rose);
  --failed-ink: var(--rose-ink);
  --you: var(--lilac);
  --you-ink: var(--lilac-ink);
  --running: var(--sky);
  --running-ink: var(--sky-ink);

  /* A meaning as text or a thin line on the page's ground: the pastel itself on dark, a darker
     mix of it on light, where a pastel on white is unreadable (ADR 0305). Fills keep the pastel. */
  --action-text: var(--action);
  --done-text: var(--done);
  --focus-text: var(--focus);
  --waiting-text: var(--waiting);
  --failed-text: var(--failed);
  --you-text: var(--you);
  --running-text: var(--running);

  /* the labelling app's names for the same values */
  --accent-mint: var(--mint);
  --accent-mint-ink: var(--mint-ink);
  --accent-sand: var(--sand);
  --accent-sand-ink: var(--sand-ink);
  --accent-peach: var(--peach);
  --accent-peach-ink: var(--peach-ink);
  --accent-rose: var(--rose);
  --accent-rose-ink: var(--rose-ink);

  /* Label-grid rows only (owner ruling 2026-09-20), never another meaning. */
  --label-common: #b9d9a8;
  --label-invalidator: #e6b98a;
  --label-rare: #a9cbe6;

  /* type */
  --font-body: "Inter Tight", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --t-meta: 12px;
  --t-body: 14px;
  --t-head: 16px;
  --t-title: 22px;

  /* space, shape, size */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --radius: 8px;
  --radius-l: 12px;
  --row: 36px;
  --touch: 44px;
  --sidebar-w: 232px;
  --quick: 140ms;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #f4f3f0;
    --grid-dot: #e1dfd8;
    --surface: #ffffff;
    --raised: #edece7;
    --border: #d9d7d0;
    --text: #17171b;
    --text-secondary: #55554f;
    --text-tertiary: #8a8a83;
    --nav-bg: rgba(255, 255, 255, 0.92);
    --action-text: color-mix(in srgb, var(--mint) 38%, var(--mint-ink));
    --done-text: color-mix(in srgb, var(--mint) 38%, var(--mint-ink));
    --focus-text: color-mix(in srgb, var(--sand) 38%, var(--sand-ink));
    --waiting-text: color-mix(in srgb, var(--peach) 38%, var(--peach-ink));
    --failed-text: color-mix(in srgb, var(--rose) 38%, var(--rose-ink));
    --you-text: color-mix(in srgb, var(--lilac) 38%, var(--lilac-ink));
    --running-text: color-mix(in srgb, var(--sky) 38%, var(--sky-ink));
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f3f0;
  --grid-dot: #e1dfd8;
  --surface: #ffffff;
  --raised: #edece7;
  --border: #d9d7d0;
  --text: #17171b;
  --text-secondary: #55554f;
  --text-tertiary: #8a8a83;
  --nav-bg: rgba(255, 255, 255, 0.92);
  --action-text: color-mix(in srgb, var(--mint) 38%, var(--mint-ink));
  --done-text: color-mix(in srgb, var(--mint) 38%, var(--mint-ink));
  --focus-text: color-mix(in srgb, var(--sand) 38%, var(--sand-ink));
  --waiting-text: color-mix(in srgb, var(--peach) 38%, var(--peach-ink));
  --failed-text: color-mix(in srgb, var(--rose) 38%, var(--rose-ink));
  --you-text: color-mix(in srgb, var(--lilac) 38%, var(--lilac-ink));
  --running-text: color-mix(in srgb, var(--sky) 38%, var(--sky-ink));
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --quick: 0ms;
  }
}

/* Checkboxes, radios and ranges take the action colour on every page. */
:root {
  accent-color: var(--action-text);
}