/* Ported from engram (assets/css/00-tokens.css), itself ported from Vestigo.
   Two changes only: the font URLs point at assets/vendor, and the --viz-*
   visualization tokens are added — engram deliberately carries none.
   scripts/check-contrast.js asserts every ratio claimed below, in CI. */

@font-face { font-family: Inter; font-weight: 400; font-display: swap;
  src: url("../vendor/fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: Inter; font-weight: 500; font-display: swap;
  src: url("../vendor/fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family: Inter; font-weight: 600; font-display: swap;
  src: url("../vendor/fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap;
  src: url("../vendor/fonts/jetbrains-mono-400.woff2") format("woff2"); }

:root {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  /* Sizes were chosen per component — 0.6875, 0.75, 0.8125, 0.875, 1, 1.375 —
     so two things meaning the same thing rarely looked the same size. Named,
     so a component picks a step rather than a number. */
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.875rem;
  --text-md: 0.9375rem;

  --radius-sm: 3px;
  --radius-md: 6px;

  /* What lies over what, lowest first; nothing else sets a z-index. On the
     canvas: its corner controls and cards, then the inspector floating over
     them, then the notice, which is read wherever it lands. Over the page:
     menus, the dropdown opened from a menu or form, a dragged pin. */
  --z-hud: 1;
  --z-inspector: 2;
  --z-notice: 3;
  --z-menu: 20;
  --z-pick: 30;
  --z-drag: 50;

  /* The series of a chart, named apart from the selection they share a
     colour with today, so either can change alone. */
  --viz-series-baseline: var(--color-accent);
  --viz-series-scenario: var(--color-fg-primary);

  /* …and the light half of the palette, on the same bare `:root`. One block,
     because two `:root` blocks in a row are one block written twice. */
  --color-bg-base: #f8f6f1;
  --color-bg-surface: #f2f0ea;
  --color-bg-elevated: #ffffff;
  --color-bg-hover: #ece9e2;
  --color-bg-active: #e2ded3;

  --color-fg-primary: #2d2d2d;
  --color-fg-secondary: #5a5a5a;
  /* Not a shade chosen by eye: `.muted` is the second most-used colour in the
     app — 124 uses in the templates alone, carrying the box hint, every
     section's description and the line under every result — and at #7a7a72 it
     was 4.01:1 on the base and 3.80:1 on the surface, under WCAG AA's 4.5:1
     for body text. Darkened along its own hue until the worst of the three
     backgrounds clears it: 4.88 / 4.62 / 5.27. */
  --color-fg-muted: #6c6c65;

  --color-border: #ddd8cc;
  --color-border-strong: #c9c3b4;
  --color-border-subtle: #eae7de;

  /* Accent is text on every ground, the selected row's `bg-active` the
     darkest of them: 4.59 there (it was 4.45 at #386889, one step lighter). */
  --color-accent: #366687;
  --color-accent-dim: rgba(54, 102, 135, 0.1);
  --color-accent-muted: rgba(54, 102, 135, 0.25);

  --color-danger: #b3382c;
  /* Exposed (after Reactor's exposure colours): what runs a vulnerable
     product. Violet: in OKLab at least 0.2 from danger and warning in both
     themes, also under simulated deuteranopia and protanopia (orange was
     0.08, magenta 0.12 — the owner could not tell orange from red), and
     clear of the accent, which selects. 5.44:1 on the canvas. */
  --color-exposed: #7a3fd0;
  --color-warning: #845b16;

  /* Visualization. Importance is a magnitude, so the ramp is sequential: one
     hue (the danger hue, OKLCH h = 27), lightness strictly monotone, anchored
     to the canvas — light to dark here, dark to light in the dark theme. Each
     step carries the ink that reads on it at 4.5:1 or better. The low steps
     sit close to the canvas on purpose, which is why every node also wears
     --viz-outline: 4.72:1 against the canvas, so shape never depends on fill. */
  --viz-canvas: #f4f2ec;
  --viz-outline: #6c6c65;
  /* Lines that carry meaning: 3:1 against the canvas (WCAG 1.4.11). */
  --viz-edge: #8c8579;
  --viz-imp-1: #ffe0db; --viz-imp-1-ink: #2d2d2d;
  --viz-imp-2: #f7afa6; --viz-imp-2-ink: #2d2d2d;
  --viz-imp-3: #e8796e; --viz-imp-3-ink: #2d2d2d;
  --viz-imp-4: #c8433c; --viz-imp-4-ink: #ffffff;
  --viz-imp-5: #901e1c; --viz-imp-5-ink: #ffffff;
  /* An architecture's component families: quiet plates (owner, 2026-09-26:
     OKLCH chroma 0.045, the hue only a tint) — the icon says the kind, and
     saturated colour is left to states and the selection. Each 3:1 or better
     against the canvas and under its white glyph (check-contrast.js). */
  --viz-family-network: #57637e;
  --viz-family-compute: #456c66;
  --viz-family-identity: #755e48;
  --viz-family-data: #715b72;
  --viz-family-ink: #ffffff;

  color-scheme: light;
}

/* Three states, two selectors.

   The system preference applies unless an explicit light choice says
   otherwise; an explicit dark choice applies whatever the system says. Light
   needs no block of its own — it is already on bare `:root` above, and
   `[data-theme="light"]` wins simply by excluding itself from the media query.

   The declarations are written twice because CSS has no way to give one block
   two conditions: a custom property cannot be defined once and applied
   conditionally, since the conditional *is* the cascade. The two blocks are
   adjacent so they are changed together. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg-base: #0e1015;
    --color-bg-surface: #14171d;
    --color-bg-elevated: #1b1e26;
    --color-bg-hover: #262a34;
    --color-bg-active: #2d3140;

    --color-fg-primary: #e2e4ec;
    /* Lifted with `muted` below it. `.badge` paints this on `bg-active`,
       which is the lightest surface there is, and at #8b8fa8 that pair was
       4.06:1 — the one place secondary text landed under AA. 4.59 there and
       better everywhere else. */
    --color-fg-secondary: #9599b0;
    /* See the light half: same floor, lightened rather than darkened.
       5.28 / 4.98 / 4.63 against base, surface and elevated. */
    --color-fg-muted: #8185a3;

    --color-border: #232636;
    --color-border-strong: #2e3244;
    --color-border-subtle: #191c26;

    --color-accent: #5aa8b0;
    --color-accent-dim: rgba(90, 168, 176, 0.15);
    --color-accent-muted: rgba(90, 168, 176, 0.35);

    /* 5.75:1 or better on every ground. */
    --color-danger: #e77676;
    --color-exposed: #b28cff;
    --color-warning: #e8a839;

    /* See the light half. Selected for this canvas, not flipped: 5.38:1 for
       the outline, and the ramp runs dark to light. */
    --viz-canvas: #0b0d12;
    --viz-outline: #8185a3;
    --viz-edge: #62687b;
    --viz-imp-1: #41211e; --viz-imp-1-ink: #e2e4ec;
    --viz-imp-2: #742e29; --viz-imp-2-ink: #e2e4ec;
    --viz-imp-3: #ab3a33; --viz-imp-3-ink: #e2e4ec;
    --viz-imp-4: #e36c61; --viz-imp-4-ink: #0e1015;
    --viz-imp-5: #fdb6ad; --viz-imp-5-ink: #0e1015;
    --viz-family-network: #65728d;
    --viz-family-compute: #537a75;
    --viz-family-identity: #846c56;
    --viz-family-data: #7f6980;
    --viz-family-ink: #ffffff;

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
    --color-bg-base: #0e1015;
    --color-bg-surface: #14171d;
    --color-bg-elevated: #1b1e26;
    --color-bg-hover: #262a34;
    --color-bg-active: #2d3140;

    --color-fg-primary: #e2e4ec;
    /* Lifted with `muted` below it. `.badge` paints this on `bg-active`,
       which is the lightest surface there is, and at #8b8fa8 that pair was
       4.06:1 — the one place secondary text landed under AA. 4.59 there and
       better everywhere else. */
    --color-fg-secondary: #9599b0;
    /* See the light half: same floor, lightened rather than darkened.
       5.28 / 4.98 / 4.63 against base, surface and elevated. */
    --color-fg-muted: #8185a3;

    --color-border: #232636;
    --color-border-strong: #2e3244;
    --color-border-subtle: #191c26;

    --color-accent: #5aa8b0;
    --color-accent-dim: rgba(90, 168, 176, 0.15);
    --color-accent-muted: rgba(90, 168, 176, 0.35);

    /* 5.75:1 or better on every ground. */
    --color-danger: #e77676;
    --color-exposed: #b28cff;
    --color-warning: #e8a839;

    /* See the light half. Selected for this canvas, not flipped: 5.38:1 for
       the outline, and the ramp runs dark to light. */
    --viz-canvas: #0b0d12;
    --viz-outline: #8185a3;
    --viz-edge: #62687b;
    --viz-imp-1: #41211e; --viz-imp-1-ink: #e2e4ec;
    --viz-imp-2: #742e29; --viz-imp-2-ink: #e2e4ec;
    --viz-imp-3: #ab3a33; --viz-imp-3-ink: #e2e4ec;
    --viz-imp-4: #e36c61; --viz-imp-4-ink: #0e1015;
    --viz-imp-5: #fdb6ad; --viz-imp-5-ink: #0e1015;
    --viz-family-network: #65728d;
    --viz-family-compute: #537a75;
    --viz-family-identity: #846c56;
    --viz-family-data: #7f6980;
    --viz-family-ink: #ffffff;

    color-scheme: dark;
}