/* src/panel/tokens.css: the lab's visual-language tokens — the canonical
 * copy, now living in the SDK rather than the hub shell.
 *
 * Codified, not invented: these custom properties are mined directly from
 * apps/welded_fields/index.html's :root block, the de facto token source
 * named in docs/params-panel-design.md ("One visual language"). That page
 * predates this file; this file just gives the same palette, spacing, and
 * control primitives a name every other page in the lab can share instead
 * of re-deriving them by eye. See docs/params-panel-design.md for the
 * design rationale (dark ground, single accent, monospace readouts,
 * grouped small-caps headers) this file codifies.
 *
 * Moved here from hub/tokens.css (v0.2): the token file belongs beside
 * the panel module it themes (src/panel/panel.css, src/panel/render.js),
 * not the shell, per the design doc's own module principle — a display
 * module never carries its own position, and theme is entirely
 * custom-property flow-through, so the tokens live with the SDK the
 * theme flows from. hub/index.html links this file at its new path; an
 * sdk-page app is free to link it too, but nothing requires it:
 * frozen-golden apps are preserved bytes and stay exempt by definition
 * (docs/params-panel-design.md, "Shell integration").
 */

:root {
  /* palette: "graphite" — the operator's ruling of 2026-08-11. True
   * black-adjacent ground and NEUTRAL grays, so the accent is the only
   * chromatic voice on the page. Supersedes the violet-tinted darks
   * originally mined from welded_fields (that page keeps its own copy,
   * frozen bytes). */
  --bg: #050505;
  --panel: #0c0c0d;
  --line: #26262a;
  --fg: #eeeeef;
  --dim: #a0a0a4;
  --faint: #636367;
  --accent: #b794ff;

  /* type stacks */
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;

  /* radii */
  --radius-1: 4px;
  --radius-2: 6px;
  --radius-3: 8px;

  /* Semantic state tier (design-kit addition, v0.2): the three colors a
   * page may use to say something about STATE rather than identity.
   * Consumers: verdict chips on instrument-views (confirmed / pending /
   * refuted), deviation callouts, gauges in alarm. These are chrome
   * colors, not data colors — a plotted quantity never borrows them
   * (docs/design-kit.md, "Hue is data or brand"). Chosen in the same
   * lightness family as --accent so all four sit at equal weight on the
   * dark ground. */
  --ok: #34d399;
  --warn: #fbbf24;
  --alert: #f87171;
}

/* Grouped small-caps section header, matching welded_fields' .grp/.hd. */
.grp { display: flex; flex-direction: column; gap: 9px; }
.grp > .hd {
  font: 600 9.5px/1 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--faint);
  padding-bottom: 5px;
  border-bottom: 1px solid var(--line);
}

/* Monospace label/value readout row, matching welded_fields' .read. */
.read { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; font: 11.5px var(--mono); }
.read .k { color: var(--faint); }
.read .v { color: var(--fg); text-align: right; }