/* AnimusDB design tokens — the "Ledger" design system (ADR 0056), 2026-10-18
 * website redesign ("Archivo / open layout") of its palette and type.
 *
 * THIS FILE IS THE SHARED BASE. It is byte-identical to
 * `website/assets/tokens.css`; `dashboard::tokens_css_matches_website_copy`
 * fails the build's test gate if the two drift. Edit one, copy to the other.
 *
 * What lives here is what is genuinely the same on every surface: the colour
 * palette, the type families, status colours, and the ink ramp. What does NOT
 * live here is geometry — radius, spacing rhythm, control height, type sizes —
 * because those are the *skin*, and the marketing site (roomy, read at
 * leisure) and the in-product consoles (dense, scanned all day) deliberately
 * differ. Each consumer sets its own skin on top of this base.
 *
 * Palette rule (2026-10-18): white ground, near-black ink, ONE blue accent,
 * one light grey surface. NO high-contrast blocks in either theme: there is
 * no black section, no black code block and no filled-black button. A code
 * or terminal surface (`--code-bg`, and the legacy `--plate-*` names, which
 * now alias it) is the light grey surface in light and a slightly lighter
 * charcoal in dark. The primary button is a solid `--accent` fill with
 * `--accent-ink` text. Every text token below meets 4.5:1 on `--bg` and on
 * `--surface2` in its theme.
 *
 * NEW tokens in this revision (existing names are kept and re-valued):
 *   --font-display   face for H1/H2 and the wordmark (Archivo). Use it with
 *                    `font-stretch: var(--display-stretch)`,
 *                    `font-weight: var(--display-weight)`, uppercase.
 *   --display-stretch / --display-weight   the condensed 75% / 800 cut.
 *   --font-ui        now "Archivo", falling back to "Work Sans" (the embedded
 *                    consoles still load Work Sans via fonts.css and do not
 *                    ship Archivo, so they keep rendering Work Sans).
 *   --accent-fill    solid fill for a primary button / selected state
 *                    (= --accent); pair with --accent-ink.
 *   --rule           hairline colour for table rows and section dividers
 *                    (a flatter alias of --border).
 *
 * Light is the default state. Dark is a full theme, not a filter:
 * `[data-theme=dark]` and `prefers-color-scheme: dark` both override.
 *
 * KEYLINE MEANS LIVE: a live/updating value or an active nav/tab state gets a
 * 2px solid accent underline (`.live`, `--live-underline`). There is no glow,
 * no panel gradient, and no blur/soft shadow anywhere; the `--glow-*` tokens
 * stay (as `none`) so old references keep resolving.
 */

:root {
  /* --- ground --- */
  --bg: #ffffff;
  --bg-soft: #f3f4f6; /* the one grey band */
  --surface: #ffffff;
  --surface2: #f3f4f6; /* neutral fill, code blocks */
  --panel: var(--surface); /* flat, no panel gradients */
  --recessed: var(--surface2);
  --code-bg: #f3f4f6; /* code / terminal / log surface: light grey, never black */

  /* --- edges --- */
  --border: rgba(17, 17, 17, 0.14); /* hairline */
  --border-strong: rgba(17, 17, 17, 0.32);
  --rule: var(--border);
  --lit: rgba(255, 255, 255, 0.9);
  --grid: rgba(17, 17, 17, 0.08);

  /* --- ink (text) + the alpha ramp --- */
  --text: #111111;
  --ink-85: rgba(17, 17, 17, 0.9); /* strong body */
  --ink-72: rgba(17, 17, 17, 0.8); /* muted, ~#333 */
  --ink-55: rgba(17, 17, 17, 0.7); /* faint, ~#555, still >= 4.5:1 */
  --ink-50: rgba(17, 17, 17, 0.5); /* icons (non-text) */
  --ink-30: rgba(17, 17, 17, 0.3); /* strong rule */
  --ink-16: rgba(17, 17, 17, 0.14); /* rule */
  --text2: #333333;
  --text3: #555555;

  /* --- accent (ONE accent role: links, primary button, live-keylines) --- */
  --accent: #2a56c6;
  --accent-fill: var(--accent);
  --accent-hi: #1d409e; /* hover */
  --accent-soft: #e4ebfa; /* accent tint: toggle tracks, subtle fills */
  --accent-ink: #ffffff; /* text on a solid-accent surface */
  --accent-glow: transparent;
  --hatch: rgba(42, 86, 198, 0.55); /* bar/gauge hatch stripe */

  /* --- status --- */
  --ok: #1e6b45;
  --warn: #6f5409;
  --danger: #a03123;
  --ok-bg: rgba(30, 107, 69, 0.12);
  --warn-bg: rgba(190, 150, 40, 0.12);
  --danger-bg: rgba(160, 49, 35, 0.12);

  /* --- code / terminal surface (legacy "plate" names alias the light surface) --- */
  --plate-bg: var(--code-bg);
  --plate-border: 1px solid var(--border);
  --plate-shadow: none;
  --plate-text: var(--text);
  --plate-comment: var(--text3);
  --plate-output: var(--text2);
  --plate-accent: var(--accent);
  --plate-header: var(--text3);
  --plate-rule: var(--border);

  /* --- emphasis: keyline means live (glow is gone) --- */
  --glow-s: none;
  --glow-m: none;
  --glow-l: none;
  --glow-text: none;
  --live-underline: 2px;

  --shadow: none;
  --shadow-recessed: none;

  /* --- type --- */
  --font-ui: "Archivo", "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", sans-serif;
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --display-stretch: 75%;
  --display-weight: 800;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* --- motion (kept minimal) --- */
  --t-control: 120ms;
  --t-panel: 220ms;
  --t-glow: 0ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  color-scheme: light;
}

/* Dark theme values. Token NAMES are identical — only values change. */
:root[data-theme="dark"] {
  --bg: #121417;
  --bg-soft: #181b20;
  --surface: #121417;
  --surface2: #1c2026; /* code blocks: a step lighter than the ground */
  --panel: var(--surface);
  --recessed: var(--surface2);
  --code-bg: #1c2026;

  --border: rgba(236, 238, 242, 0.16);
  --border-strong: rgba(236, 238, 242, 0.34);
  --rule: var(--border);
  --lit: rgba(255, 255, 255, 0.08);
  --grid: rgba(236, 238, 242, 0.08);

  --text: #eceef2;
  --ink-85: rgba(236, 238, 242, 0.9);
  --ink-72: rgba(236, 238, 242, 0.8);
  --ink-55: rgba(236, 238, 242, 0.7);
  --ink-50: rgba(236, 238, 242, 0.55);
  --ink-30: rgba(236, 238, 242, 0.3);
  --ink-16: rgba(236, 238, 242, 0.16);
  --text2: #cfd3da;
  --text3: #a9afba;

  --accent: #7f9fef;
  --accent-fill: var(--accent);
  --accent-hi: #a6bdf6;
  --accent-soft: #1f2a48;
  --accent-ink: #0b1226;
  --accent-glow: transparent;
  --hatch: rgba(127, 159, 239, 0.45);

  --ok: #6fc493;
  --warn: #d8b45c;
  --danger: #e59a88;
  --ok-bg: rgba(111, 196, 147, 0.12);
  --warn-bg: rgba(216, 180, 92, 0.12);
  --danger-bg: rgba(229, 154, 136, 0.12);

  --plate-bg: var(--code-bg);
  --plate-border: 1px solid var(--border);
  --plate-shadow: none;
  --plate-text: var(--text);
  --plate-comment: var(--text3);
  --plate-output: var(--text2);
  --plate-accent: var(--accent);
  --plate-header: var(--text3);
  --plate-rule: var(--border);

  --glow-s: none;
  --glow-m: none;
  --glow-l: none;
  --glow-text: none;
  --live-underline: 2px;

  --shadow: none;
  --shadow-recessed: none;

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121417;
    --bg-soft: #181b20;
    --surface: #121417;
    --surface2: #1c2026; /* code blocks: a step lighter than the ground */
    --panel: var(--surface);
    --recessed: var(--surface2);
    --code-bg: #1c2026;

    --border: rgba(236, 238, 242, 0.16);
    --border-strong: rgba(236, 238, 242, 0.34);
    --rule: var(--border);
    --lit: rgba(255, 255, 255, 0.08);
    --grid: rgba(236, 238, 242, 0.08);

    --text: #eceef2;
    --ink-85: rgba(236, 238, 242, 0.9);
    --ink-72: rgba(236, 238, 242, 0.8);
    --ink-55: rgba(236, 238, 242, 0.7);
    --ink-50: rgba(236, 238, 242, 0.55);
    --ink-30: rgba(236, 238, 242, 0.3);
    --ink-16: rgba(236, 238, 242, 0.16);
    --text2: #cfd3da;
    --text3: #a9afba;

    --accent: #7f9fef;
    --accent-fill: var(--accent);
    --accent-hi: #a6bdf6;
    --accent-soft: #1f2a48;
    --accent-ink: #0b1226;
    --accent-glow: transparent;
    --hatch: rgba(127, 159, 239, 0.45);

    --ok: #6fc493;
    --warn: #d8b45c;
    --danger: #e59a88;
    --ok-bg: rgba(111, 196, 147, 0.12);
    --warn-bg: rgba(216, 180, 92, 0.12);
    --danger-bg: rgba(229, 154, 136, 0.12);

    --plate-bg: var(--code-bg);
    --plate-border: 1px solid var(--border);
    --plate-shadow: none;
    --plate-text: var(--text);
    --plate-comment: var(--text3);
    --plate-output: var(--text2);
    --plate-accent: var(--accent);
    --plate-header: var(--text3);
    --plate-rule: var(--border);

    --glow-s: none;
    --glow-m: none;
    --glow-l: none;
    --glow-text: none;
    --live-underline: 2px;

    --shadow: none;
    --shadow-recessed: none;

    color-scheme: dark;
  }
}

/* Shared primitives. `.panel` is the flat surface recipe; a `.live` value
 * carries the one emphasis device the system has — a 2px accent keyline. */
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.live {
  color: var(--text);
  border-bottom: var(--live-underline) solid var(--accent);
  padding-bottom: 3px;
}

.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}