/* Canonical PiCode design tokens (ADR-0072). No application layout. */

:root {
  /* Four grounds, darkest to lightest, and the order is the depth order.
     --bg-base is the page and, on a panel, the recessed well an input or a
     tab sits in; --bg-panel is a surface resting on it; --bg-elevated is
     what floats *over* a panel — a menu, a dialog, a popover, a canvas
     cluster. Elevated used to alias panel, which left a dropdown over a
     sidebar with nothing but its shadow to say it was a different plane,
     and over a near-black ground a black shadow is worth ~2/255. */
  --bg-base: #0e0e11;
  --bg-panel: #16161c;
  --bg-elevated: #1c1c23;
  --bg-hover: #202027;
  --border: #232329;
  --border-strong: #2c2c34;
  /* The Canvas plane's texture (canvas.css keys all three patterns off it).
     It is not a border: a hairline separates two surfaces and wants to be
     nearly invisible, a texture is read across a whole empty plane and has
     to survive being 1 px of a dot every 32. Colouring it from --border
     gave 1.23:1 on this ground — the grid was there and nobody could see
     it. Aimed at ~2:1: enough to read as texture at a glance, far enough
     from --text-secondary (4.9:1 here) that it can never read as a mark. */
  --canvas-pattern: #4a4a58;
  --text-primary: #ececf1;
  --text-secondary: #9b9ba7;
  --accent: #7c8cf8;
  --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);
  /* A fill that carries white text (primary buttons, send, a pressed tool).
     --accent above is light on purpose — it is text and borders on a dark
     ground — and white on it was 3.02:1. #4f5dde: 5.3:1 under white, 4.7:1
     with the hover's brightness(1.08), and 3.4:1 against --bg-panel. */
  --accent-fill: #4f5dde;
  --on-accent: #fff;
  --ok: #63d297;
  --warn: #e5c07b;
  /* Needs you (sidebar by attention, D2): amber as text, as a tint, and as
     a fill that carries text. Dark text reads the sand as is. */
  --warn-ink: var(--warn);
  --warn-soft: color-mix(in srgb, var(--warn) 15%, transparent);
  --on-warn: #16161c;
  --danger: #f7768e;
  /* Danger as text on its own tint (a destructive button at rest). */
  --danger-ink: var(--danger);
  --remote: #7dcfff;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
  --code: "JetBrains Mono", "Fira Code", ui-monospace, "Cascadia Code", Menlo, monospace;
  --sans: -apple-system, "Segoe UI", Inter, Roboto, sans-serif;
  --radius-ctl: 8px;
  --radius-panel: 12px;
  --ctl-h: 36px;
  /* Chrome parity (docs/benchmarks/2026-09-15-chrome-tab-header.md):
     kTabStripHeight = kTabHeight (34 + 1 overlap) + kTabStripPadding (6). */
  --chrome-h: 41px;
  --chat-col: 768px;
  --chat-gutter: 24px;
  /* Type scale for the data surfaces (ADR-0234): one hero figure, KPI
     values, card titles, body, labels, footnotes. No half pixels. */
  --fs-hero: 34px;
  --fs-kpi: 26px;
  --fs-title: 14px;
  --fs-body: 13px;
  --fs-label: 12px;
  --fs-micro: 11px;
  /* Chart series, one fixed slot per agent CLI (ADR-0234 D3; the colour
     follows the CLI, never its rank). Validated as a categorical palette
     against --bg-panel: every check passes here; on the light panel three
     slots sit under 3:1 and lean on the legend and table view. */
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
  --series-5: #d55181;
  --series-6: #008300;
  --series-7: #9085e9;
  --series-8: #e66767;
  --series-other: #5d5d6a;
  --motion-fast: 120ms;
  --motion-med: 220ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  /* The brand tile: the COGNIX[WS] agent face (web/public/favicon.svg), white
     on brand blue. Blue stands on both frames, so no ring draws its edge. */
  --brand-mark-bg: #2563EB;
  --brand-mark-ring: transparent;
  /* The frame plane (docs/benchmarks/2026-09-28-active-tab-legibility.md):
     the window's top row — brand, tab strip, caption buttons — one step
     deeper than the ground, so the active tab (which is the content
     surface) stands out by luminance alone: 8.3 L* apart here, 3.4 before.
     No hue on purpose. The derived tokens are what draws inside it:
     --bg-hover would be lighter than the frame and vanish. */
  --bg-frame: #08080a;
  --frame-hover: rgb(255 255 255 / .04);
  --frame-line: #1c1c22;
  --frame-sep: rgb(255 255 255 / .17);
  --tab-active: var(--bg-elevated);
}
:root[data-theme="light"] {
  /* Light was inverted: the page was pure #fff and panels were the grey
     above it, so a card *sank* into its own page and the app read as one
     flat sheet. The depth order is now the same as dark's — ground darkest,
     each surface lighter — which is also what light UI conventionally does:
     a soft, slightly cool ground with near-white surfaces lifted off it by
     a hairline and a whisper of shadow. Measured against --text-primary /
     --text-secondary in docs/handoff/2026-09-11-canvas-chrome.md; every
     body pair is >= 5.3:1. */
  --bg-base: #f0f2f7;
  --bg-panel: #fbfcfe;
  --bg-elevated: #ffffff;
  --bg-hover: #e4e9f2;
  --border: #dde2ec;
  --border-strong: #b3bccd;
  /* 1.88:1 on --bg-base. The light plane is the case that was worst:
     --border there is 1.16:1, which is no texture at all. */
  --canvas-pattern: #a9b3c6;
  --text-primary: #16181d;
  --text-secondary: #5b6472;
  /* One step darker than #2f6fed, which sat at 4.4:1 on the old white page
     and on the new panel alike — under the bar for the link-sized text and
     the white-on-accent button that both use it. 5.4:1 on a panel. */
  --accent: #2a62d6;
  --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
  /* Light already carries white at 5.5:1, so the fill is the accent itself. */
  --accent-fill: var(--accent);
  --on-accent: #fff;
  --ok: #2e7d32;
  --warn: #a16207;
  /* #a16207 as small text on its own tint measured ~4.2:1; this holds AA
     (~5.5:1). White on the fill is ~4.9:1. */
  --warn-ink: #854d0e;
  --warn-soft: color-mix(in srgb, var(--warn) 14%, transparent);
  --on-warn: #fff;
  --danger: #cf3b54;
  /* #cf3b54 on its 8% tint measured ~4.3:1; this holds AA (~6:1). */
  --danger-ink: #a8293f;
  --remote: #0e7490;
  --brand-mark-ring: transparent;
  --bg-frame: #dfe4ed;
  --frame-hover: rgb(255 255 255 / .35);
  --frame-line: #c4cbda;
  --frame-sep: rgb(22 24 29 / .24);
  --tab-active: var(--bg-panel);
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;
  --series-5: #e87ba4;
  --series-6: #008300;
  --series-7: #4a3aa7;
  --series-8: #e34948;
  --series-other: #a7afbd;
}