/* =============================================
   DESIGN TOKENS — the single source of truth
   =============================================
   Every colour, channel triple and font stack the app paints with is named
   here and nowhere else. base.html links this file first in <head>, ahead of
   every stylesheet and <style> block that reads it, so it is on every page
   (every template extends base.html) and in every HTMX fragment swapped into
   one.

   The rules for using them — which token on which ground, the contrast
   floors, the colour roles — are docs/design/design_system.md. The design
   side reads docs/design/tokens.json, which is GENERATED from this file:

       .venv/bin/python search_poc/scripts/export_design_tokens.py

   Change a token here, run the export, commit both (a test fails when they
   disagree), then re-sync the "Timeline Operators" Design System artifact.

   Every token carries a one-line trailing comment: its role. The export
   takes that comment as the token's usage note, so keep it to one line and
   keep it true. The app is dark-only; there is one theme. */

:root {
  /* Grounds — a graduated dark scale, darkest first */
  --bg-deep: #050a10; /* the page ground; the composer box, the meters' and stat bars' tracks */
  --bg-panel: #0a0f18; /* panel (tech-card) fill; the header bar, the phone's tab bar, a character's bubble */
  --bg-panel-header: #0d1016; /* a panel's header strip and the composer tray under the transcript */
  --bg-input: #060b12; /* form fields (.tech-input, the graph's metric select) and the population field's ground */
  /* The page ground as a channel triple, for a scrim: a page dimmed under
     a question is the same dark, only see-through. */
  --bg-deep-rgb: 5, 10, 16; /* channels of bg-deep, for its tints: the confirmation modal's scrim, rgba(var(--bg-deep-rgb), .6) */

  /* Text — a four-tier hierarchy */
  --text-primary: #ced6de; /* headings, data values, active content, your own words; on every ground, 13:1 */
  --text-body: #b1bac4; /* readable prose: narrative, a character's replies, card bodies; on every ground, 9.7:1 */
  --text-secondary: #8494a7; /* labels, metadata, captions, anything off or inactive; on every ground, 6.1:1 */
  --text-muted: #040505; /* the scrollbar thumb and one population label; 1.03:1 on bg-deep, so it does not show (design_system.md, Known failures) */
  /* The secondary text as a channel triple, for the grey dashed frames of
     things that did not happen (a returned spend, a refused press) and the
     dimmed frames of a composer that takes no input. */
  --text-secondary-rgb: 132, 148, 167; /* channels of text-secondary, for its tints: rgba(var(--text-secondary-rgb), .4) */

  /* Accents — each one means one thing */
  --accent-cyan: #22d3ee; /* live, interactive, yours: actions, the active tab, corner brackets, your edge in the log; 10.5:1 on every ground */
  --accent-cyan-dim: rgba(34, 211, 238, 0.08); /* cyan's tint fill: a notice box, a focused field's glow, a hovered row */
  /* The cyan as a channel triple, for its tints at any other alpha. */
  --accent-cyan-rgb: 34, 211, 238; /* channels of accent-cyan, for its tints: rgba(var(--accent-cyan-rgb), .25) */
  --on-accent-cyan: #04222a; /* text on a solid accent-cyan fill (the nav tabs' count badges), 9.2:1 */
  --accent-alert: #ff0055; /* alert or trouble: an ending, a lost connection, a limit reached; 4.9:1 on bg-panel, 4.7:1 in its own .08 box */
  /* The alert hue as a channel triple, for the tinted frames and 6-8%
     fills that carry it at low alpha: an rgba() cannot decompose a hex
     token, and hand-mixing the channels is how an app ends up with five
     near-identical reds that agree with nothing. */
  --accent-alert-rgb: 255, 0, 85; /* channels of accent-alert, for its tints: rgba(var(--accent-alert-rgb), .08) */
  /* Influence, and nothing else: the cyan's oklch lightness and chroma
     turned to hue 78, so the two accents weigh the same on the dark
     ground and only the hue says which is which. The channel triple is
     for its tints, as with the alert. */
  --accent-influence: #ecb14d; /* influence and nothing else: the rail, a pressed message, a settlement, its log rows; 9.9:1 on every ground */
  --accent-influence-rgb: 236, 177, 77; /* channels of accent-influence: fill .06, frame .35, strong frame .7 */
  --status-connected: #22c55e; /* connected: the chat status line and its dot while a conversation is open; 8.4:1 on bg-panel-header */

  /* The percentile ramp's middle. window.percentileColor (base.html) and the
     population field draw the ramp in JS — Cytoscape and WebGL take computed
     colours only — as accent-alert → ramp-neutral → accent-cyan. Those
     literals must equal these tokens; test_design_tokens.py holds them to it. */
  --ramp-neutral: #5e6e82; /* the percentile ramp's neutral slate: standings 40-60, and no record at all */

  /* Tech borders — the panels' 1 px frames, all cyan at low alpha */
  --border-tech: rgba(34, 211, 238, 0.18); /* every panel frame, divider and field border at rest */
  --border-tech-hover: rgba(34, 211, 238, 0.35); /* a frame under the pointer; dropdowns and hover cards */
  --border-tech-glow: rgba(34, 211, 238, 0.4); /* the strongest frame: a toast (a linked character's beat, the world pulse) */

  /* Typography */
  --font-ui: "Inter", sans-serif; /* prose and UI text: bubbles, card bodies, buttons */
  --font-data: "Fira Code", "Courier New", monospace; /* the data face: uppercase labels, readouts, counts, tabs */
  --font-display: "Orbitron", var(--font-ui); /* the header's TIMELINE OPERATORS title, and nothing else */
}
