/* ============================================================================
   tokens.css — THE design-token sheet (design_language.md §3, W0)
   ============================================================================
   One sheet for every 2D surface: the ttweb shell, the drill designer, and
   (embedded) the in-VR panel. Rules of the sheet:
     - dark-first (headset + lab); status colors are STATUS ONLY, never
       decoration; ONE accent; contrast >= AA at panel distance.
     - numbers render in tabular/mono numerals with units (P5) — use
       var(--font-mono) for every measured value.
     - motion tokens cap all transitions (P4): deterministic, <= 200ms, one
       easing family, no overshoot on data surfaces.
   Evolve values HERE; never fork per-app palettes. A treatment that cannot
   be expressed as plain CSS on these tokens is out (P4 weight budget).     */

:root {
  /* --- surfaces --- */
  --bg:     #11151a;   /* app background */
  --panel:  #181d24;   /* card / surface */
  --inset:  #0d1116;   /* wells: pre blocks, raw data, canvas mats */
  --line:   #2a323c;   /* hairlines, borders */

  /* --- text --- */
  --fg:     #dde3ea;   /* primary */
  --sub:    #8a99a8;   /* secondary: reasons, counts, provenance */

  /* --- the one accent (interactive, links, auto-ACT) --- */
  --accent: #4ea1ff;
  --accent-ink: #04121f;   /* text ON accent fills */

  /* --- status trio (reserved for status) --- */
  --ok:   #4ec97a;
  --warn: #e0a84e;
  --err:  #e0635a;

  /* --- data hues (P5): grown from the codebase's replay idiom --- */
  --data-trace: #35c8dc;   /* recorded / trajectory (replay cyan) */
  --data-mark:  #e8b84b;   /* highlighted moment / bounce (replay gold) */

  /* --- type --- */
  --font-ui:   system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-0: 12px;  /* fine print: provenance, badges */
  --fs-1: 13px;  /* secondary */
  --fs-2: 15px;  /* body (base) */
  --fs-3: 17px;  /* card titles / stat labels */
  --fs-4: 22px;  /* stat values */
  --fs-5: 28px;  /* hero numbers */

  /* --- space & shape --- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --radius-s: 7px; --radius-m: 10px; --radius-l: 14px;

  /* --- motion (P4: deterministic, purposeful, capped) --- */
  --t-fast: 120ms;      /* interaction feedback */
  --t-view: 200ms;      /* view/state change ceiling */
  --ease:   cubic-bezier(0.2, 0, 0, 1);   /* one family, no overshoot */
}