/*
 * Change 120 MR 1 — six selectable themes.
 *
 * Every theme is a `:root[data-theme="<slug>"]` block redefining the
 * CSS custom properties consumed by `static/css/app.css`. The base
 * `:root` stays as-is; the default (cloudera-signal) is redundantly
 * defined here so switching TO the default works after a non-default
 * theme was applied.
 *
 * Slugs (canonical, referenced by the resolver + settings singleton):
 *   evolve-aurora   evolve-prism
 *   cloudera-signal cloudera-deep
 *   terminal-amber  riso-botanic
 *
 * Values are copied verbatim from change 120's normative token tables
 * (design.md §3a–3f). Do NOT extrapolate; if a designer review changes
 * a hex, edit the spec first, then this file.
 *
 * Selector is `:root[data-theme="…"]` (not `html[…]`): specificity
 * (0,2,0) so an applied theme also wins over app.css's
 * `@media (prefers-color-scheme: dark) :root:not([data-theme="light"])`
 * block — otherwise OS-dark users get a hybrid of theme surfaces and
 * media-query colours.
 */

/* ========================================================================
 * Cloudera EVOLVE26 brand themes (light-based).
 *
 * Palette + font are sampled directly from the live Evolve 26 site
 * (cloudera.com/events/evolve.html) via computed styles — NOT extrapolated:
 *   deep indigo   #120046  (section/hero base, headings on white)
 *   royal blue    #5555f9  (bright city-strip band, gradient top)
 *   indigo-blue   #413cc3  (sub-headings, links)
 *   orange        #ff550d  (the ONE accent: CTA pills, logo, bullets)
 *   white         #ffffff  (content sections)
 *   font          Plus Jakarta Sans (Regular/Medium/SemiBold/Bold)
 *
 * The Evolve 26 brand has NO black — the darkest colour is deep indigo.
 * All three themes below are therefore light-surfaced (or indigo-surfaced),
 * never black, with orange reserved strictly for the primary action.
 * ==================================================================== */

/* ---- Evolve 26 Indigo (flagship: white content, indigo headings, orange CTA)
 * Mirrors the site's white body sections with deep-indigo #120046 headings. */
:root[data-theme="evolve26-indigo"], [data-theme="evolve26-indigo"]:not(:root) {
  --ground: #ffffff;
  --ground-alt: #f4f4fd;
  --surface: #ffffff;
  --surface-muted: #f1f1fb;
  --border: #e2e1f5;
  --border-strong: #c7c5ec;
  --text: #1c1740;
  --text-muted: #56537d;
  --text-inverse: #ffffff;
  --heading: #120046;
  --link: #413cc3;
  --link-hover: #2f2a9c;
  --accent: #ff550d;
  --accent-hover: #e0480a;
  --accent-contrast: #ffffff;
  --danger: #c5221f;
  --danger-bg: #fdecec;
  --warning: #8a5a00;
  --warning-bg: #fef3c7;
  --success: #186b3a;
  --success-bg: #e2f4e8;
  --focus-ring: #ff550d;
  --decor-bg: linear-gradient(180deg, #f4f4fd 0%, #ffffff 260px);
  --header-bg: #120046;
  --header-fg: #ffffff;
  --header-fg-muted: #cfcbf2;
  --header-hover-bg: rgb(255 255 255 / 14%);
  --header-border: rgb(255 255 255 / 14%);
  --font-display: "Plus Jakarta Sans", "Manrope", sans-serif;
  --font-text: "Plus Jakarta Sans", "Public Sans", sans-serif;
}

/* ---- Evolve 26 Nova (bold: deep-indigo→royal-blue hero surface, orange CTA)
 * The vivid keynote-hero variant — indigo surfaces, light text, orange CTA.
 * NOT black: the ground is the site's deep indigo #120046. */
:root[data-theme="evolve26-nova"], [data-theme="evolve26-nova"]:not(:root) {
  --ground: #120046;
  --ground-alt: #1a0a5c;
  --surface: #1d0e63;
  --surface-muted: #271583;
  --border: #3a2a9e;
  --border-strong: #5145c9;
  --text: #ecebff;
  --text-muted: #b8b5ee;
  --text-inverse: #120046;
  --heading: #ffffff;
  --link: #9d9bff;
  --link-hover: #c3c1ff;
  --accent: #ff550d;
  --accent-hover: #ff6f30;
  --accent-contrast: #ffffff;
  --danger: #ff8a87;
  --danger-bg: #40142a;
  --warning: #ffce6a;
  --warning-bg: #3a2a11;
  --success: #7fe0a8;
  --success-bg: #0f3324;
  --focus-ring: #ff550d;
  --decor-bg: linear-gradient(160deg, #5555f9 0%, #2a1188 42%, #120046 100%);
  --header-bg: #0c0033;
  --header-fg: #ffffff;
  --header-fg-muted: #c3c0ee;
  --header-hover-bg: rgb(255 255 255 / 12%);
  --header-border: rgb(255 255 255 / 12%);
  --font-display: "Plus Jakarta Sans", "Manrope", sans-serif;
  --font-text: "Plus Jakarta Sans", "Public Sans", sans-serif;
}

/* ---- Evolve 26 Aurora (soft: airy indigo-tinted paper, orange CTA)
 * The light, spacious take — a faint royal-blue tint on near-white paper,
 * indigo text, orange CTA. (Reclaims the "Aurora" name for a LIGHT theme,
 * matching the brand; the legacy dark evolve-aurora remains for back-compat.) */
:root[data-theme="evolve26-aurora"], [data-theme="evolve26-aurora"]:not(:root) {
  --ground: #f5f6ff;
  --ground-alt: #ecefff;
  --surface: #ffffff;
  --surface-muted: #eef0ff;
  --border: #dbdcf7;
  --border-strong: #bcbcec;
  --text: #211d4a;
  --text-muted: #5b5889;
  --text-inverse: #ffffff;
  --heading: #1a1263;
  --link: #4b45cf;
  --link-hover: #332da3;
  --accent: #ff550d;
  --accent-hover: #e0480a;
  --accent-contrast: #ffffff;
  --danger: #c5221f;
  --danger-bg: #fdecec;
  --warning: #8a5a00;
  --warning-bg: #fef3c7;
  --success: #186b3a;
  --success-bg: #e2f4e8;
  --focus-ring: #5555f9;
  --decor-bg: radial-gradient(ellipse at top, #e4e6ff 0%, #f5f6ff 55%);
  --header-bg: #1a1263;
  --header-fg: #ffffff;
  --header-fg-muted: #cbc9f0;
  --header-hover-bg: rgb(255 255 255 / 14%);
  --header-border: rgb(255 255 255 / 14%);
  --font-display: "Plus Jakarta Sans", "Manrope", sans-serif;
  --font-text: "Plus Jakarta Sans", "Public Sans", sans-serif;
}

/* ========================================================================
 * Cloudera.com corporate themes.
 *
 * Palette sampled from cloudera.com (why-cloudera / training / demos) via
 * computed styles: indigo #120046, orange #ff550d, corporate blues
 * #413cc3 / #3860be / #6aaae4, steel greys #ebf1f4 / #f5f8fa, deep ink
 * #151b17. Same brand as Evolve 26 but a restrained corporate treatment
 * (flat light-grey surfaces, softer blues) rather than the keynote gradient.
 * ==================================================================== */

/* ---- Cloudera Corporate (flagship cloudera.com light look) ---- */
:root[data-theme="cloudera-corporate"], [data-theme="cloudera-corporate"]:not(:root) {
  --ground: #ffffff;
  --ground-alt: #f5f8fa;
  --surface: #ffffff;
  --surface-muted: #f0f4f7;
  --border: #dde5eb;
  --border-strong: #c2ccd6;
  --text: #1a2230;
  --text-muted: #556072;
  --text-inverse: #ffffff;
  --heading: #120046;
  --link: #413cc3;
  --link-hover: #2f2a9c;
  --accent: #ff550d;
  --accent-hover: #e0480a;
  --accent-contrast: #ffffff;
  --danger: #c5221f;
  --danger-bg: #fdecec;
  --warning: #8a5a00;
  --warning-bg: #fef3c7;
  --success: #186b3a;
  --success-bg: #e2f4e8;
  --focus-ring: #ff550d;
  --decor-bg: linear-gradient(180deg, #f5f8fa 0%, #ffffff 220px);
  --header-bg: #120046;
  --header-fg: #ffffff;
  --header-fg-muted: #cfcbf2;
  --header-hover-bg: rgb(255 255 255 / 14%);
  --header-border: rgb(255 255 255 / 14%);
  --font-display: "Plus Jakarta Sans", "Manrope", sans-serif;
  --font-text: "Plus Jakarta Sans", "Public Sans", sans-serif;
}

/* ---- Cloudera Steel (cooler steel-grey corporate, soft blue) ---- */
:root[data-theme="cloudera-steel"], [data-theme="cloudera-steel"]:not(:root) {
  --ground: #eef2f6;
  --ground-alt: #e4eaf0;
  --surface: #ffffff;
  --surface-muted: #ebf1f4;
  --border: #d3dce4;
  --border-strong: #b3bfca;
  --text: #1c2530;
  --text-muted: #52606e;
  --text-inverse: #ffffff;
  --heading: #16204a;
  --link: #3860be;
  --link-hover: #284a92;
  --accent: #ff550d;
  --accent-hover: #e0480a;
  --accent-contrast: #ffffff;
  --danger: #b3261e;
  --danger-bg: #fbe9e7;
  --warning: #8a5a00;
  --warning-bg: #fdf3d6;
  --success: #1f6b40;
  --success-bg: #e1f2e8;
  --focus-ring: #3860be;
  --decor-bg: linear-gradient(180deg, #e4eaf0 0%, #eef2f6 240px);
  --header-bg: #16204a;
  --header-fg: #ffffff;
  --header-fg-muted: #b9c3da;
  --header-hover-bg: rgb(255 255 255 / 12%);
  --header-border: rgb(255 255 255 / 12%);
  --font-display: "Plus Jakarta Sans", "Manrope", sans-serif;
  --font-text: "Plus Jakarta Sans", "Public Sans", sans-serif;
}

/* ---- Cloudera Midnight (deep-ink corporate dark) ---- */
:root[data-theme="cloudera-midnight"], [data-theme="cloudera-midnight"]:not(:root) {
  --ground: #10131a;
  --ground-alt: #151b23;
  --surface: #191f2b;
  --surface-muted: #202838;
  --border: #2b3547;
  --border-strong: #3d4a61;
  --text: #e9edf4;
  --text-muted: #9aa7ba;
  --text-inverse: #10131a;
  --heading: #ffffff;
  --link: #8f9bff;
  --link-hover: #b6bdff;
  --accent: #ff550d;
  --accent-hover: #ff6f30;
  --accent-contrast: #ffffff;
  --danger: #ff8a87;
  --danger-bg: #3c1616;
  --warning: #ffce6a;
  --warning-bg: #382a10;
  --success: #7fe0a8;
  --success-bg: #123020;
  --focus-ring: #ff550d;
  --decor-bg: radial-gradient(ellipse at top, #1a1150 0%, #10131a 62%);
  --header-bg: #0a0d13;
  --header-fg: #ffffff;
  --header-fg-muted: #9aa7ba;
  --header-hover-bg: rgb(255 255 255 / 10%);
  --header-border: rgb(255 255 255 / 10%);
  --font-display: "Plus Jakarta Sans", "Manrope", sans-serif;
  --font-text: "Plus Jakarta Sans", "Public Sans", sans-serif;
}

/* ========================================================================
 * Classic professional themes — vendor-neutral, timeless UI styling.
 * No brand palette; chosen for legibility and a polished, familiar feel.
 * Includes one classic light (classic-light) and one classic dark
 * (classic-dark) as requested.
 * ==================================================================== */

/* ---- Classic Light (timeless neutral light, professional blue) ---- */
:root[data-theme="classic-light"], [data-theme="classic-light"]:not(:root) {
  --ground: #f7f8fa;
  --ground-alt: #eef1f5;
  --surface: #ffffff;
  --surface-muted: #f1f3f7;
  --border: #e2e6ec;
  --border-strong: #cbd2dc;
  --text: #1f2733;
  --text-muted: #5b6674;
  --text-inverse: #ffffff;
  --heading: #111827;
  --link: #2563eb;
  --link-hover: #1d4ed8;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-contrast: #ffffff;
  --danger: #dc2626;
  --danger-bg: #fdecec;
  --warning: #b45309;
  --warning-bg: #fef3c7;
  --success: #15803d;
  --success-bg: #e6f4ea;
  --focus-ring: #2563eb;
  --decor-bg: transparent;
  --header-bg: #1f2733;
  --header-fg: #ffffff;
  --header-fg-muted: #c3cad4;
  --header-hover-bg: rgb(255 255 255 / 12%);
  --header-border: rgb(255 255 255 / 12%);
  --font-display: "Manrope", "Public Sans", sans-serif;
  --font-text: "Public Sans", "IBM Plex Sans", sans-serif;
}

/* ---- Classic Dark (timeless charcoal dark, calm blue) ---- */
:root[data-theme="classic-dark"], [data-theme="classic-dark"]:not(:root) {
  --ground: #14181f;
  --ground-alt: #1a1f28;
  --surface: #1c222c;
  --surface-muted: #232a36;
  --border: #2e3743;
  --border-strong: #3f4a59;
  --text: #e6e9ee;
  --text-muted: #9aa5b3;
  --text-inverse: #14181f;
  --heading: #f5f7fa;
  --link: #7fb0ff;
  --link-hover: #a7c8ff;
  --accent: #4f8cff;
  --accent-hover: #6ea0ff;
  --accent-contrast: #0b1220;
  --danger: #f87171;
  --danger-bg: #3a1717;
  --warning: #fbbf24;
  --warning-bg: #382a0e;
  --success: #4ade80;
  --success-bg: #12301f;
  --focus-ring: #4f8cff;
  --decor-bg: radial-gradient(ellipse at top, #1b2130 0%, #14181f 60%);
  --header-bg: #0e1218;
  --header-fg: #f5f7fa;
  --header-fg-muted: #9aa5b3;
  --header-hover-bg: rgb(255 255 255 / 10%);
  --header-border: rgb(255 255 255 / 10%);
  --font-display: "Manrope", "Public Sans", sans-serif;
  --font-text: "Public Sans", "IBM Plex Sans", sans-serif;
}

/* ---- Slate Professional (cool slate corporate, refined teal) ---- */
:root[data-theme="slate-professional"], [data-theme="slate-professional"]:not(:root) {
  --ground: #eef1f4;
  --ground-alt: #e5e9ee;
  --surface: #ffffff;
  --surface-muted: #eaeef2;
  --border: #d5dbe2;
  --border-strong: #b6bec8;
  --text: #1e2933;
  --text-muted: #55636f;
  --text-inverse: #ffffff;
  --heading: #0f2233;
  --link: #0f766e;
  --link-hover: #0b5852;
  --accent: #0d9488;
  --accent-hover: #0b7d73;
  --accent-contrast: #ffffff;
  --danger: #b3261e;
  --danger-bg: #fbe9e7;
  --warning: #92600a;
  --warning-bg: #fbf1d5;
  --success: #15803d;
  --success-bg: #e4f3e9;
  --focus-ring: #0d9488;
  --decor-bg: linear-gradient(180deg, #e5e9ee 0%, #eef1f4 220px);
  --header-bg: #0f2233;
  --header-fg: #ffffff;
  --header-fg-muted: #a9bccb;
  --header-hover-bg: rgb(255 255 255 / 12%);
  --header-border: rgb(255 255 255 / 12%);
  --font-display: "Manrope", "Public Sans", sans-serif;
  --font-text: "Public Sans", "IBM Plex Sans", sans-serif;
}

/* ---- Forest Editorial (warm ivory paper, deep green, serif) ---- */
:root[data-theme="forest-editorial"], [data-theme="forest-editorial"]:not(:root) {
  --ground: #f7f4ec;
  --ground-alt: #efeade;
  --surface: #fffdf7;
  --surface-muted: #f2eee2;
  --border: #ded7c5;
  --border-strong: #bdb49b;
  --text: #23271f;
  --text-muted: #5c6152;
  --text-inverse: #fffdf7;
  --heading: #1c3a2a;
  --link: #2f6d4f;
  --link-hover: #204d38;
  --accent: #b5651d;
  --accent-hover: #99551a;
  --accent-contrast: #fffdf7;
  --danger: #a02c25;
  --danger-bg: #f6e5e2;
  --warning: #8a5a00;
  --warning-bg: #f6ecd2;
  --success: #2f6d4f;
  --success-bg: #e6f0e8;
  --focus-ring: #2f6d4f;
  --decor-bg: transparent;
  --header-bg: #1c3a2a;
  --header-fg: #f7f4ec;
  --header-fg-muted: #bcd0c3;
  --header-hover-bg: rgb(255 255 255 / 12%);
  --header-border: rgb(255 255 255 / 12%);
  --font-display: "Fraunces", "Old Standard TT", Georgia, serif;
  --font-text: "Public Sans", "IBM Plex Sans", sans-serif;
}

/* ---- Graphite Mono (refined monochrome graphite, one restrained blue) ---- */
:root[data-theme="graphite-mono"], [data-theme="graphite-mono"]:not(:root) {
  --ground: #f4f5f6;
  --ground-alt: #eaebed;
  --surface: #ffffff;
  --surface-muted: #eeeff1;
  --border: #dcdee1;
  --border-strong: #c0c3c8;
  --text: #202225;
  --text-muted: #5e6268;
  --text-inverse: #ffffff;
  --heading: #16181b;
  --link: #3b5bdb;
  --link-hover: #2b45ad;
  --accent: #3b5bdb;
  --accent-hover: #2b45ad;
  --accent-contrast: #ffffff;
  --danger: #b3261e;
  --danger-bg: #f7e8e6;
  --warning: #8a5a00;
  --warning-bg: #f5edd6;
  --success: #1f7a44;
  --success-bg: #e6f1ea;
  --focus-ring: #3b5bdb;
  --decor-bg: transparent;
  --header-bg: #16181b;
  --header-fg: #ffffff;
  --header-fg-muted: #b6b9be;
  --header-hover-bg: rgb(255 255 255 / 12%);
  --header-border: rgb(255 255 255 / 12%);
  --font-display: "Manrope", "Public Sans", sans-serif;
  --font-text: "Public Sans", "IBM Plex Sans", sans-serif;
}

/* ---- 3a. Evolve Aurora (dark) ---- */
:root[data-theme="evolve-aurora"], [data-theme="evolve-aurora"]:not(:root) {
  --ground: #04070f;
  --ground-alt: #0a0f1c;
  --surface: #0f172b;
  --surface-muted: #141c33;
  --border: #1e2a44;
  --border-strong: #2c3a5a;
  --text: #e6ecf5;
  --text-muted: #8fa0bd;
  --text-inverse: #04070f;
  --heading: #ffffff;
  --link: #7cf9ff;
  --link-hover: #b8fcff;
  --accent: #7cf9ff;
  --accent-hover: #a4faff;
  --accent-contrast: #04070f;
  --danger: #ff6b6b;
  --danger-bg: #3a1414;
  --warning: #ffb04a;
  --warning-bg: #3a2611;
  --success: #5ee0a1;
  --success-bg: #0f2a1e;
  --focus-ring: #7cf9ff;
  --decor-bg: radial-gradient(ellipse at top, #0b1226 0%, #04070f 60%);
  --header-bg: #020509;
  --header-fg: #ffffff;
  --header-fg-muted: #8fa0bd;
  --header-hover-bg: rgb(124 249 255 / 14%);
  --header-border: rgb(255 255 255 / 10%);
  --font-display: "Fraunces", "Old Standard TT", Georgia, serif;
  --font-text: "IBM Plex Sans", "Public Sans", sans-serif;
}

/* ---- 3b. Evolve Prism (light) ---- */
:root[data-theme="evolve-prism"], [data-theme="evolve-prism"]:not(:root) {
  --ground: #f4f1ea;
  --ground-alt: #ede8dd;
  --surface: #ffffff;
  --surface-muted: #f8f5ee;
  --border: #d8d2c2;
  --border-strong: #b7ae95;
  --text: #1a1815;
  --text-muted: #5b5548;
  --text-inverse: #f4f1ea;
  --heading: #0f0d0b;
  --link: #1a5c6b;
  --link-hover: #0f3d47;
  /* --accent was #e07a3a — white-on-accent measured 2.99:1, just under the
     WCAG AA 3:1 minimum for UI components (test_theme_pairs_meet_wcag_aa).
     Nudged slightly darker to clear it while staying in the same hue. */
  --accent: #dc7534;
  --accent-hover: #c86428;
  --accent-contrast: #ffffff;
  --danger: #b3261e;
  --danger-bg: #fce5e2;
  --warning: #8a5a00;
  --warning-bg: #fdf1d1;
  --success: #186b3a;
  --success-bg: #e2f4e8;
  --focus-ring: #00a7c1;
  --decor-bg: transparent;
  --header-bg: #1a3540;
  --header-fg: #f7f3ea;
  --header-fg-muted: #bcccce;
  --header-hover-bg: rgb(255 255 255 / 12%);
  --header-border: rgb(255 255 255 / 12%);
  --font-display: "Fraunces", Georgia, serif;
  --font-text: "IBM Plex Sans", "Public Sans", sans-serif;
}

/* ---- 3c. Cloudera Signal (light, corporate; = platform default) ---- */
:root[data-theme="cloudera-signal"], [data-theme="cloudera-signal"]:not(:root) {
  --ground: #ffffff;
  --ground-alt: #f8fafc;
  --surface: #ffffff;
  --surface-muted: #f4f6f9;
  --border: #e4e8ee;
  --border-strong: #c5ccd6;
  --text: #111827;
  --text-muted: #4b5563;
  --text-inverse: #ffffff;
  --heading: #0b3d91;
  --link: #0b3d91;
  --link-hover: #062b6c;
  --accent: #f96702;
  --accent-hover: #e05702;
  --accent-contrast: #ffffff;
  --danger: #c53030;
  --danger-bg: #fdecec;
  --warning: #8a5a00;
  --warning-bg: #fef3c7;
  --success: #186b3a;
  --success-bg: #e2f4e8;
  --focus-ring: #f96702;
  --decor-bg: linear-gradient(180deg, #f8fafc 0%, #ffffff 240px);
  --header-bg: #0b3d91;
  --header-fg: #ffffff;
  --header-fg-muted: #c3d3ea;
  --header-hover-bg: rgb(255 255 255 / 14%);
  --header-border: rgb(255 255 255 / 14%);
  --font-display: "Manrope", "Public Sans", sans-serif;
  --font-text: "Public Sans", "IBM Plex Sans", sans-serif;
}

/* ---- 3d. Cloudera Deep (dark, corporate) ---- */
:root[data-theme="cloudera-deep"], [data-theme="cloudera-deep"]:not(:root) {
  --ground: #0e1a2b;
  --ground-alt: #152238;
  --surface: #1b2a44;
  --surface-muted: #243452;
  --border: #2e3f5c;
  --border-strong: #43567a;
  --text: #e6ecf5;
  --text-muted: #c8d3e2;
  --text-inverse: #0e1a2b;
  --heading: #ffffff;
  --link: #ff9a4a;
  --link-hover: #ffb37a;
  --accent: #ff7a1a;
  --accent-hover: #ff8f3d;
  --accent-contrast: #0e1a2b;
  --danger: #ff6b6b;
  --danger-bg: #3a1414;
  --warning: #ffb04a;
  --warning-bg: #3a2611;
  --success: #5ee0a1;
  --success-bg: #0f2a1e;
  --focus-ring: #ff7a1a;
  --decor-bg: radial-gradient(ellipse at top left, #17273f 0%, #0e1a2b 55%);
  --header-bg: #081121;
  --header-fg: #ffffff;
  --header-fg-muted: #a9b6ca;
  --header-hover-bg: rgb(255 122 26 / 16%);
  --header-border: rgb(255 255 255 / 10%);
  --font-display: "Manrope", "Public Sans", sans-serif;
  --font-text: "Public Sans", "IBM Plex Sans", sans-serif;
}

/* ---- 3e. Terminal Amber (dark, CRT) ---- */
:root[data-theme="terminal-amber"], [data-theme="terminal-amber"]:not(:root) {
  --ground: #0b0603;
  --ground-alt: #120a05;
  --surface: #1a0f06;
  --surface-muted: #22160a;
  --border: #3a2510;
  --border-strong: #5a3a18;
  --text: #ffb000;
  --text-muted: #c48a1e;
  --text-inverse: #0b0603;
  --heading: #ffcc44;
  --link: #ffcc44;
  --link-hover: #ffe27a;
  --accent: #ffb000;
  --accent-hover: #ffc033;
  --accent-contrast: #0b0603;
  --danger: #c04d3a;
  --danger-bg: #2a0f0a;
  --warning: #e0a020;
  --warning-bg: #2a1e08;
  --success: #8ac02e;
  --success-bg: #1a2408;
  --focus-ring: #ffcc44;
  --decor-bg: repeating-linear-gradient(0deg, rgba(255, 176, 0, 0.03) 0 1px, transparent 1px 3px);
  --header-bg: #060301;
  --header-fg: #ffcc44;
  --header-fg-muted: #c48a1e;
  --header-hover-bg: rgb(255 176 0 / 14%);
  --header-border: rgb(255 176 0 / 22%);
  --font-display: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
  --font-text: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
}

/* ---- 3f. Riso Botanic (light, duotone) ---- */
:root[data-theme="riso-botanic"], [data-theme="riso-botanic"]:not(:root) {
  --ground: #fbf6ea;
  --ground-alt: #f4eeda;
  --surface: #ffffff;
  --surface-muted: #f7f0dc;
  --border: #dcd2b0;
  --border-strong: #b7ab84;
  --text: #1a2a26;
  --text-muted: #4a5e58;
  --text-inverse: #fbf6ea;
  --heading: #1a736b;
  --link: #0f5750;
  --link-hover: #083a35;
  --accent: #f04e77;
  --accent-hover: #d63a63;
  --accent-contrast: #ffffff;
  --danger: #b3261e;
  --danger-bg: #fce5e2;
  --warning: #8a5a00;
  --warning-bg: #fdf1d1;
  --success: #1a736b;
  --success-bg: #e3f0ee;
  --focus-ring: #f04e77;
  --decor-bg: transparent;
  --header-bg: #0f5750;
  --header-fg: #fbf6ea;
  --header-fg-muted: #bcd6d1;
  --header-hover-bg: rgb(240 78 119 / 18%);
  --header-border: rgb(255 255 255 / 12%);
  --font-display: "Old Standard TT", Georgia, serif;
  --font-text: "Fraunces", "Old Standard TT", Georgia, serif;
}

/* ---- Legacy-token bridge (change 125: also re-scopes for nested themes).
 *
 * app.css predates change 120 and consumes `--bg`, `--muted`,
 * `--primary`, `--primary-hover` and the font stack on :root. The theme
 * tables above use the change-120 vocabulary (`--ground`,
 * `--text-muted`, `--link`, `--accent`, `--font-*`). This rule maps the
 * legacy names onto whichever theme is active so every component in
 * app.css follows the theme without duplicating any hex values.
 * (Buttons/CTAs use `var(--accent, var(--primary))` fallbacks directly
 * in app.css, because accent needs its own contrast colour.)
 *
 * The grouped selector is LOAD-BEARING for nested-theme previews
 * (change 125): the six theme blocks above re-declare `--ground`/`--link`
 * inside a nested `[data-theme]` scope, but `--bg`/`--primary`/`--muted`
 * only re-derive from them if THIS bridge also re-runs in that scope.
 * Without the `[data-theme]:not(:root)` arm, a nested card would keep the
 * page's `--bg`/`--primary` and its background + buttons would render in
 * the page theme, not the card's. Custom properties inherit, so the
 * re-declared tokens flow to the whole subtree.
 */
:root[data-theme], [data-theme]:not(:root) {
  --bg: var(--ground);
  --muted: var(--text-muted);
  --primary: var(--link);
  --primary-hover: var(--link-hover);
  font-family: var(--font-text, inherit);
}

/* Dark themes opt into dark native widgets (form controls, scrollbars). */
:root[data-theme="evolve-aurora"],
:root[data-theme="cloudera-deep"],
:root[data-theme="terminal-amber"] {
  color-scheme: dark;
}

/* ---- .theme-decor overlay layer.
 *
 * Sits at the bottom of the body (before <main>), painting the theme's
 * decorative background token. Scoped absolute so it doesn't push
 * layout; pointer-events: none so it never intercepts clicks.
 */
.theme-decor {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--decor-bg, transparent);
}

/* Print stylesheet: force the default theme so a coloured print
 * doesn't waste ink and readable text is preserved regardless of
 * which theme the operator chose.
 */
@media print {
  html {
    background: white !important;
    color: black !important;
  }
  .theme-decor { display: none !important; }
}

/* Reduced-motion respect: theme-level animations opt in via a
 * `motion-safe:` prefix in individual component styles. This root
 * rule flattens transitions across the board for prefers-reduced-motion.
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}