/* OCDC Design System tokens.
   :root holds the OCDC Dark values (the default skin). The 16 core colors (--bg, --surface*, --line*,
   --text, --muted, --subtle and the six accents) are also redefined by every dashboard skin in styles.css;
   the semantic tokens below them keep their OCDC Dark values on the dark skins.
   Light skins (LOEPRE, Arctic Light, Solar Light, Paper) derive the semantic tokens from their own core
   colors in the block after :root, so text, controls and buttons follow the skin.
   Dark --primary is #217ba3 (was #268dbb) so --on-primary text clears 4.5:1 on primary buttons.
   styles.css reads these tokens; colors too far from any token go through legacy-colors.css. */

:root {
  --bg: #0a1220;
  --sidebar: #0b1524;
  --surface: #101c2d;
  --surface-2: #132239;
  --surface-3: #182a43;
  --line: #24364f;
  --line-soft: #1d2d44;
  --control-line: #2a405a;
  --control-bg: #14243a;
  --control-text: #c7d7e8;
  --text: #e7eef7;
  --heading: #f0f5fb;
  --muted: #91a3b9;
  --subtle: #72869e;
  --nav-text: #9bacbf;
  --nav-active-text: #dff5ff;
  --nav-active-bg: rgba(37,145,190,.2);
  --eyebrow: #75bedb;
  --link: #72c3e3;
  --cyan: #4ab6df;
  --blue: #278ec4;
  --primary: #217ba3;
  --primary-hover: #1d6f95;
  --on-primary: #f3fbff;
  --focus: #4ab7c8;
  --green: #38c79a;
  --amber: #e6ad50;
  --red: #ef6d7a;
  --violet: #9585f6;
  --healthy-text: #6ed2ae;
  --healthy-bg: rgba(39,143,112,.13);
  --warning-text: #e4bb77;
  --warning-bg: rgba(160,111,38,.12);
  --critical-text: #ff9ba4;
  --critical-bg: rgba(144,36,54,.18);
  --pill-bg: #142337;
  --pill-text: #a8bacd;
  --sev-critical: #ee6877;
  --sev-high: #e7a94e;
  --sev-medium: #63b4e2;
  --sev-low: #4cc69b;
  --shadow-panel: 0 14px 34px rgba(0,0,0,.18);
  --shadow-primary: 0 4px 12px rgba(20,116,159,.16);
}

:root:is([data-skin="loepre"],[data-skin="arctic"],[data-skin="solar"],[data-skin="paper"]) {
  --sidebar: var(--surface);
  --control-bg: var(--surface);
  --control-line: var(--subtle);
  --control-text: var(--text);
  --heading: var(--text);
  --nav-text: var(--muted);
  --nav-active-text: var(--text);
  --nav-active-bg: color-mix(in srgb, var(--blue) 12%, transparent);
  --eyebrow: color-mix(in srgb, var(--cyan) 72%, #000);
  --link: color-mix(in srgb, var(--blue) 72%, #000);
  --primary: color-mix(in srgb, var(--blue) 72%, #000);
  --primary-hover: color-mix(in srgb, var(--blue) 60%, #000);
  --on-primary: #ffffff;
  --focus: var(--cyan);
  --healthy-text: color-mix(in srgb, var(--green) 80%, #000);
  --healthy-bg: color-mix(in srgb, var(--green) 12%, var(--surface));
  --warning-text: color-mix(in srgb, var(--amber) 80%, #000);
  --warning-bg: color-mix(in srgb, var(--amber) 12%, var(--surface));
  --critical-text: color-mix(in srgb, var(--red) 85%, #000);
  --critical-bg: color-mix(in srgb, var(--red) 10%, var(--surface));
  --pill-bg: var(--surface-2);
  --pill-text: var(--muted);
  --sev-critical: var(--red);
  --sev-high: var(--amber);
  --sev-medium: var(--blue);
  --sev-low: var(--green);
  --shadow-panel: var(--shadow);
  --shadow-primary: 0 2px 6px color-mix(in srgb, var(--blue) 18%, transparent);
}

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 28px;
  --space-7: 30px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 7px;
  --radius-lg: 10px;
  --radius-xl: 11px;
  --radius-pill: 999px;
  --sidebar-width: 248px;
  --topbar-height: 58px;
  --control-height: 36px;
  --content-max: 1800px;
  --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Contrast tuning (2026-10-29): text colours each skin uses on its own surfaces, darkened (light skins) or
   lightened (dark skins) in OKLab lightness only, keeping the hue, until they reach 4.6:1 against every surface.
   html:root[data-skin] outranks the skin definitions in styles.css. Paper and High Contrast already pass. */
html:root[data-skin="ocdc"],
html:root:not([data-skin]) {
  --subtle: #8095ad;
}
html:root[data-skin="loepre"] {
  --subtle: #646977;
  --muted: #5e6478;
  --cyan: #006fa9;
  --blue: #006f9e;
  --amber: #915f07;
  --green: #00765d;
}
html:root[data-skin="arctic"] {
  --subtle: #506678;
  --muted: #4e6578;
  --cyan: #006c8b;
  --blue: #2766a7;
  --amber: #8a5900;
  --green: #047253;
  --violet: #6853b7;
}
html:root[data-skin="graphite"] {
  --subtle: #9aa6af;
}
html:root[data-skin="ember"] {
  --subtle: #8fa6a8;
}
html:root[data-skin="solar"] {
  --subtle: #6e604c;
  --cyan: #a14900;
  --amber: #905400;
  --green: #1f7043;
  --red: #b5322d;
  --violet: #794da7;
}
html:root[data-skin="forest"] {
  --subtle: #87a491;
}
html:root[data-skin="cobalt"] {
  --subtle: #8c9ad2;
}

/* Colour-blind safe series (build 11a): eight colours that stay apart under protanopia, deuteranopia and tritanopia,
   each paired with a pattern (solid, diagonal, dots, cross-hatch) that the widget "Patterns" setting turns on.
   tests/test_board_engine.py checks their pairwise distance. */
:root {
  --series-1: #e69f00;
  --series-2: #56b4e9;
  --series-3: #009e73;
  --series-4: #f0e442;
  --series-5: #0072b2;
  --series-6: #d55e00;
  --series-7: #cc79a7;
  --series-8: #bbbbbb;
}