/* Accent sub-themes — an orthogonal `data-accent` dimension on top of
 * `data-theme`. On <html>, with or without a theme:
 *
 *     <html data-theme="dark" data-accent="phoenix">
 *     <html data-accent="phoenix">              <!-- default theme, same accent -->
 *
 * Each sub-theme only re-points the accent family. Surfaces, text and signal
 * colours (green = live, pink = danger) stay put, so every accent works in
 * light AND dark and every component follows with no component-level change.
 *
 * --ring is NOT here: it is declared once in tokens.css as var(--accent), so
 * re-pointing --accent re-points the focus ring too.
 *
 * Every dark cell is a two-line selector list — a bare `:root[data-accent]`
 * above the stamped form — which is the shape tokens.css gives the dark theme
 * one file earlier, and for the same reason: the default theme needs no
 * attribute, so neither may the accent. Written stamped-only, `data-accent`
 * paints nothing at all in the state hosts use to mean "follow the system",
 * where data-theme is simply absent. See issue #250.
 *
 * That bare line ties on specificity with :root[data-theme="light"] and wins on
 * import order, so LIGHT is what the cascade has to be careful about: each light
 * cell carries three attributes to out-specify it, and declares the same
 * properties as its dark twin so none of the dark ramp leaks past it. Adding a
 * property to one half of a pair and not the other is what breaks that, and
 * stories/accent-without-theme.test.js is the gate that says so.
 *
 * why: docs/foundations.md#the-focus-ring */

/* ---- Phoenix — ember / rising fire (the strategy's namesake) ------------- */
:root[data-accent="phoenix"],
:root[data-theme="dark"][data-accent="phoenix"] {
  --purple: #e0531f;
  --purple-light: #ff8a5c;
  --purple-mid: #ffa273;
  --accent: #ff6a3d;
  --accent-strong: var(--accent);
  --accent-contrast: #241006;
  /* Thinned from 0.18 for WCAG AA: the ember accent cleared every flat surface
     but not its own wash over a card, which lifts the ground toward the ink. The
     hue is untouched. See issue #157. */
  --glow-purple: rgba(255, 106, 61, 0.15);
  --grad-from: #ff7a45;
  --grad-to: #ffcf6a;
}
:root[data-theme="light"][data-accent="phoenix"] {
  --purple: #c2400f;
  --purple-light: #d64a12;
  --purple-mid: #b8420f;
  /* Deepened for WCAG AA on the light ground (#fff): #d64a12 was 4.33:1 as text
     and as the ink-on-fill; #a8370c clears AA at 6.53:1. See issue #96. */
  --accent: #a8370c;
  --accent-strong: var(--accent);
  --accent-contrast: #ffffff;
  --glow-purple: rgba(214, 74, 18, 0.10);
  --grad-from: #d64a12;
  --grad-to: #e8992a;
}

/* ---- Ocean — azure ------------------------------------------------------- */
:root[data-accent="ocean"],
:root[data-theme="dark"][data-accent="ocean"] {
  --purple: #1f7fe0;
  --purple-light: #5ab0ff;
  --purple-mid: #7cc0ff;
  --accent: #3b9dff;
  --accent-strong: var(--accent);
  --accent-contrast: #04121f;
  /* Thinned from 0.18 for WCAG AA, the same wash-over-a-card pair as dark
     Phoenix and from the same alpha. The hue is untouched. See issue #157. */
  --glow-purple: rgba(59, 157, 255, 0.15);
  --grad-from: #3b9dff;
  --grad-to: #20dcf5;
}
:root[data-theme="light"][data-accent="ocean"] {
  --purple: #1156b8;
  --purple-light: #1568d6;
  --purple-mid: #1560c8;
  /* Deepened for WCAG AA on the raised grey panel and its wash — hue and chroma held
     in OKLCH (H 258, C 0.185), read at the 0.10 alpha below. Down a second step at
     #295, which took the light page off white. See issues #96, #157, #295. */
  --accent: #005ab4;
  --accent-strong: var(--accent);
  --accent-contrast: #ffffff;
  /* Back to the 0.10 this cell carried before #157: deepening the ink closed the pair,
     so the wash does not have to give. The rgb stays --purple-light rather than the
     accent — in light a glow tints --purple-light, which signal-contrast.test.js holds. */
  --glow-purple: rgba(21, 104, 214, 0.10);
  --grad-from: #1568d6;
  --grad-to: #17a2c0;
}

/* ---- Emerald — jade ------------------------------------------------------ */
:root[data-accent="emerald"],
:root[data-theme="dark"][data-accent="emerald"] {
  --purple: #0fa876;
  --purple-light: #3ad9a0;
  --purple-mid: #5fe3b4;
  --accent: #16c98a;
  --accent-strong: var(--accent);
  --accent-contrast: #04180f;
  --glow-purple: rgba(22, 201, 138, 0.18);
  --grad-from: #16c98a;
  --grad-to: #20dcf5;
}
:root[data-theme="light"][data-accent="emerald"] {
  --purple: #0a865a;
  --purple-light: #0b9c68;
  --purple-mid: #0a9060;
  /* Deepened for WCAG AA on the light ground: #0b9c68 was 3.52:1 as text and as the
     ink-on-fill. Down again at #295 — green has the least room of the four hues, and
     this was the only cell that failed flat as well as washed. See issues #96, #295. */
  --accent: #076c48;
  --accent-strong: var(--accent);
  --accent-contrast: #ffffff;
  /* Thinned from 0.10 for WCAG AA, the same grey-panel pair as light Ocean and
     from the same alpha. See issue #157. */
  --glow-purple: rgba(11, 156, 104, 0.08);
  --grad-from: #0b9c68;
  --grad-to: #12b0a0;
}