/* ==========================================================================
   SoftVerx colour — dark by default, paper when printed.

   Rules:
   1. One meaning per hue. accent = "detected / look here". signal = forecast
      and projection. field = measured-good. amber = threshold / review.
      Status hues are reserved and never reused as series colours.
   2. The accent is never a background wash and never body text.
   3. Elevation comes from tonal step + edge light, not drop shadows.
   ========================================================================== */

:root {
  /* --- Dark surface ladder (blue undertone, five real steps) ------------ */
  --sx-void: #04060d;        /* below canvas: footers, wells, code blocks   */
  --sx-canvas: #070912;      /* the page                                     */
  --sx-surface: #0e1220;     /* cards, panels, chart plots                   */
  --sx-raised: #161b2c;      /* nested panels, table headers, tracks         */
  --sx-overlay: #1f2537;     /* dropdowns, dialogs, tooltips                 */

  /* --- Lines ------------------------------------------------------------ */
  --sx-line: #1e2437;
  --sx-line-strong: #2e3650;
  --sx-edge-light: rgba(255, 255, 255, 0.055); /* 1px top inner highlight   */

  /* --- Ink --------------------------------------------------------------
     ink and ink-muted clear WCAG AA on canvas, surface and raised.
     ink-subtle is AA-large / non-essential only — never body copy. */
  --sx-ink: #f5f7fa;
  --sx-ink-muted: #a2a9bd;
  --sx-ink-subtle: #868ea9;

  /* --- Accent: "detected" ----------------------------------------------- */
  --sx-accent: #3d8bf2;
  --sx-accent-hover: #62a1f6;
  --sx-accent-press: #2f74d8;
  --sx-accent-ink: #0a1020;
  --sx-accent-soft: rgba(61, 139, 242, 0.1);
  --sx-accent-line: rgba(61, 139, 242, 0.28);

  /* --- Semantic data hues. Fixed order, never cycled. -------------------- */
  --sx-signal: #e26a38;   /* forecast, projection, the modelled figure       */
  --sx-field: #20b57f;    /* measured ground truth, healthy                  */
  --sx-amber: #c98500;    /* threshold, needs review                         */

  /* --- Capability layers. One hue per layer, promoted from the practice dome
     so a group is the same colour wherever it is drawn. ------------------- */
  --sx-layer-core: #e8a33d;
  --sx-layer-connected: #22c58b;
  --sx-layer-intelligence: #6ba2f5;

  --sx-series-1: var(--sx-accent);
  --sx-series-2: var(--sx-signal);
  --sx-series-3: var(--sx-field);
  --sx-series-4: var(--sx-amber);

  /* Confidence-band and sample-data fills */
  --sx-band: rgba(226, 106, 56, 0.14);
  --sx-sample: rgba(162, 169, 189, 0.35);

  /* --- Chart chrome — recessive by design -------------------------------- */
  --sx-grid: #1c2233;
  --sx-axis: #2a3149;

  /* --- Status. Reserved. ------------------------------------------------- */
  --sx-good: #21b45f;
  --sx-warning: #fab219;
  --sx-critical: #ea6a66;

  /* --- Film grain --------------------------------------------------------
     One inline SVG turbulence, no network request. Keeps large dark areas
     from banding on cheap panels and trade-stand screens. */
  --sx-grain: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNjAnIGhlaWdodD0nMTYwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC44NScgbnVtT2N0YXZlcz0nMycvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxNjAnIGhlaWdodD0nMTYwJyBmaWx0ZXI9J3VybCgjbiknLz48L3N2Zz4="); /* @kind other */
  --sx-grain-opacity: 0.035; /* @kind other */

  /* --- Semantic aliases (use these in components) ------------------------ */
  --bg-page: var(--sx-canvas);
  --bg-well: var(--sx-void);
  --surface-card: var(--sx-surface);
  --surface-raised: var(--sx-raised);
  --surface-overlay: var(--sx-overlay);
  --border-default: var(--sx-line);
  --border-strong: var(--sx-line-strong);
  --text-strong: var(--sx-ink);
  --text-body: var(--sx-ink-muted);
  --text-quiet: var(--sx-ink-subtle);
  --text-accent: var(--sx-accent);
  --focus-ring: var(--sx-accent);
}

/* ==========================================================================
   Paper inversion. Everything prints; add data-theme="paper" (or print) and
   the same components render as ink on stock.
   Accent darkens to #2c5ce0 so it clears AA on paper and survives CMYK —
   see guidelines/print.md.
   ========================================================================== */

[data-theme="paper"] {
  --sx-void: #e7eaf0;
  --sx-canvas: #f7f8fa;
  --sx-surface: #ffffff;
  --sx-raised: #eef1f5;
  --sx-overlay: #ffffff;

  --sx-line: #dde2ea;
  --sx-line-strong: #b9c1d0;
  --sx-edge-light: rgba(11, 15, 26, 0.04);

  --sx-ink: #0b0f1a;
  --sx-ink-muted: #464e63;
  --sx-ink-subtle: #5f6779;

  --sx-accent: #2c5ce0;
  --sx-accent-hover: #1f49c2;
  --sx-accent-press: #173ba4;
  --sx-accent-ink: #ffffff;
  --sx-accent-soft: rgba(44, 92, 224, 0.08);
  --sx-accent-line: rgba(44, 92, 224, 0.3);

  --sx-layer-core: #a9700f;
  --sx-layer-connected: #0f8355;
  --sx-layer-intelligence: #2f63c4;

  --sx-signal: #b8431a;
  --sx-field: #10784f;
  --sx-amber: #9a6600;

  --sx-band: rgba(184, 67, 26, 0.12);
  --sx-sample: rgba(70, 78, 99, 0.3);

  --sx-grid: #e6eaf1;
  --sx-axis: #c3cbd9;

  --sx-good: #10784f;
  --sx-warning: #9a6600;
  --sx-critical: #c02c2c;

  --sx-grain-opacity: 0; /* @kind other */

  /* Custom properties resolve where they are declared, so the semantic aliases
     have to be restated here — otherwise they keep the dark values even after
     the palette flips. Same definitions as :root, nothing new. */
  --bg-page: var(--sx-canvas);
  --bg-well: var(--sx-void);
  --surface-card: var(--sx-surface);
  --surface-raised: var(--sx-raised);
  --surface-overlay: var(--sx-overlay);
  --border-default: var(--sx-line);
  --border-strong: var(--sx-line-strong);
  --text-strong: var(--sx-ink);
  --text-body: var(--sx-ink-muted);
  --text-quiet: var(--sx-ink-subtle);
  --text-accent: var(--sx-accent);
  --focus-ring: var(--sx-accent);
}