/* Design tokens. Every color pair used for text or controls is checked by test A11Y-01
   (WCAG 2.2 AA: text >= 4.5:1, borders and focus >= 3:1) for every theme in this file.
   A theme is selected with data-theme on <html>; any element can carry data-theme (the
   Appearance page uses that for its previews). "auto" follows the system, dark by default.

   The dark values are the Mission Control + Context Workbench palette of the 2026-10-20
   frontend redesign (D-81): a deep slate blue with a cyan accent. --nav is the sidebar
   surface; --surface and --surface-2 are cards and raised panels.

   --host / --container are the two colour families of the Overview page (PLAN.md Slice 9, R3),
   used for a column's heading and its rule, and --host-wash / --container-wash are the tinted
   card surfaces beside them. Each wash is its theme's own --surface tinted toward the family
   colour and held at --surface's luminance, so every foreground that passes on a card passes on
   a tinted card too (A11Y-01 checks both washes as backgrounds, and both family colours as
   foregrounds, in every theme). In the contrast theme the wash is --surface itself: the family
   is carried by the heading and the rule, and a decorative tint is not what that theme is for.
   A family never means anything by colour alone - every card also states its condition in
   words (codia.overview.service.Card.state). */

:root,
[data-theme="dark"],
[data-theme="auto"] {
  color-scheme: dark;
  --bg: #0b1118;
  --nav: #101923;
  --surface: #15212e;
  --surface-2: #1b2b3b;
  --text: #f1f5f9;
  --text-muted: #b4c3d2;
  --accent: #67e8f9;
  --on-accent: #08232a;
  --border: #2b3b4d;
  --border-strong: #6a8097;
  --primary: #96bcff;
  --danger: #fda4af;
  --warning: #fcd34d;
  --success: #86efac;
  --info: #7dd3e8;
  --focus: #67e8f9;
  --host: #8fb4ff;
  --container: #9ae6b4;
  --host-wash: #17212e;
  --container-wash: #162223;
  --glow: rgb(103 232 249 / 8%);
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff;
  --nav: #eef2f7;
  --surface: #f4f6f9;
  --surface-2: #e9edf3;
  --text: #171c26;
  --text-muted: #475163;
  --accent: #00647a;
  --on-accent: #ffffff;
  --border: #ced5df;
  --border-strong: #6b7587;
  --primary: #1b55b5;
  --danger: #a8221b;
  --warning: #7a4a00;
  --success: #17653a;
  --info: #0a5f6e;
  --focus: #1b55b5;
  --host: #1b55b5;
  --container: #17653a;
  --host-wash: #eef7ff;
  --container-wash: #ecf8f6;
  --glow: rgb(0 100 122 / 8%);
}

@media (prefers-color-scheme: light) {
  [data-theme="auto"] {
    color-scheme: light;
    --bg: #ffffff;
    --nav: #eef2f7;
    --surface: #f4f6f9;
    --surface-2: #e9edf3;
    --text: #171c26;
    --text-muted: #475163;
    --accent: #00647a;
    --on-accent: #ffffff;
    --border: #ced5df;
    --border-strong: #6b7587;
    --primary: #1b55b5;
    --danger: #a8221b;
    --warning: #7a4a00;
    --success: #17653a;
    --info: #0a5f6e;
    --focus: #1b55b5;
    --host: #1b55b5;
    --container: #17653a;
    --host-wash: #eef7ff;
    --container-wash: #ecf8f6;
    --glow: rgb(0 100 122 / 8%);
  }
}

[data-theme="aurora"] {
  color-scheme: dark;
  --bg: #070a14;
  --nav: #0b0f1d;
  --surface: #0f1322;
  --surface-2: #171c32;
  --text: #eef2ff;
  --text-muted: #aab3d4;
  --accent: #3df5e0;
  --on-accent: #032420;
  --border: #2a3156;
  --border-strong: #8089b8;
  --primary: #a5b9ff;
  --danger: #ff9da8;
  --warning: #ffc96e;
  --success: #6cf0a8;
  --info: #7ddcf2;
  --focus: #3df5e0;
  --host: #9fc4ff;
  --container: #8ee3b8;
  --host-wash: #10141d;
  --container-wash: #0e1517;
  --glow: rgb(61 245 224 / 20%);
}

[data-theme="paper"] {
  color-scheme: light;
  --bg: #fbf8f3;
  --nav: #f0ebe1;
  --surface: #f2ede4;
  --surface-2: #e8e1d5;
  --text: #1f1b16;
  --text-muted: #5a5247;
  --accent: #0b6b5e;
  --on-accent: #ffffff;
  --border: #d6cdbd;
  --border-strong: #7a7063;
  --primary: #2a4fa8;
  --danger: #a3201a;
  --warning: #7a4a00;
  --success: #17653a;
  --info: #0a5f6e;
  --focus: #2a4fa8;
  --host: #1f4f9e;
  --container: #1d6b43;
  --host-wash: #eceeef;
  --container-wash: #eaf0e2;
  --glow: rgb(11 107 94 / 10%);
}

[data-theme="contrast"] {
  color-scheme: dark;
  --bg: #000000;
  --nav: #050505;
  --surface: #0a0a0a;
  --surface-2: #141414;
  --text: #ffffff;
  --text-muted: #e0e0e0;
  --accent: #5ce1ff;
  --on-accent: #000000;
  --border: #ffffff;
  --border-strong: #ffffff;
  --primary: #9cc2ff;
  --danger: #ffb3ad;
  --warning: #ffd27a;
  --success: #8ff0b5;
  --info: #8be6f5;
  --focus: #ffff00;
  --host: #ffffff;
  --container: #ffff00;
  --host-wash: #0a0a0a;
  --container-wash: #0a0a0a;
  --glow: transparent;
}

/* Typography, spacing and shape (theme independent) */
:root {
  --font-text: "Inter Variable", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Space Grotesk Variable", var(--font-text);
  --font-mono: "JetBrains Mono Variable", ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --radius: 6px;
  --radius-card: 8px;
  --control-height: 2.5rem;
  --measure: 70ch;
  --sidenav-width: 14.5rem;
  --inspector-width: 20rem;
}

html[data-font="plex"] {
  --font-text: "IBM Plex Sans Variable", system-ui, "Segoe UI", Roboto, Arial, sans-serif;
}

html[data-font="atkinson"] {
  --font-text: "Atkinson Hyperlegible Next Variable", system-ui, "Segoe UI", Roboto, Arial, sans-serif;
}

html[data-font="system"] {
  --font-text: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-text);
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
}

html[data-density="compact"] {
  --space-3: 0.5rem;
  --space-4: 0.75rem;
  --space-6: 1rem;
  --control-height: 2.25rem;
}

html[data-size="large"] {
  font-size: 112.5%;
}

html[data-size="larger"] {
  font-size: 125%;
}