/* tokens.css — palette + type, coherent with the apollo goal-tree house style
   (dark-only #0f1419, DM Sans + Share Tech Mono).

   Direction: sibling of the goal-tree app, not a clone. I adopt the goal-tree's
   "fill / border / text" triad pattern (its --t-*-fi / -b / -fa type colors) and
   apply it to the thing THIS app is actually about — the epistemic distinction.
   measured (blue) and inferred (amber) each get a tinted fill, a saturated border,
   and a bright foreground, so "measured vs inferred" reads as a confident material,
   not just a font color. Verdict (clean/warn/invalid) is a parallel signal system. */
:root {
  /* ---- surfaces (layered: bg < panel < card < chrome; inset is the well) ---- */
  --bg: #0f1419;
  --bg-grid: #1a2128;
  --panel-bg: #131a20;
  --chrome-bg: #151c22;
  --inset-bg: #0a1016;
  --card-bg: #141c23;
  --card-bg-hover: #18222b;

  /* ---- text ramp ---- */
  --text-primary: #e8eef2;
  --text-secondary: #9aa7b2;
  --text-meta: #748492;
  --text-faint: #5a6b78;
  --text-on-active: #0a0e12;

  /* ---- edges / dividers ---- */
  --edge: #2a3640;
  --edge-strong: #3c4b58;
  --hover-border: #4a5b68;
  --divider: #212c34;

  /* ---- neutral accent (chrome title, headings, primary control) ---- */
  --accent: #8aa1b2;
  --accent-strong: #aec4d6;

  /* ---- EPISTEMIC SYSTEM — the load-bearing distinction ----
     measured = blue (proven ground truth); inferred = amber (not yet proven).
     Each gets the goal-tree fill/border/text triad so it reads as a material. */
  --measured: #5a9bd4;
  --measured-bright: #cfe6fb;
  --measured-bg: #102331;
  --measured-border: #214a68;
  --measured-tab: #16334a;

  --inferred: #c79a3f; /* slightly hotter than goal-tree --stub for contrast on amber bg */
  --inferred-bright: #f3dca0;
  --inferred-bg: #1a1608;
  --inferred-border: #3f3416;
  --inferred-tab: #3a3014;

  /* ---- VERDICT SYSTEM — clean / warn / invalid (+ none) ----
     each carries a tinted wash for the run-card left rail / fill. */
  --clean: #4caa6e;
  --clean-bright: #8fe0ac;
  --clean-bg: #0f2417;
  --warn: #f0b94a;
  --warn-bright: #ffd87a;
  --warn-bg: #241b08;
  --invalid: #d4665a;
  --invalid-bright: #f3a89e;
  --invalid-bg: #261311;
  --none: #5a6b78;

  /* ---- shape ---- */
  --radius: 9px;
  --radius-sm: 5px;
  --radius-pill: 999px;
  --gap: 16px;
  --gap-sm: 8px;

  /* ---- depth ---- */
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.28);
  --shadow-lift: 0 4px 14px rgba(0, 0, 0, 0.34);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);

  /* ---- motion (single shared vocabulary; tasteful, fast) ---- */
  --t-quick: 0.11s cubic-bezier(0.4, 0, 0.2, 1);
  --t-base: 0.16s cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- type ---- */
  --mono: "Share Tech Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --maxw: 1180px;
}

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
body {
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a {
  color: var(--accent-strong);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
code {
  font-family: var(--mono);
  font-size: 0.86em;
  color: var(--text-secondary);
  background: var(--inset-bg);
  padding: 1px 5px;
  border: 1px solid var(--divider);
  border-radius: 3px;
}
h1,
h2 {
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Shared focus ring — keyboard navigation must be obvious on a dark surface.
   Mouse clicks suppressed via :focus-visible so it never reads as decoration. */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* Honor reduced-motion: state is never conveyed by motion alone, so dropping it is safe. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.001s !important;
    animation-duration: 0.001s !important;
  }
}