/*
 * WSNG Panel — colour themes (Profile -> Appearance).
 * ===================================================
 *
 * The eight accent themes. `data-theme` is written on <html> by
 * `panel-theme-boot.js` before the first paint and by `usePanelTheme()`
 * afterwards; a swatch in the Profile page sets it on itself to preview a theme.
 *
 * WHY THIS IS ITS OWN FILE, AND WHY IT MUST BE LINKED LAST
 * --------------------------------------------------------
 * These rules are deliberately UNLAYERED. In the CSS cascade an unlayered
 * declaration beats one inside a cascade layer, regardless of specificity, so
 * the same rules placed in the bundle's `@layer base` lose to any later
 * unlayered token layer — which is exactly what the deployed design-overrides
 * layer is. Linked last, these blocks win on `:root`; layered, every theme
 * would silently render as the default colour.
 *
 * WHAT A THEME MAY TOUCH
 * ----------------------
 * Only the accent: --primary, --primary-hover, --primary-subtle, --ring.
 * Backgrounds, surfaces, borders, text and the semantic status colours
 * (--success / --warning / --danger) are never re-declared, so ONLINE / OFFLINE
 * / ERROR keep identical contrast in all eight themes, and no theme can move
 * typography, spacing, radii or layout. `src/lib/panelThemes.test.ts` asserts
 * all of that against this file.
 *
 * `blue` is the shipped design verbatim (identical to the bundle's `:root`), so
 * an account that never chose a theme cannot see a difference; its block exists
 * only so the swatch preview is right while another theme is active.
 */

[data-theme='blue'] {
  --primary: 252 68% 53%; --primary-hover: 252 70% 46%; --primary-subtle: 252 90% 96%;
  --ring: 252 68% 53%;
}
[data-theme='violet'] {
  --primary: 276 68% 55%; --primary-hover: 276 70% 48%; --primary-subtle: 276 90% 96%;
  --ring: 276 68% 55%;
}
[data-theme='teal'] {
  --primary: 187 70% 38%; --primary-hover: 187 72% 32%; --primary-subtle: 187 70% 95%;
  --ring: 187 70% 38%;
}
[data-theme='green'] {
  --primary: 152 60% 38%; --primary-hover: 152 62% 32%; --primary-subtle: 152 60% 95%;
  --ring: 152 60% 38%;
}
[data-theme='amber'] {
  --primary: 38 92% 40%; --primary-hover: 38 94% 34%; --primary-subtle: 38 96% 95%;
  --ring: 38 92% 40%;
}
[data-theme='rose'] {
  --primary: 336 72% 52%; --primary-hover: 336 74% 45%; --primary-subtle: 336 90% 96%;
  --ring: 336 72% 52%;
}
[data-theme='red'] {
  --primary: 356 70% 50%; --primary-hover: 356 72% 43%; --primary-subtle: 356 90% 96%;
  --ring: 356 70% 50%;
}
[data-theme='slate'] {
  --primary: 222 30% 42%; --primary-hover: 222 32% 35%; --primary-subtle: 222 30% 95%;
  --ring: 222 30% 42%;
}

/* Dark mode: same hues, lifted for a dark surface. The selector is two classes
 * deep on purpose — it has to beat both `.dark` and a later `:root`. */
[data-theme='blue'].dark, .dark [data-theme='blue'] {
  --primary: 252 80% 66%; --primary-hover: 252 84% 72%; --primary-subtle: 252 40% 20%;
  --ring: 252 80% 68%;
}
[data-theme='violet'].dark, .dark [data-theme='violet'] {
  --primary: 276 80% 68%; --primary-hover: 276 84% 74%; --primary-subtle: 276 40% 20%;
  --ring: 276 80% 70%;
}
[data-theme='teal'].dark, .dark [data-theme='teal'] {
  --primary: 187 72% 62%; --primary-hover: 187 76% 68%; --primary-subtle: 187 40% 18%;
  --ring: 187 72% 64%;
}
[data-theme='green'].dark, .dark [data-theme='green'] {
  --primary: 152 62% 62%; --primary-hover: 152 66% 68%; --primary-subtle: 152 36% 18%;
  --ring: 152 62% 64%;
}
[data-theme='amber'].dark, .dark [data-theme='amber'] {
  --primary: 38 92% 64%; --primary-hover: 38 94% 70%; --primary-subtle: 38 46% 18%;
  --ring: 38 92% 66%;
}
[data-theme='rose'].dark, .dark [data-theme='rose'] {
  --primary: 336 78% 70%; --primary-hover: 336 80% 76%; --primary-subtle: 336 44% 20%;
  --ring: 336 78% 72%;
}
[data-theme='red'].dark, .dark [data-theme='red'] {
  --primary: 356 76% 68%; --primary-hover: 356 78% 74%; --primary-subtle: 356 44% 20%;
  --ring: 356 76% 70%;
}
[data-theme='slate'].dark, .dark [data-theme='slate'] {
  --primary: 222 24% 74%; --primary-hover: 222 26% 80%; --primary-subtle: 222 22% 22%;
  --ring: 222 24% 76%;
}