/* Design tokens — transcribed from mockups/quant_logic_synthetic/DESIGN.md */

:root {
  /* The app is dark-only; declaring it stops browsers from
     auto-inverting an already-dark palette. */
  color-scheme: dark;

  /* Surfaces */
  --surface: #0b1326;
  --surface-dim: #0b1326;
  --surface-bright: #31394d;
  --surface-container-lowest: #060e20;
  --surface-container-low: #131b2e;
  --surface-container: #171f33;
  --surface-container-high: #222a3d;
  --surface-container-highest: #2d3449;
  --surface-variant: #2d3449;
  --surface-tint: #7bd0ff;
  --background: #0b1326;
  --on-background: #dae2fd;
  --on-surface: #dae2fd;
  --on-surface-variant: #bdc8d1;
  --inverse-surface: #dae2fd;
  --inverse-on-surface: #283044;

  /* Outlines */
  --outline: #87929a;
  --outline-variant: #3e484f;

  /* Primary — electric blue: actions, active states, focus */
  --primary: #8ed5ff;
  --on-primary: #00354a;
  --primary-container: #38bdf8;
  --on-primary-container: #004965;
  --inverse-primary: #00668a;
  --primary-fixed: #c4e7ff;
  --primary-fixed-dim: #7bd0ff;
  --on-primary-fixed: #001e2c;
  --on-primary-fixed-variant: #004c69;

  /* Secondary — mint green: positive performance, passed backtests */
  --secondary: #4edea3;
  --on-secondary: #003824;
  --secondary-container: #00a572;
  --on-secondary-container: #00311f;
  --secondary-fixed: #6ffbbe;
  --secondary-fixed-dim: #4edea3;
  --on-secondary-fixed: #002113;
  --on-secondary-fixed-variant: #005236;

  /* Tertiary — rose: drawdown, sell signals */
  --tertiary: #ffbcbf;
  --on-tertiary: #67001b;
  --tertiary-container: #ff929a;
  --on-tertiary-container: #8c0028;
  --tertiary-fixed: #ffdadb;
  --tertiary-fixed-dim: #ffb2b7;
  --on-tertiary-fixed: #40000d;
  --on-tertiary-fixed-variant: #92002a;

  /* Error */
  --error: #ffb4ab;
  --on-error: #690005;
  --error-container: #93000a;
  --on-error-container: #ffdad6;

  /* Data accent — warnings / pending compute */
  --warning: #f59e0b;

  /* Heatmap ramp: a sequential scale from poor (dark, muted) to optimal
     (bright mint). Brightness must rise with the score, so the eye lands on
     the good region rather than the bad one. */
  --heat-1: #3a1f28;
  --heat-2: #6d3437;
  --heat-3: #8a6a2e;
  --heat-4: #2f8a63;
  --heat-5: #4edea3;

  /* Spacing — 4px base unit for high information density */
  --unit: 4px;
  --stack-sm: 8px;
  --stack-md: 16px;
  --stack-lg: 32px;
  --gutter: 16px;
  --container-margin: 24px;

  /* Shape — "soft-technical" */
  --radius-chip: 2px;
  --radius: 4px;
  --radius-panel: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* Layout */
  --sidebar-width: 256px;
  --sidebar-rail-width: 72px;

  /* Fonts */
  --font-headline: "Hanken Grotesk", system-ui, sans-serif;
  --font-body: Inter, system-ui, sans-serif;
  --font-code: "JetBrains Mono", ui-monospace, monospace;
}