/* Design tokens: dataviz reference palette (validated light + dark) plus chrome.
   Dark values are declared twice on purpose: once for the OS setting (unless the viewer forced light),
   once for the explicit [data-theme="dark"] toggle. Keep the two blocks identical. */

:root {
  color-scheme: light;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* chart surface and page plane */
  --surface-1: #fcfcfb;
  --page: #f9f9f7;

  /* ink */
  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  --muted: #898781;              /* chart axis labels and de-emphasis marks only (3.5:1) */
  --grid: #e1e0d9;
  --axis: #c3c2b7;
  --border: rgba(11, 11, 11, 0.10);
  --hover: rgba(11, 11, 11, 0.05);
  --link: #1c5cab;

  /* categorical slots 1-8 (fixed order; Epiroc = 1, Sandvik = 2, Combined = 3) */
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;
  --series-5: #e87ba4;
  --series-6: #008300;
  --series-7: #6250d6;
  --series-8: #e34948;
  --series-muted: #898781;

  /* status (fixed, never themed): always shown with an icon and a label */
  --good: #0ca30c;
  --warning: #fab219;
  --serious: #ec835a;
  --critical: #d03b3b;

  /* text tokens for signed changes (paired with a triangle glyph) */
  --delta-up: #006300;
  --delta-down: #b42323;

  /* cycle-clock quadrant washes (neutral) */
  --quad-tint-1: rgba(11, 11, 11, 0.045);
  --quad-tint-2: rgba(11, 11, 11, 0.015);

  --focus: #2a78d6;
  --shadow: 0 1px 2px rgba(11, 11, 11, 0.05);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface-1: #1a1a19;
    --page: #0d0d0d;
    --text-primary: #f0efec;
    --text-secondary: #c3c2b7;
    --muted: #898781;
    --grid: #2c2c2a;
    --axis: #383835;
    --border: rgba(255, 255, 255, 0.10);
    --hover: rgba(255, 255, 255, 0.07);
    --link: #6da7ec;
    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --series-4: #c98500;
    --series-5: #d55181;
    --series-6: #008300;
    --series-7: #9085e9;
    --series-8: #e66767;
    --series-muted: #898781;
    --delta-up: #0ca30c;
    --delta-down: #ec6e6e;
    --quad-tint-1: rgba(255, 255, 255, 0.055);
    --quad-tint-2: rgba(255, 255, 255, 0.02);
    --focus: #3987e5;
    --shadow: none;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-1: #1a1a19;
  --page: #0d0d0d;
  --text-primary: #f0efec;
  --text-secondary: #c3c2b7;
  --muted: #898781;
  --grid: #2c2c2a;
  --axis: #383835;
  --border: rgba(255, 255, 255, 0.10);
  --hover: rgba(255, 255, 255, 0.07);
  --link: #6da7ec;
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
  --series-5: #d55181;
  --series-6: #008300;
  --series-7: #9085e9;
  --series-8: #e66767;
  --series-muted: #898781;
  --delta-up: #0ca30c;
  --delta-down: #ec6e6e;
  --quad-tint-1: rgba(255, 255, 255, 0.055);
  --quad-tint-2: rgba(255, 255, 255, 0.02);
  --focus: #3987e5;
  --shadow: none;
}