/* Generated from the canonical PIDLAB theme. */
:root {
  color-scheme: light;
  --bg: #f3f4f6;
  --bg-soft: #f7f8fa;
  --card: #ffffff;
  --surface: #f7f8fa;
  --ink: #16181d;
  --muted: #69717e;
  --line: #e2e5ea;
  --brand: #1f2430;
  --brand-strong: #0f1219;
  /* PIDLAB orange brand palette */
  --brand-orange: #ff8a2d;
  --accent: var(--brand-orange);
  --accent-strong: #f97316;
  --accent-soft: #fff3e8;
  /* Bright brand orange is reserved for marks, fills and sufficiently large
     graphics. Small copy stays neutral instead of using a brown contrast hack. */
  --accent-text: var(--ink);
  --ok: #0d6b40;
  --warn: #c4791a;
  --bad: #c8483b;
  --primary-bg: var(--accent);
  --primary-bg-hover: var(--accent-strong);
  --primary-fg: #16181d;
  --secondary-bg: #ebebea;
  --secondary-bg-hover: #dcdcdb;
  --secondary-fg: var(--ink);
  --secondary-border: transparent;
  /* Compact header controls must signal interaction without moving. These
     semantic overlays resolve against the active light/dark ink + card pair,
     unlike the stronger list/menu hover token above. */
  --control-hover-bg: color-mix(in srgb, var(--ink) 6%, var(--card));
  --control-hover-border: color-mix(in srgb, var(--ink) 24%, var(--line));
  --control-active-bg: color-mix(in srgb, var(--ink) 10%, var(--card));
  --radius: 3px;
  /* Industrial geometry: compact radii preserve hierarchy without making
     every control look like a consumer-app pill. */
  --radius-lg: 6px;
  --radius-md: 4px;
  --radius-sm: 2px;
  /* Form inputs — single source of truth */
  --input-bg: rgba(15, 18, 25, 0.04);
  --input-bg-hover: rgba(15, 18, 25, 0.07);
  --input-border: var(--line);
  --input-border-hover: color-mix(in srgb, var(--accent) 40%, var(--line));
  --input-border-focus: var(--accent);
  --input-focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
  --input-error-ring: 0 0 0 3px color-mix(in srgb, var(--bad) 22%, transparent);
  --input-fg: var(--ink);
  --input-padding: 7px 10px;
  --input-radius: var(--radius-md);
  --input-font-size: 13px;
  /* Legacy UI token aliases.
     Older admin/auth/builder surfaces still consume the pre-theme variable
     names below. Keep them mapped to the canonical light/dark tokens so
     explicit light mode never falls back to dark text colours on light panels. */
  --text-primary: var(--ink);
  --text: var(--ink);
  --text-secondary: var(--muted);
  --text-muted: var(--muted);
  --text-value: var(--ink);
  --border: var(--line);
  --border-light: color-mix(in srgb, var(--line) 82%, var(--ink));
  --border-soft: color-mix(in srgb, var(--line) 78%, transparent);
  --border-strong: color-mix(in srgb, var(--line) 70%, var(--ink));
  --surface-elevated: var(--card);
  --surface-hover: var(--secondary-bg-hover);
  --bg-panel: var(--surface);
  --bg-card: var(--card);
  --bg-card-hdr: var(--bg-soft);
  --bg-input: var(--input-bg);
  --bg-hover: var(--secondary-bg-hover);
  --card-bg: var(--card);
  /* Previously referenced-but-undefined tokens (rendered broken / stale literal
     fallbacks that never theme-switched). Aliased onto canonical tokens so they
     resolve correctly in both themes. See docs/UI_CONSISTENCY_AUDIT_2026-06-02.md.
     (--bg-secondary's only users were de-carded in Phase 2c — it is no longer
     referenced anywhere, so no alias is needed.) */
  --fg: var(--ink);
  --shadow-sm: var(--shadow-soft);
  --err: var(--bad);
  --error: var(--bad);
  --warning: var(--warn);
  --font-ui: 'IBM Plex Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', 'Menlo', monospace;
  /* Type + spacing scale (Phase 3.0 — additive; theme-invariant, one :root def).
     See docs/UI_PHASE3_PLAN_2026-06-07.md. Consumers migrate in 3.2; ramp snaps in 3.3. */
  --fs-2xs: 10px;
  --fs-base: 13px;
  --ls-caps: 0.12em;
  --space-3: 12px;
  --space-4: 16px;
  --shadow-soft: 0 1px 3px rgba(15, 15, 15, 0.08);
  --shadow-accent: 0 2px 8px rgba(255, 138, 45, 0.24);
  /* Chart signal palette — aliased so legacy code referring to
     --sp-color / --pv-color etc. (originally only defined inside
     trainer.css) still resolves now that trainer styles are scoped. */
  --chart-sp: #ff8a2d;
  --chart-pv: #16a34a;
  --chart-mv: #0ea5e9;
  /* Heat/cool branch convention: cold = blue, hot = red. Applies to chart
     traces, canvas valve→load flow labels and PID→valve MV branch arrows. */
  --chart-mv-cool: #2563eb;
  --chart-mv-heat: #dc2626;
  --chart-ff: #c084fc;
  --chart-dist: #d97706;
  --chart-pvh: #94a3b8;
  --chart-kp: #6f56e8;
  --chart-ti: #4f97a1;
  --chart-tt: #c754a6;
  /* Cascade-stage palette — pill/chip identity colours for the stage SELECTOR UI.
     Variant A (Industrial HMI): SP cyan → MV amber spectrum. */
  --chart-pid-outer: #0891b2; /* cyan-600 (matches SP outer) */
  --chart-pid-middle-1: #0d9488; /* teal-600 */
  --chart-pid-middle-2: #65a30d; /* lime-600 */
  --chart-pid-middle-3: #ca8a04; /* yellow-600 */
  --chart-pid-inner: #d97706; /* amber-600 (matches MV outer) */
  --chart-pid-selector-branch: #0891b2;
  --chart-pid-selector-inner: #d97706;
  --chart-pid-active-glow: 0 0 0 2px color-mix(in srgb, var(--accent) 60%, transparent);

  /* Signal × Stage matrix for chart traces — Variant A (Industrial HMI).
     Hue family encodes signal type (SP=cyan, PV=lime, MV=amber).
     Shade encodes stage: outer = bright/saturated, inner = deep saturated. */
  --chart-trace-sp-outer: #0891b2; /* cyan-600 */
  --chart-trace-sp-inner: #155e75; /* cyan-800 */
  --chart-trace-sp-middle: #0e7490; /* cyan-700 */
  --chart-trace-pv-outer: #65a30d; /* lime-600 */
  --chart-trace-pv-inner: #3f6212; /* lime-800 */
  --chart-trace-pv-middle: #4d7c0f; /* lime-700 */
  --chart-trace-mv-outer: #d97706; /* amber-600 */
  --chart-trace-mv-inner: #c2410c; /* orange-700 */
  --chart-trace-mv-middle: #ea580c; /* orange-600 */
  --chart-trace-ff-outer: #a855f7; /* purple-500 */
  --chart-trace-ff-inner: #581c87; /* purple-900 */
  --chart-trace-ff-middle: #7e22ce; /* purple-700 */
  --chart-trace-err-outer: #ef4444;
  --chart-trace-err-inner: #7f1d1d;
  --chart-trace-err-middle: #b91c1c;
  --sp-color: var(--chart-sp);
  --pv-color: var(--chart-pv);
  --mv-color: var(--chart-mv);
  --mv-cool-color: var(--chart-mv-cool);
  --mv-heat-color: var(--chart-mv-heat);
  --ff-color: var(--chart-ff);
  --dist-color: var(--chart-dist);
  --pvh-color: var(--chart-pvh);
  --kp-color: var(--chart-kp);
  --ti-color: var(--chart-ti);
  --tt-color: var(--chart-tt);
  /* Builder node accent colors per role — single source of truth.
     CanvasNode + PropertiesPanel formula diagrams read these via
     getComputedStyle on document.documentElement. */
  --role-controller: #6366f1;
  --role-pid-algorithm: #fb923c;
  --role-control-structure: #818cf8;
  --role-selector: #a855f7;
  --role-vfd: #38bdf8;
  --role-servo-drive: #38bdf8;
  --role-valve: #10b981;
  --role-valve-positioner: #10b981;
  --role-heater: #f59e0b;
  --role-motor: #94a3b8;
  --role-transmission: #94a3b8;
  --role-load: #22c55e;
  --role-process-sensor: #22c55e;
  --role-temperature-sensor: #ef4444;
  --role-pressure-sensor: #0ea5e9;
  --role-flow-sensor: #06b6d4;
  --role-level-sensor: #14b8a6;
  --role-drive-feedback-sensor: #fb923c;
  --role-location: #22c55e;
  /* Chart background + grid (light theme defaults) */
  --chart-bg: #f5f6fa;
  --chart-plot-bg: #f5f6fa;
  --chart-grid: #e0e4ea;
  --chart-gridM: #c8cdd8;
  --chart-axis: #b0b8c4;
  --chart-label: #6a7585;
  /* Dropdown chevron icon (data URL with theme-appropriate stroke) */
  --chevron-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%2316181d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
}

[data-theme='dark'] {
  color-scheme: dark;
  --bg: #0d0f14;
  --bg-soft: #14171e;
  --card: #1b1e27;
  --surface: #1f232d;
  --ink: #e8eaf0;
  --muted: #8b93a5;
  --line: #2e323c;
  --brand: #e4e6eb;
  --brand-strong: #f3f4f6;
  --accent: var(--brand-orange);
  --accent-strong: #ff9f4a;
  --accent-soft: #252932;
  --accent-text: var(--ink);
  --ok: #4ade80;
  --warn: #fbbf24;
  --bad: #f87171;
  --primary-bg: var(--accent);
  --primary-bg-hover: var(--accent-strong);
  --primary-fg: #16181d;
  --secondary-bg: rgba(255, 255, 255, 0.06);
  --secondary-bg-hover: rgba(255, 255, 255, 0.1);
  --secondary-fg: var(--ink);
  --secondary-border: transparent;
  --shadow-soft: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-accent: 0 2px 10px rgba(255, 138, 45, 0.3);
  --chart-sp: #ff8a2d;
  --chart-pv: #22c55e;
  --chart-mv: #38bdf8;
  --chart-mv-cool: #60a5fa;
  --chart-mv-heat: #f87171;
  --chart-ff: #c084fc;
  --chart-dist: #f59e0b;
  --chart-pvh: #8b93a5;
  --input-bg: rgba(255, 255, 255, 0.04);
  --input-bg-hover: rgba(255, 255, 255, 0.07);
  --chart-bg: #0a0c0f;
  --chart-plot-bg: #0a0c0f;
  --chart-grid: #1a1f28;
  --chart-gridM: #22283a;
  --chart-axis: #2e3644;
  --chart-label: #6a7585;
  --chevron-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%23e8eaf0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
}