/* tokens.css — the platform design tokens (single source of truth).
 *
 * WS7 Stage F: previously these tokens were duplicated inline in both `app.html`
 * (the model runner) and `index.html` (the landing page), with a "keep the two
 * copies in sync" hazard. They now live here and are linked by every shell page,
 * so the design system carries across all models and both surfaces automatically.
 *
 * Visual direction: "Instrument / slate" (WS7 Stage F, ADR-0033) — a cool-slate
 * page canvas with white cards floating on it (subtle elevation), lightly tinted
 * panel headers, and softly rounded corners. The blue accent and comfortable
 * density are unchanged. Three tokens carry this look through the components:
 *   --canvas           the page backdrop behind cards (slate)
 *   --surface          a card's own fill (white / dark panel) — floats on --canvas
 *   --panel-header-bg  the tinted fill of an input-panel / card header
 *   --shadow-card      the resting elevation of a floating card
 *
 * Palette strategy: a full LIGHT palette is the default (:root). The DARK palette
 * applies when the OS prefers dark AND the user hasn't forced light, OR when the
 * header toggle explicitly forces dark (data-theme="dark"). So the OS setting is
 * the default and the toggle is an override. The dark values are declared twice —
 * once for the attribute override, once inside the media query — because CSS can't
 * share a declaration block across a selector and an at-rule; keep the two in sync.
 */
:root {
  /* Palette (cool slate) */
  --canvas: #eef1f5; --bg: #ffffff; --fg: #0f172a; --muted: #64748b; --line: #d8dee6;
  --accent: #2563eb; --accent-fg: #ffffff; --error: #b91c1c;
  /* Run/Fit "go" green — a distinct action color from the blue accent. */
  --accent-green: #16a34a; --accent-green-fg: #ffffff;
  --panel: #f8fafc; --surface: #ffffff; --surface-2: #eef2f7;
  --toolbar-bg: #f1f5f9; --hover: #e7edf3;
  --panel-header-bg: #f1f5f9;
  --shadow-card: 0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.05);
  --badge-config-bg: #e0e7ff; --badge-config-fg: #3730a3;
  --badge-view-bg: #d1fae5; --badge-view-fg: #065f46;
  /* Categorical plot-series palette (WS7 Stage F, ADR-0033). Colorblind-safe +
     theme-aware: validated with the dataviz method against the light card surface
     (adjacent-pair CVD ΔE ≥ 8; the 3 sub-3:1 slots are covered by the always-present
     legend). Assigned in fixed order by chart.js — never cycled. Stepped for dark below. */
  --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100;
  --series-5: #e87ba4; --series-6: #008300; --series-7: #4a3aa7; --series-8: #e34948;
  /* Spacing / shape / type */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --radius: 10px; --radius-sm: 7px;
  --font-ui: 15px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

:root[data-theme="dark"] {
  --canvas: #0a0f17; --bg: #0d1420; --fg: #e2e8f0; --muted: #94a3b8; --line: #223047;
  --accent: #60a5fa; --accent-fg: #0b1220; --error: #f87171;
  --accent-green: #22c55e; --accent-green-fg: #06210f;
  --panel: #0f1826; --surface: #111a27; --surface-2: #16202e;
  --toolbar-bg: #111a27; --hover: #1b2636;
  --panel-header-bg: #16202e;
  --shadow-card: 0 1px 3px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.3);
  --badge-config-bg: #1e2a44; --badge-config-fg: #a5b4fc;
  --badge-view-bg: #12312a; --badge-view-fg: #6ee7b7;
  /* Same eight hues stepped for the dark card surface (all ≥ 3:1). */
  --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500;
  --series-5: #d55181; --series-6: #008300; --series-7: #9085e9; --series-8: #e66767;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #0a0f17; --bg: #0d1420; --fg: #e2e8f0; --muted: #94a3b8; --line: #223047;
    --accent: #60a5fa; --accent-fg: #0b1220; --error: #f87171;
    --accent-green: #22c55e; --accent-green-fg: #06210f;
    --panel: #0f1826; --surface: #111a27; --surface-2: #16202e;
    --toolbar-bg: #111a27; --hover: #1b2636;
    --panel-header-bg: #16202e;
    --shadow-card: 0 1px 3px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.3);
    --badge-config-bg: #1e2a44; --badge-config-fg: #a5b4fc;
    --badge-view-bg: #12312a; --badge-view-fg: #6ee7b7;
    --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500;
    --series-5: #d55181; --series-6: #008300; --series-7: #9085e9; --series-8: #e66767;
  }
}