/* RadMatrix — dark-mode parity tokens.
   Loads right after brand.css. Defines the --color-* contract shared by the
   MyoMed products and drives the existing brand tokens from it, so components
   written against either set follow the theme.

   Theme resolution (matches js/theme.js and the inline boot script in <head>):
     1. :root (light)                          default
     2. prefers-color-scheme: dark             follows the OS unless the user
                                               picked light (html.light /
                                               data-theme="light")
     3. html.dark / body.dark                  explicit choice, set by the
                                               toggle and persisted in
                                               localStorage "theme"
   Selectors use :root.dark (0,2,0) so they outrank brand.css's
   :root[data-theme="dark"] block that loads before this file. */

:root {
  --color-bg: var(--bg);
  --color-surface: var(--card);
  --color-surface-alt: var(--surface-2);
  --color-text-primary: var(--ink);
  --color-text-secondary: var(--muted);
  --color-border: var(--line);
  --color-accent: #0e7490; /* RadMatrix brand blue; mirrors --product-accent in styles.css */
  --color-accent-ink: #ffffff;
  --color-success: var(--good);
  --color-warn: var(--warn);
  --color-error: var(--bad);
  --color-on-dark: #ffffff;   /* text on always-dark panels (viewer, monitor) */
  --color-shadow: #000000;    /* base for color-mix() shadows */
}

@media (prefers-color-scheme: dark) {
  :root:not(.light):not([data-theme="light"]) {
    --color-bg: #0f1117;
    --color-surface: #1c1f2b;
    --color-surface-alt: #262a38;
    --color-text-primary: #f0f2f7;
    --color-text-secondary: #9ba3b8;
    --color-border: #2e3347;
    --color-accent: #22d3ee;
    --color-accent-ink: #06212a;
    --color-success: var(--good);
    --color-warn: var(--warn);
    --color-error: var(--bad);
  }
}

:root.dark,
html.dark,
body.dark {
  --color-bg: #0f1117;
  --color-surface: #1c1f2b;
  --color-surface-alt: #262a38;
  --color-text-primary: #f0f2f7;
  --color-text-secondary: #9ba3b8;
  --color-border: #2e3347;
  --color-accent: #22d3ee;
  --color-accent-ink: #06212a;
  --color-success: var(--good);
  --color-warn: var(--warn);
  --color-error: var(--bad);
}

/* Drive the brand tokens from the --color-* palette whenever dark is active,
   so every existing component (cards, chrome, panels, inputs) matches. */
@media (prefers-color-scheme: dark) {
  :root:not(.light):not([data-theme="light"]) {
    --bg: var(--color-bg);
    --card: var(--color-surface);
    --surface-1: var(--color-bg);
    --surface-2: var(--color-surface-alt);
    --surface-3: var(--color-border);
    --ink: var(--color-text-primary);
    --heading: var(--color-text-primary);
    --muted: var(--color-text-secondary);
    --line: var(--color-border);
    --input-bg: var(--color-surface-alt);
    --panel-bg: var(--color-surface);
    --panel-ink: var(--color-text-primary);
    --panel-hover: var(--color-surface-alt);
    --chrome-bg: var(--color-surface);
    --chrome-ink: var(--color-text-primary);
    --chrome-muted: var(--color-text-secondary);
    --chrome-line: var(--color-border);
  }
}
:root.dark,
html.dark,
body.dark {
  --bg: var(--color-bg);
  --card: var(--color-surface);
  --surface-1: var(--color-bg);
  --surface-2: var(--color-surface-alt);
  --surface-3: var(--color-border);
  --ink: var(--color-text-primary);
  --heading: var(--color-text-primary);
  --muted: var(--color-text-secondary);
  --line: var(--color-border);
  --input-bg: var(--color-surface-alt);
  --panel-bg: var(--color-surface);
  --panel-ink: var(--color-text-primary);
  --panel-hover: var(--color-surface-alt);
  --chrome-bg: var(--color-surface);
  --chrome-ink: var(--color-text-primary);
  --chrome-muted: var(--color-text-secondary);
  --chrome-line: var(--color-border);
  color-scheme: dark;
}

/* Form controls: native widgets otherwise keep a white field in dark mode. */
@media (prefers-color-scheme: dark) {
  :root:not(.light):not([data-theme="light"]) :is(input, select, textarea) {
    background-color: var(--color-surface-alt);
    color: var(--color-text-primary);
    border-color: var(--color-border);
  }
}
:root.dark :is(input, select, textarea),
body.dark :is(input, select, textarea) {
  background-color: var(--color-surface-alt);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}
:root.dark :is(input, textarea)::placeholder,
body.dark :is(input, textarea)::placeholder { color: var(--color-text-secondary); }
:root.dark select option,
body.dark select option { background-color: var(--color-surface); color: var(--color-text-primary); }
:root.dark :is(input[type="checkbox"], input[type="radio"], input[type="range"]),
body.dark :is(input[type="checkbox"], input[type="radio"], input[type="range"]) {
  background-color: transparent;
  accent-color: var(--color-accent);
}

/* Inline SVG icons inherit the text colour. */
svg.icon, .theme-toggle svg { fill: currentColor; }