/* SessionHUD design tokens — snapshot.
 *
 * Committed copy of Sources/SessionHUD/DesignTokens/TokenValues.swift, plus the two
 * authority opacities that live in AuthorityStyle.swift. The app generates its browser
 * viewer's CSS from those files at runtime; this static page cannot, so the values are
 * snapshotted here and nowhere else on the site. If TokenValues changes, change this file
 * — never a literal in site.css or index.html.
 *
 * Source of truth: TokenValues.swift (color, spacing, radius),
 *                  AuthorityStyle.swift (opacity, marked glyph).
 */

:root {
  /* HUD palette — Studio Dark, the default profile. Brand-neutral by promise:
     no brand color ever appears inside a depicted HUD. */
  --hud-foreground: #ffffff;
  --hud-background: #000000;
  --recording: #f0383d;
  --playback: #4dd170;
  --stopped: #9e9e9e;
  --authoritative: #ffffff;
  --inferred: #fcc24f;
  --stale: #999999;
  --warning: #fcc24f;
  --error: #f0383d;

  /* Authority treatments — AuthorityStyle.marking(for:) */
  --opacity-authoritative: 1;
  /* No --opacity-inferred. `marking(for:)` returns nil for .inferred, so a guess draws at the
     authoritative treatment; the 0.9 that used to be here was the amber, withdrawn 2026-09-01.
     `--inferred` stays because the *token* stays in TokenValues.hudPalette, reserved and
     painting nothing. */
  --opacity-stale: 0.7;
  --opacity-unavailable: 0.6;
  --opacity-literal: 0.6; /* AuthorityStyle.literalDimming */

  /* Brand — page chrome only, never inside a HUD */
  --brand-violet: #9050f8;
  --brand-indigo: #5a77f5;
  --brand-cyan: #22aff8;
  --brand-ink: #0a0c10;
  --brand-paper: #f7f9fc;
  /* Channel triples, so site.css can dim a token with rgb(var(--x) / a) instead of
     re-typing the color. Same values as above. */
  --brand-paper-rgb: 247 249 252;
  --brand-violet-rgb: 144 80 248;
  --brand-cyan-rgb: 34 175 248;
  --hud-foreground-rgb: 255 255 255;
  --hud-background-rgb: 0 0 0;

  --brand-gradient: linear-gradient(75deg, var(--brand-violet), var(--brand-indigo), var(--brand-cyan));

  /* Spacing */
  --space-xs: 2px;
  --space-sm: 6px;
  --space-md: 12px;
  --space-lg: 20px;
  --space-xl: 32px;

  /* Radius */
  --radius-small: 4px;
  --radius-medium: 8px;
  --radius-panel: 14px;
}