/* Vendored from https://app.nuworq.com/style.css by scripts/tokens.js on 2026-11-02. Don't edit it here: run `npm run tokens`.
   sha256 e7b295f4dbfda388bd543d72401cc0bf6d2500a3238061f88635f4ed49903712 */
/* The color map (#188): each color means one thing, the same on every screen. Pick by meaning, never by feel.
     --you      the person's move: needs you, waits on you, "You". Not for agents' work, errors or links.
     --agents   agents are on it: active, landing, shaping, working. Not for the brand, links or focus.
     --queue    waiting for an agent: ready, nobody on it yet. Not for anything that needs a person.
     external   waiting outside the hub (a fact the hub checks): drawn --hatch, so it never reads as Ready's grey.
     --ok       finished or passed: done, landed, acknowledged, a check that passed, a completed step. Not "in progress".
     --warn     at risk but not failed: stalled, quiet, lease expired, missing evidence, offline. Not for failures.
     --bad      failed: a failing check, an error. Not for at-risk or waiting.
     --ink      the main action and plain emphasis. Carries no state.
     --p-*      which provider an agent runs on (a 7px mark beside its name), nothing else.
     --brand    the logo's tile only, with the mark in --ink on it. Never text.
   Links, focus rings and highlights such as "new" use no state color.
   Priority (now, soon, later) shows by weight, not color. Every Needs you card is --you, whatever its kind.
   Text that carries information is --muted or darker, at least 4.5:1 on its background (#195); --faint is decoration
   only (borders, disabled states, placeholders), never text. Hierarchy comes from size and weight.
   Text on a state fill is --on-fill; on an --ink fill, --panel; on Ready's grey (--queue), --on-queue.
   Light and dark (#484): dark follows the device (or data-theme="dark" on <html>), with a calm graphite instead of
   near-black, softer text and softer state colors. Every meaning above stays; only the values change.
   test/colors.test.js keeps them apart, in both themes: the five state colors are at least ΔE76 30 from each other
   and 4.5:1 on --panel (--on-fill on them too); each provider color is at least ΔE76 30 from every state color and
   the other providers, and 3:1 on --panel; --brand is at least ΔE76 30 from every state color and 25 from every
   provider. Dark stays comfortable: --bg L* 9 to 14, --ink 10 to 12.5:1 on --panel, state chroma 45 at most.

   The shape map (#391): one strict set, so every part fits. Use only these; /styleguide shows each one in use.
     --fs-1..6  type: 11 labels and caps · 12 meta · 13 secondary · 14 body · 16 titles · 20 headlines and big figures
                (--lh-* and --fw-* beside each). Figures that are compared (counts, costs, durations) are tabular-nums.
     --sp-*     space on a 4px grid: --sp-N is N×4px; --sp-h (2px) for hairline gaps only. Negative: calc(-1 * --sp-N).
     --r-s      small parts (pills, tags, code, bars) · --r-m  cards, buttons, inputs, dialogs · --r-full  dots, chips
     --e-1      raised (cards, the pulse, an on segment) · --e-2  over the page (dialog, drawer, launcher, toast)
     --rule     every border and divider · --accent  a card's or group's state stripe, nothing else
   No decoration: no gradients but --hatch (it means Outside), no glows, no animation, transitions 100ms at most.
   test/tokens.test.js fails on any raw size, space, radius, shadow or border width outside these. */
:root {
  --bg: #f2f3f5;
  --panel: #ffffff;
  --sunken: #e7e9ed;
  --ink: #14161a;
  --muted: #585d67;
  --faint: #979ca5;
  --line: #dfe2e7;
  --line-strong: #cdd1d8;

  --you: #b3166f;
  --you-tint: #fbe8f2;
  --you-line: #f0bcd8;
  --agents: #2f56d6;
  --agents-tint: #ecf0fd;
  --queue: #8b9099;
  --queue-tint: #eceef1;
  /* Outside's stripes (#209): --on-fill labels sit on --hatch and ink text on --hatch-tint, 4.5:1 on every stripe. */
  --hatch: repeating-linear-gradient(135deg, var(--muted) 0 4px, var(--ink) 4px 7px);
  --hatch-tint: repeating-linear-gradient(135deg, var(--sunken) 0 5px, var(--line-strong) 5px 7px);
  --ok: #2a7549;
  --ok-tint: #e8f5ec;
  --warn: #8a6400;
  --bad: #c62828;
  --bad-tint: #fdeaea;

  --p-anthropic: #bb6655;
  --p-openai: #669999;
  --p-open: #9933bb;
  --p-google: #5588dd;

  --brand: #d4e034; /* citron (#319): the logo's tile, with the mark in --brand-ink on it */
  --brand-ink: #14161a; /* the mark on the tile: dark in both themes */

  --on-fill: #ffffff; /* text on a state fill (a badge, a bar segment, a toast) */
  --on-queue: #14161a; /* text on Ready's grey (--queue) */
  --scrim: rgba(20, 22, 26, .3); /* behind a dialog or the launcher */
  --scrim-soft: rgba(20, 22, 26, .18); /* behind the drawer */
  --hover: rgba(127, 127, 127, .08); /* a row under the pointer: a neutral wash, the same in both themes */

  /* Type: six sizes, each with its line height and weight. */
  --fs-1: 11px; --lh-1: 1.4;  --fw-1: 600;
  --fs-2: 12px; --lh-2: 1.45; --fw-2: 400;
  --fs-3: 13px; --lh-3: 1.5;  --fw-3: 400;
  --fs-4: 14px; --lh-4: 1.5;  --fw-4: 400;
  --fs-5: 16px; --lh-5: 1.4;  --fw-5: 600;
  --fs-6: 20px; --lh-6: 1.3;  --fw-6: 600;
  /* Space: a 4px grid; --sp-h (2px) only for hairline gaps inside small parts (a pill, a segmented control). */
  --sp-h: 2px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 32px;
  --sp-10: 40px; --sp-12: 48px; --sp-15: 60px; --sp-20: 80px;
  /* Shape: three radii, two elevations, one rule. --accent is the one heavier line: a card's or group's state stripe. */
  --r-s: 4px; --r-m: 8px; --r-full: 999px;
  --e-1: 0 1px 2px rgba(20, 22, 26, .06), 0 2px 8px rgba(20, 22, 26, .04);
  --e-2: 0 12px 40px rgba(20, 22, 26, .18);
  --rule: 1px;
  --accent: 3px;
  --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: light dark;
}
/* Dark (#484): when the device prefers it, unless the theme choice says light; or whenever it says dark. The two
   blocks hold the same values; test/colors.test.js checks they match. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1b1d21;
    --panel: #22252a;
    --sunken: #17191d;
    --ink: #d8dbe0;
    --muted: #9ba1ab;
    --faint: #6b717a;
    --line: #30343a;
    --line-strong: #3d424a;
    --you: #d987bb;
    --you-tint: #3a2433;
    --you-line: #5e3249;
    --agents: #8aa5e8;
    --agents-tint: #232b42;
    --queue: #878d97;
    --queue-tint: #2a2d33;
    --ok: #74bb8f;
    --ok-tint: #1d3326;
    --warn: #cdb062;
    --bad: #e98f78;
    --bad-tint: #3d2620;
    --p-anthropic: #cc4230;
    --p-openai: #00909c;
    --p-open: #a85ac0;
    --p-google: #007ef0;
    --on-fill: #16181c;
    --on-queue: #16181c;
    --scrim: rgba(0, 0, 0, .5);
    --scrim-soft: rgba(0, 0, 0, .5);
    --e-1: none;
    --e-2: 0 12px 40px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #1b1d21;
  --panel: #22252a;
  --sunken: #17191d;
  --ink: #d8dbe0;
  --muted: #9ba1ab;
  --faint: #6b717a;
  --line: #30343a;
  --line-strong: #3d424a;
  --you: #d987bb;
  --you-tint: #3a2433;
  --you-line: #5e3249;
  --agents: #8aa5e8;
  --agents-tint: #232b42;
  --queue: #878d97;
  --queue-tint: #2a2d33;
  --ok: #74bb8f;
  --ok-tint: #1d3326;
  --warn: #cdb062;
  --bad: #e98f78;
  --bad-tint: #3d2620;
  --p-anthropic: #cc4230;
  --p-openai: #00909c;
  --p-open: #a85ac0;
  --p-google: #007ef0;
  --on-fill: #16181c;
  --on-queue: #16181c;
  --scrim: rgba(0, 0, 0, .5);
  --scrim-soft: rgba(0, 0, 0, .5);
  --e-1: none;
  --e-2: 0 12px 40px rgba(0, 0, 0, .5);
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }