/* ==========================================================================
   tokens.css — the house design system (TASK 119, 2026-10-11)
   Taken from the two reference pages (docs/design/reference/homepage.html and
   tuatara-fund.html). Loaded site-wide by templates/base_content.html, before
   every other stylesheet, so a page that still declares its own variables keeps
   them until it is converted.

   THREE RULES SHIP WITH THESE TOKENS, AND THEY ARE THE POINT:

   1. ACCENT IS THE PRIMARY CALL TO ACTION AND NOTHING ELSE, ONE PER VIEW.
      var(--accent) paints the single most important action on the screen.
      Not links, not focus rings, not headings, not a second button, not
      "selected" chips. A view with no primary action uses no accent.

   2. POS AND NEG MEAN THE SIGN OF A NUMBER — NEVER DIRECTION, NEVER STATUS,
      NEVER A BADGE. var(--pos) / var(--neg) colour a numeric value by its sign
      (+2.4% / -1.1%). "Fixed", "online", "offline", "buy", "sell", "long",
      "short" are words, not colours.

   3. BACKGROUND IS NEVER PURE BLACK, TEXT IS NEVER PURE WHITE.
      The darkest surface is var(--bg); the brightest text is var(--text).

   Pinned by tests/test_design_tokens_audit.py: any hex colour in a template or
   stylesheet outside this list, more than one accent-coloured button in a view,
   or pos/neg on something that is not a numeric value fails the test, unless the
   file is listed in tests/design_tokens_exceptions.txt (the visible debt, which
   may only fall). Measure the distance: python3 scripts/ops/design_tokens_audit.py

   Display face: the header-font rule (frontend.md, operator 2026-06-10/08-05)
   keeps the brand and page headings on var(--font-display) = Archivo Black.
   --display below is the reference pages' value, kept exactly.
   ========================================================================== */

:root {
  --bg: #070B10; --surface: #0D141C; --surface-2: #121C26;
  --hairline: #1E2A36; --hairline-strong: #2B3A49;
  --text: #E9EFF5; --text-2: #A4B3C2; --text-3: #7E90A1;
  --accent: #00CFFF; --accent-ink: #04222B;
  --pos: #3DDC8A; --neg: #FF6B6B;
  --s1: 8px; --s2: 16px; --s3: 32px; --s4: 64px; --s5: 96px;
  --measure: 66ch; --wide: 1180px;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display: "Archivo", var(--sans);
}

@media (max-width: 760px) {
  :root { --s4: 44px; --s5: 60px; }
}

/* Light theme (html[data-theme="light"], main.css): the token set is dark-only, so
   each colour token points at the site's existing light-theme value. No new colour. */
[data-theme="light"] {
  --bg: var(--bg-primary); --surface: var(--bg-secondary); --surface-2: var(--bg-tertiary);
  --hairline: var(--border-color); --hairline-strong: var(--panel-border-hover);
  --text: var(--text-primary); --text-2: var(--text-secondary); --text-3: var(--text-dim);
  --accent: var(--accent-cyan); --accent-ink: var(--input-bg);
  --pos: var(--positive-color); --neg: var(--negative-color);
}