/**
 * Vesper · design tokens (L0 Studio inventory, L1 --vs-*, L2 shared --ts-*, L3 Studio aliases,
 * L4 extension and core maps). Contract §2.5, design spec §2.
 *
 * Block map (Vesper is dark-first, so the seeded scheme is dark):
 *   A  :root + [data-ec-preset="marigold"]             default preset, dark: FULL set + invariants
 *   B  :root[data-color-scheme="light"] (+ marigold D)  default preset, light: FULL colour set
 *   C  [data-ec-preset="neon|bluehour"]                 preset, dark: FULL colour set
 *   D  [data-ec-preset="neon|bluehour"][data-color-scheme="light"]
 *   night scope, custom accent, K knobs, L3, L4, reduced motion
 * Max specificity 0,2,0 for the accent triplet (the library's inline TokenCompiler block wins);
 * colours are literal hex; translucent values are rgb() with alpha. Never declare the reserved
 * names of contract §2.5 here, and never key a scheme on a .dark/.light class.
 *
 * @copyright   Copyright (C) 2026 BulaSikku Technologies Private Limited. All rights reserved.
 * @license     GNU General Public License version 2 or later
 */
/* ==========================================================================
   A. Marigold (default preset), dark (seeded scheme): FULL set + every scheme-invariant token
   ========================================================================== */

:root,
[data-ec-preset="marigold"],
[data-bs-theme="dark"]:not(:root) {
    color-scheme: dark;

    /* ---- L0 · Template Studio inventory (design spec §2.2) ---- */
    --ec-bg: #0F1A1D; /* page ground */
    --ec-surface: #162428; /* cards, quiet panes, bands */
    --ec-surface-2: #1F3035; /* tags, rows, secondary fills */
    --ec-fg: #EFE8DA; /* text, headings, numerals */
    --ec-fg-2: #A6B4B1; /* meta, ledes, quiet text */
    --ec-border: #2C4046; /* rules and mullions (decorative) */
    --ec-accent: #F4B63F; /* fill role only; runtime value from the preset JSON */
    --ec-accent-fg: #0B1517; /* ink on the accent fill (preset accentFg) */
    --ec-accent-soft: #3A2D13; /* marigold-900 (preset accentSoftDark) */
    --ec-shadow: none; /* Vesper is flat */

    /* ---- L1 · Vesper design tokens (design spec §2.3) ---- */
    --vs-sunken: #122125; /* map ground, code, inset wells */
    --vs-ink: #0B1517; /* text and icons on marigold */
    --vs-control: #648087; /* input, toggle and language borders (3:1) */
    --vs-accent-ink: #F4B63F; /* accent as text or icon on surfaces */
    --vs-accent-ink-hover: #F8C969;
    --vs-accent-hover: #F8C969; /* hover fill of marigold buttons and panes */
    --vs-accent-active: #DCA439; /* pressed fill */
    --vs-signal: #F4B63F; /* small graphics that must reach 3:1 */
    --vs-focus: #F4B63F; /* focus ring on surfaces (ink on marigold) */
    --vs-lit: #3A2D13; /* rooms active in the last hour */
    --vs-lit-fg: var(--vs-accent-ink);
    --vs-glow: rgb(244 182 63 / .1); /* lamplight edge */
    --vs-glow-hover: rgb(244 182 63 / .28);
    --vs-highlight: rgb(244 182 63 / .55); /* "yours" and featured borders */
    --vs-hairline: rgb(239 232 218 / .12); /* avatar inner hairline */
    --vs-live: #F48CA6; /* "Live" pill, map markers */
    --vs-live-fg: #0B1517;
    --vs-success: #5CCB8F;
    --vs-success-bg: #173229;
    --vs-danger: #FF8C7A;
    --vs-danger-bg: #3A1B1A;
    --vs-info: #8CC8E8;
    --vs-info-bg: #13303D;
    --vs-warning: #F4B63F; /* warnings keep the marigold lit pair in every preset */
    --vs-warning-bg: #3A2D13;
    --vs-avatar-1: #1E4A45; /* initials ground: tone = user_id % 6, tone 5 reuses avatar-2 */
    --vs-avatar-2: #25404A;
    --vs-avatar-3: #4A2330;
    --vs-avatar-4: #2A2623;
    --vs-avatar-5: #3A2D13;
    --vs-avatar-fg: #EFE8DA;
    --vs-toggle-on: #1F3035; /* selected scheme-toggle segment */
    --vs-scrim: rgb(5 10 12 / .62); /* drawer backdrop */
    --vs-overlay-shadow: 0 16px 40px rgb(0 0 0 / .45); /* dropdowns, drawer, popovers only */
    --vs-map-ground: #122125;
    --vs-map-park: #162C2A;
    --vs-map-water: #1E4A45;
    --vs-map-street: #1A2B2F;
    --vs-map-street-major: #1F3035;
    --vs-map-contour: #243A40;
    --vs-map-route: #F4B63F;
    --vs-map-route-width: 3px;
    --vs-map-casing: #0F1A1D;
    --vs-strip-bg: #162428; /* the Tonight strip stays a dark marquee */
    --vs-band: var(--ec-accent); /* the marigold band, scheme-invariant */
    --vs-band-fg: var(--vs-ink);
    --vs-footer-bg: #162428; /* surface in dark, surface-2 in light (spec §5.4) */

    /* ---- L2 · shared semantic layer (portable) ---- */
    --ts-link: var(--vs-accent-ink);
    --ts-link-hover: var(--vs-accent-ink-hover);
    --ts-focus: var(--vs-focus);
    --ts-focus-gap: transparent;
    --ts-control: var(--vs-control);
    --ts-signal: var(--vs-signal);
    --ts-tint: var(--vs-lit);
    --ts-on-tint: var(--vs-lit-fg);
    --ts-success: var(--vs-success);
    --ts-success-bg: var(--vs-success-bg);
    --ts-danger: var(--vs-danger);
    --ts-danger-bg: var(--vs-danger-bg);
    --ts-warning: var(--vs-warning);
    --ts-warning-bg: var(--vs-warning-bg);
    --ts-info: var(--vs-info);
    --ts-info-bg: var(--vs-info-bg);
    --ts-font-mono: ui-monospace, 'Cascadia Code', 'SF Mono', Menlo, Consolas, monospace;
    --ts-scrim: var(--vs-scrim);
    --ts-overlay-shadow: var(--vs-overlay-shadow);

    /* ---- L2 · rgb twins (literal triplets of this block) ---- */
    --ts-bg-rgb: 15, 26, 29;
    --ts-fg-rgb: 239, 232, 218;
    --ts-accent-rgb: 244, 182, 63;
    --ts-link-rgb: 244, 182, 63;
    --ts-link-hover-rgb: 248, 201, 105;
    --ts-success-rgb: 92, 203, 143;
    --ts-danger-rgb: 255, 140, 122;
    --ts-warning-rgb: 244, 182, 63;
    --ts-info-rgb: 140, 200, 232;
    --ts-fg-2-rgb: 166, 180, 177;
    --ts-surface-rgb: 22, 36, 40;
    --ts-surface-2-rgb: 31, 48, 53;

    /* ---- L0 · shape, type, layout and motion (scheme invariant) ---- */
    --ec-radius: 16px; /* the large corner of the speech bubble */
    --ec-btn-radius: 10px;
    --ec-img-radius: 16px;
    --ec-font-display: 'Mona Sans', 'Mona Sans Fallback', 'Segoe UI Variable Display', 'Segoe UI', system-ui, sans-serif;
    --ec-font-body: 'Alegreya Sans', 'Alegreya Sans Fallback', 'Gill Sans', Candara, 'Segoe UI', system-ui, sans-serif;
    --ec-disp-weight: 700; /* numerals use --vs-num-weight */
    --ec-disp-style: normal;
    --ec-disp-tracking: -0.02em;
    --ec-disp-transform: none; /* never uppercase */
    --ec-cw: 1440px; /* Studio layout.width.boxed; the library re-emits it */
    --ec-gut: clamp(1rem, 6.25vw - 0.5rem, 5rem); /* 16px at 390, 40px at 768, 80px at 1440 */
    --ec-sect-y: clamp(2.5rem, 6.11vw, 5.5rem); /* 40px mobile, 88px desktop */
    --ec-grid: 3; /* card density only, never the 12-column layout */
    --ec-grid-gap: clamp(1rem, 0.257rem + 3.048vw, 3rem); /* 16px at 390, 48px at 1440 */
    --ec-dur-1: 120ms; /* colour and border hovers */
    --ec-dur-2: 220ms; /* glow, arrow nudge, scrim */
    --ec-dur-3: 420ms; /* drawer slide, lights on */
    --ec-ease: cubic-bezier(0.2, 0.7, 0.2, 1);

    /* ---- L1 · Vesper type, space and shape (design spec §3.3, §4.1, §4.3) ---- */
    --vs-disp-stretch: 125%; /* Mona Sans is always set at 125% width */
    --vs-num-weight: 800; /* numerals and the wordmark */
    --vs-t-display-xl: clamp(3.5rem, 2.2rem + 5.333vw, 6rem); /* hero H1, 56 to 96 */
    --vs-t-numeral-hero: clamp(4.5rem, 2.111rem + 9.8vw, 8.5rem); /* busiest pane, 72 to 136 */
    --vs-t-display-l: clamp(2rem, 1.071rem + 3.81vw, 4rem); /* band H2, 32 to 64 */
    --vs-t-h1-page: clamp(2.25rem, 1.786rem + 1.905vw, 3.5rem); /* inner-page H1, 36 to 56 */
    --vs-t-h2: clamp(1.75rem, 1.471rem + 1.143vw, 2.5rem); /* section H2, 28 to 40 */
    --vs-t-numeral-l: clamp(2.5rem, 2.129rem + 1.524vw, 3.5rem); /* 40 to 56 */
    --vs-t-numeral-m: clamp(2.25rem, 1.971rem + 1.143vw, 3rem); /* 36 to 48 */
    --vs-t-numeral-s: clamp(1.375rem, 1.05rem + 1.333vw, 2.25rem); /* 22 to 36 */
    --vs-t-numeral-xs: 1.75rem; /* 28 */
    --vs-t-h3: clamp(1.25rem, 1.157rem + 0.381vw, 1.5rem); /* card titles in Mona Sans, 20 to 24 */
    --vs-t-wordmark: clamp(1.1875rem, 1.118rem + 0.286vw, 1.375rem); /* 19 to 22 */
    --vs-t-lede: clamp(1.125rem, 0.986rem + 0.571vw, 1.5rem); /* 18 to 24 */
    --vs-t-title-l: 1.25rem; /* 20 */
    --vs-t-title-m: clamp(1.0625rem, 1.016rem + 0.19vw, 1.1875rem); /* 17 to 19 */
    --vs-t-nav: 1.125rem; /* 18 */
    --vs-t-label: 1.125rem; /* 18 */
    --vs-t-body: 1.0625rem; /* 17 */
    --vs-t-meta: 1rem; /* 16 */
    --vs-t-meta-s: 0.9375rem; /* 15 */
    --vs-t-tag: 0.875rem; /* 14, bold single-line labels only */
    --vs-mullion: 2px; /* framed-grid gaps, internal dividers, roofline */
    --vs-s-1: 0.25rem;
    --vs-s-2: 0.5rem;
    --vs-s-3: 0.75rem;
    --vs-s-4: 1rem;
    --vs-s-5: 1.25rem;
    --vs-s-6: 1.5rem;
    --vs-s-7: 1.75rem;
    --vs-s-8: 2rem;
    --vs-s-10: 2.5rem;
    --vs-s-12: 3rem;
    --vs-s-16: 4rem;
    --vs-s-20: 5rem;
    --vs-s-22: 5.5rem;
    --vs-s-24: 6rem;
    --vs-r-tail: min(4px, var(--ec-radius)); /* the tight corner that points at the speaker */
    --vs-r-bubble: var(--vs-r-tail) var(--ec-radius) var(--ec-radius) var(--ec-radius); /* cards, panels, frames */
    --vs-r-bubble-s: var(--vs-r-tail) 10px 10px 10px;
    --vs-r-bubble-xs: var(--vs-r-tail) 8px 8px 8px;
    --vs-r-avatar: 50% 50% 22% 50%; /* bubble avatar, tight bottom-right */
    --vs-r-toggle-inner: 7px;
    --vs-r-tag: 6px;
    --vs-r-pill-live: 4px;
    --vs-r-bar: 2px;

    /* ---- L2 · stacking and sticky (contract §2.11) ---- */
    --ts-z-scrim: 1005; /* drawer scrim; above Leaflet (400-1000) */
    --ts-z-header: 1010; /* sticky header; the drawer and mega panels live inside it */
    --ts-z-dropdown: 1020; /* template dropdowns and account menus */
    --ts-z-toast: 1100; /* below the EasyCommerce cart (1200-1300) and app dialogs (10000+) */
    --ts-sticky-offset: 0px; /* template.js writes the sticky header height here */
}

/* ==========================================================================
   B. Marigold, light ("House lights"): FULL colour set. Also serves unknown preset slugs
   and doubles as the marigold D block.
   ========================================================================== */

:root[data-color-scheme="light"],
[data-ec-preset="marigold"][data-color-scheme="light"],
[data-bs-theme="light"]:not(:root) {
    color-scheme: light;

    /* ---- L0 · Template Studio inventory (design spec §2.2) ---- */
    --ec-bg: #F2F1EE;
    --ec-surface: #FBFAF8;
    --ec-surface-2: #E8E6E2;
    --ec-fg: #10252A;
    --ec-fg-2: #475C60;
    --ec-border: #D0CDC7;
    --ec-accent: #F4B63F;
    --ec-accent-fg: #0B1517;
    --ec-accent-soft: #FBEBC4;
    --ec-shadow: 0 1px 0 rgb(16 37 42 / .04);

    /* ---- L1 · Vesper design tokens (design spec §2.3) ---- */
    --vs-sunken: #E8E6E2;
    --vs-ink: #0B1517;
    --vs-control: #6F8487;
    --vs-accent-ink: #11505F;
    --vs-accent-ink-hover: #25404A;
    --vs-accent-hover: #F8C969;
    --vs-accent-active: #DCA439;
    --vs-signal: #A86F0A;
    --vs-focus: #11505F;
    --vs-lit: #FBEBC4;
    --vs-lit-fg: var(--vs-accent-ink);
    --vs-glow: rgb(168 111 10 / .18);
    --vs-glow-hover: rgb(168 111 10 / .35);
    --vs-highlight: #A86F0A;
    --vs-hairline: rgb(16 37 42 / .12);
    --vs-live: #F48CA6;
    --vs-live-fg: #0B1517;
    --vs-success: #1C6B43;
    --vs-success-bg: #DCEFE3;
    --vs-danger: #A8261B;
    --vs-danger-bg: #FBE1DC;
    --vs-info: #1D5E80;
    --vs-info-bg: #DCEDF5;
    --vs-warning: #7F5200;
    --vs-warning-bg: #FBE3B6;
    --vs-avatar-1: #CDE5DF;
    --vs-avatar-2: #D2DFE6;
    --vs-avatar-3: #F1D5DC;
    --vs-avatar-4: #E5DED6;
    --vs-avatar-5: #F9E2B0;
    --vs-avatar-fg: #10252A;
    --vs-toggle-on: #FBFAF8;
    --vs-scrim: rgb(16 37 42 / .48);
    --vs-overlay-shadow: 0 16px 40px rgb(16 37 42 / .14);
    --vs-map-ground: #E8E6E2;
    --vs-map-park: #D6E6D9;
    --vs-map-water: #BFDBD8;
    --vs-map-street: #DDDAD5;
    --vs-map-street-major: #FBFAF8;
    --vs-map-contour: #D0CDC7;
    --vs-map-route: #F4B63F;
    --vs-map-route-width: 4px;
    --vs-map-casing: #0F1A1D;
    --vs-strip-bg: #0F1A1D;
    --vs-band: var(--ec-accent);
    --vs-band-fg: var(--vs-ink);
    --vs-footer-bg: #E8E6E2;

    /* ---- L2 · shared semantic layer (portable) ---- */
    --ts-link: var(--vs-accent-ink);
    --ts-link-hover: var(--vs-accent-ink-hover);
    --ts-focus: var(--vs-focus);
    --ts-focus-gap: transparent;
    --ts-control: var(--vs-control);
    --ts-signal: var(--vs-signal);
    --ts-tint: var(--vs-lit);
    --ts-on-tint: var(--vs-lit-fg);
    --ts-success: var(--vs-success);
    --ts-success-bg: var(--vs-success-bg);
    --ts-danger: var(--vs-danger);
    --ts-danger-bg: var(--vs-danger-bg);
    --ts-warning: var(--vs-warning);
    --ts-warning-bg: var(--vs-warning-bg);
    --ts-info: var(--vs-info);
    --ts-info-bg: var(--vs-info-bg);
    --ts-font-mono: ui-monospace, 'Cascadia Code', 'SF Mono', Menlo, Consolas, monospace;
    --ts-scrim: var(--vs-scrim);
    --ts-overlay-shadow: var(--vs-overlay-shadow);

    /* ---- L2 · rgb twins (literal triplets of this block) ---- */
    --ts-bg-rgb: 242, 241, 238;
    --ts-fg-rgb: 16, 37, 42;
    --ts-accent-rgb: 244, 182, 63;
    --ts-link-rgb: 17, 80, 95;
    --ts-link-hover-rgb: 37, 64, 74;
    --ts-success-rgb: 28, 107, 67;
    --ts-danger-rgb: 168, 38, 27;
    --ts-warning-rgb: 127, 82, 0;
    --ts-info-rgb: 29, 94, 128;
    --ts-fg-2-rgb: 71, 92, 96;
    --ts-surface-rgb: 251, 250, 248;
    --ts-surface-2-rgb: 232, 230, 226;

    /* ---- K · knobs that differ in this scheme ---- */
    --ts-btn-primary-border: var(--vs-signal);
    --hue: 40;
}

/* ==========================================================================
   C/D. Neon preset (neon): dark, then light. FULL colour sets.
   ========================================================================== */

[data-ec-preset="neon"] {
    color-scheme: dark;

    /* ---- L0 · Template Studio inventory (design spec §2.2) ---- */
    --ec-bg: #0F1A1D;
    --ec-surface: #162428;
    --ec-surface-2: #1F3035;
    --ec-fg: #EFE8DA;
    --ec-fg-2: #A6B4B1;
    --ec-border: #2C4046;
    --ec-accent: #F48CA6;
    --ec-accent-fg: #0B1517;
    --ec-accent-soft: #2A282D;
    --ec-shadow: none;

    /* ---- L1 · Vesper design tokens (design spec §2.3) ---- */
    --vs-sunken: #122125;
    --vs-ink: #0B1517;
    --vs-control: #648087;
    --vs-accent-ink: #F48CA6;
    --vs-accent-ink-hover: #F7A9BC;
    --vs-accent-hover: #F7A9BC;
    --vs-accent-active: #DC7E95;
    --vs-signal: #F48CA6;
    --vs-focus: #F48CA6;
    --vs-lit: #3B2228;
    --vs-lit-fg: var(--vs-accent-ink);
    --vs-glow: rgb(244 140 166 / .1);
    --vs-glow-hover: rgb(244 140 166 / .28);
    --vs-highlight: rgb(244 140 166 / .62);
    --vs-hairline: rgb(239 232 218 / .12);
    --vs-live: #F4B63F;
    --vs-live-fg: #0B1517;
    --vs-success: #5CCB8F;
    --vs-success-bg: #173229;
    --vs-danger: #FF8C7A;
    --vs-danger-bg: #3A1B1A;
    --vs-info: #8CC8E8;
    --vs-info-bg: #13303D;
    --vs-warning: #F4B63F;
    --vs-warning-bg: #3A2D13;
    --vs-avatar-1: #1E4A45;
    --vs-avatar-2: #25404A;
    --vs-avatar-3: #4A2330;
    --vs-avatar-4: #2A2623;
    --vs-avatar-5: #3A2D13;
    --vs-avatar-fg: #EFE8DA;
    --vs-toggle-on: #1F3035;
    --vs-scrim: rgb(5 10 12 / .62);
    --vs-overlay-shadow: 0 16px 40px rgb(0 0 0 / .45);
    --vs-map-ground: #122125;
    --vs-map-park: #162C2A;
    --vs-map-water: #1E4A45;
    --vs-map-street: #1A2B2F;
    --vs-map-street-major: #1F3035;
    --vs-map-contour: #243A40;
    --vs-map-route: #F48CA6;
    --vs-map-route-width: 3px;
    --vs-map-casing: #0F1A1D;
    --vs-strip-bg: #162428;
    --vs-band: var(--ec-accent);
    --vs-band-fg: var(--vs-ink);
    --vs-footer-bg: #162428;

    /* ---- L2 · shared semantic layer (portable) ---- */
    --ts-link: var(--vs-accent-ink);
    --ts-link-hover: var(--vs-accent-ink-hover);
    --ts-focus: var(--vs-focus);
    --ts-focus-gap: transparent;
    --ts-control: var(--vs-control);
    --ts-signal: var(--vs-signal);
    --ts-tint: var(--vs-lit);
    --ts-on-tint: var(--vs-lit-fg);
    --ts-success: var(--vs-success);
    --ts-success-bg: var(--vs-success-bg);
    --ts-danger: var(--vs-danger);
    --ts-danger-bg: var(--vs-danger-bg);
    --ts-warning: var(--vs-warning);
    --ts-warning-bg: var(--vs-warning-bg);
    --ts-info: var(--vs-info);
    --ts-info-bg: var(--vs-info-bg);
    --ts-font-mono: ui-monospace, 'Cascadia Code', 'SF Mono', Menlo, Consolas, monospace;
    --ts-scrim: var(--vs-scrim);
    --ts-overlay-shadow: var(--vs-overlay-shadow);

    /* ---- L2 · rgb twins (literal triplets of this block) ---- */
    --ts-bg-rgb: 15, 26, 29;
    --ts-fg-rgb: 239, 232, 218;
    --ts-accent-rgb: 244, 140, 166;
    --ts-link-rgb: 244, 140, 166;
    --ts-link-hover-rgb: 247, 169, 188;
    --ts-success-rgb: 92, 203, 143;
    --ts-danger-rgb: 255, 140, 122;
    --ts-warning-rgb: 244, 182, 63;
    --ts-info-rgb: 140, 200, 232;
    --ts-fg-2-rgb: 166, 180, 177;
    --ts-surface-rgb: 22, 36, 40;
    --ts-surface-2-rgb: 31, 48, 53;
}

[data-ec-preset="neon"][data-color-scheme="light"] {
    color-scheme: light;

    /* ---- L0 · Template Studio inventory (design spec §2.2) ---- */
    --ec-bg: #F2F1EE;
    --ec-surface: #FBFAF8;
    --ec-surface-2: #E8E6E2;
    --ec-fg: #10252A;
    --ec-fg-2: #475C60;
    --ec-border: #D0CDC7;
    --ec-accent: #F48CA6;
    --ec-accent-fg: #0B1517;
    --ec-accent-soft: #F4E2DB;
    --ec-shadow: 0 1px 0 rgb(16 37 42 / .04);

    /* ---- L1 · Vesper design tokens (design spec §2.3) ---- */
    --vs-sunken: #E8E6E2;
    --vs-ink: #0B1517;
    --vs-control: #6F8487;
    --vs-accent-ink: #8A2F4B;
    --vs-accent-ink-hover: #682137;
    --vs-accent-hover: #F7A9BC;
    --vs-accent-active: #DC7E95;
    --vs-signal: #B04A68;
    --vs-focus: #8A2F4B;
    --vs-lit: #FBD3DD;
    --vs-lit-fg: var(--vs-accent-ink);
    --vs-glow: rgb(176 74 104 / .18);
    --vs-glow-hover: rgb(176 74 104 / .35);
    --vs-highlight: #B04A68;
    --vs-hairline: rgb(16 37 42 / .12);
    --vs-live: #F4B63F;
    --vs-live-fg: #0B1517;
    --vs-success: #1C6B43;
    --vs-success-bg: #DCEFE3;
    --vs-danger: #A8261B;
    --vs-danger-bg: #FBE1DC;
    --vs-info: #1D5E80;
    --vs-info-bg: #DCEDF5;
    --vs-warning: #7F5200;
    --vs-warning-bg: #FBE3B6;
    --vs-avatar-1: #CDE5DF;
    --vs-avatar-2: #D2DFE6;
    --vs-avatar-3: #F1D5DC;
    --vs-avatar-4: #E5DED6;
    --vs-avatar-5: #F9E2B0;
    --vs-avatar-fg: #10252A;
    --vs-toggle-on: #FBFAF8;
    --vs-scrim: rgb(16 37 42 / .48);
    --vs-overlay-shadow: 0 16px 40px rgb(16 37 42 / .14);
    --vs-map-ground: #E8E6E2;
    --vs-map-park: #D6E6D9;
    --vs-map-water: #BFDBD8;
    --vs-map-street: #DDDAD5;
    --vs-map-street-major: #FBFAF8;
    --vs-map-contour: #D0CDC7;
    --vs-map-route: #F48CA6;
    --vs-map-route-width: 4px;
    --vs-map-casing: #0F1A1D;
    --vs-strip-bg: #0F1A1D;
    --vs-band: var(--ec-accent);
    --vs-band-fg: var(--vs-ink);
    --vs-footer-bg: #E8E6E2;

    /* ---- L2 · shared semantic layer (portable) ---- */
    --ts-link: var(--vs-accent-ink);
    --ts-link-hover: var(--vs-accent-ink-hover);
    --ts-focus: var(--vs-focus);
    --ts-focus-gap: transparent;
    --ts-control: var(--vs-control);
    --ts-signal: var(--vs-signal);
    --ts-tint: var(--vs-lit);
    --ts-on-tint: var(--vs-lit-fg);
    --ts-success: var(--vs-success);
    --ts-success-bg: var(--vs-success-bg);
    --ts-danger: var(--vs-danger);
    --ts-danger-bg: var(--vs-danger-bg);
    --ts-warning: var(--vs-warning);
    --ts-warning-bg: var(--vs-warning-bg);
    --ts-info: var(--vs-info);
    --ts-info-bg: var(--vs-info-bg);
    --ts-font-mono: ui-monospace, 'Cascadia Code', 'SF Mono', Menlo, Consolas, monospace;
    --ts-scrim: var(--vs-scrim);
    --ts-overlay-shadow: var(--vs-overlay-shadow);

    /* ---- L2 · rgb twins (literal triplets of this block) ---- */
    --ts-bg-rgb: 242, 241, 238;
    --ts-fg-rgb: 16, 37, 42;
    --ts-accent-rgb: 244, 140, 166;
    --ts-link-rgb: 138, 47, 75;
    --ts-link-hover-rgb: 104, 33, 55;
    --ts-success-rgb: 28, 107, 67;
    --ts-danger-rgb: 168, 38, 27;
    --ts-warning-rgb: 127, 82, 0;
    --ts-info-rgb: 29, 94, 128;
    --ts-fg-2-rgb: 71, 92, 96;
    --ts-surface-rgb: 251, 250, 248;
    --ts-surface-2-rgb: 232, 230, 226;

    /* ---- K · knobs that differ in this scheme ---- */
    --ts-btn-primary-border: var(--vs-signal);
    --hue: 40;
}

/* ==========================================================================
   C/D. Blue hour preset (bluehour): dark, then light. FULL colour sets.
   ========================================================================== */

[data-ec-preset="bluehour"] {
    color-scheme: dark;

    /* ---- L0 · Template Studio inventory (design spec §2.2) ---- */
    --ec-bg: #0F1A1D;
    --ec-surface: #162428;
    --ec-surface-2: #1F3035;
    --ec-fg: #EFE8DA;
    --ec-fg-2: #A6B4B1;
    --ec-border: #2C4046;
    --ec-accent: #9DB2FF;
    --ec-accent-fg: #0B1517;
    --ec-accent-soft: #202C38;
    --ec-shadow: none;

    /* ---- L1 · Vesper design tokens (design spec §2.3) ---- */
    --vs-sunken: #122125;
    --vs-ink: #0B1517;
    --vs-control: #648087;
    --vs-accent-ink: #9DB2FF;
    --vs-accent-ink-hover: #B6C5FF;
    --vs-accent-hover: #B6C5FF;
    --vs-accent-active: #8DA0E6;
    --vs-signal: #9DB2FF;
    --vs-focus: #9DB2FF;
    --vs-lit: #262B3D;
    --vs-lit-fg: var(--vs-accent-ink);
    --vs-glow: rgb(157 178 255 / .1);
    --vs-glow-hover: rgb(157 178 255 / .28);
    --vs-highlight: rgb(157 178 255 / .55);
    --vs-hairline: rgb(239 232 218 / .12);
    --vs-live: #F48CA6;
    --vs-live-fg: #0B1517;
    --vs-success: #5CCB8F;
    --vs-success-bg: #173229;
    --vs-danger: #FF8C7A;
    --vs-danger-bg: #3A1B1A;
    --vs-info: #8CC8E8;
    --vs-info-bg: #13303D;
    --vs-warning: #F4B63F;
    --vs-warning-bg: #3A2D13;
    --vs-avatar-1: #1E4A45;
    --vs-avatar-2: #25404A;
    --vs-avatar-3: #4A2330;
    --vs-avatar-4: #2A2623;
    --vs-avatar-5: #3A2D13;
    --vs-avatar-fg: #EFE8DA;
    --vs-toggle-on: #1F3035;
    --vs-scrim: rgb(5 10 12 / .62);
    --vs-overlay-shadow: 0 16px 40px rgb(0 0 0 / .45);
    --vs-map-ground: #122125;
    --vs-map-park: #162C2A;
    --vs-map-water: #1E4A45;
    --vs-map-street: #1A2B2F;
    --vs-map-street-major: #1F3035;
    --vs-map-contour: #243A40;
    --vs-map-route: #9DB2FF;
    --vs-map-route-width: 3px;
    --vs-map-casing: #0F1A1D;
    --vs-strip-bg: #162428;
    --vs-band: var(--ec-accent);
    --vs-band-fg: var(--vs-ink);
    --vs-footer-bg: #162428;

    /* ---- L2 · shared semantic layer (portable) ---- */
    --ts-link: var(--vs-accent-ink);
    --ts-link-hover: var(--vs-accent-ink-hover);
    --ts-focus: var(--vs-focus);
    --ts-focus-gap: transparent;
    --ts-control: var(--vs-control);
    --ts-signal: var(--vs-signal);
    --ts-tint: var(--vs-lit);
    --ts-on-tint: var(--vs-lit-fg);
    --ts-success: var(--vs-success);
    --ts-success-bg: var(--vs-success-bg);
    --ts-danger: var(--vs-danger);
    --ts-danger-bg: var(--vs-danger-bg);
    --ts-warning: var(--vs-warning);
    --ts-warning-bg: var(--vs-warning-bg);
    --ts-info: var(--vs-info);
    --ts-info-bg: var(--vs-info-bg);
    --ts-font-mono: ui-monospace, 'Cascadia Code', 'SF Mono', Menlo, Consolas, monospace;
    --ts-scrim: var(--vs-scrim);
    --ts-overlay-shadow: var(--vs-overlay-shadow);

    /* ---- L2 · rgb twins (literal triplets of this block) ---- */
    --ts-bg-rgb: 15, 26, 29;
    --ts-fg-rgb: 239, 232, 218;
    --ts-accent-rgb: 157, 178, 255;
    --ts-link-rgb: 157, 178, 255;
    --ts-link-hover-rgb: 182, 197, 255;
    --ts-success-rgb: 92, 203, 143;
    --ts-danger-rgb: 255, 140, 122;
    --ts-warning-rgb: 244, 182, 63;
    --ts-info-rgb: 140, 200, 232;
    --ts-fg-2-rgb: 166, 180, 177;
    --ts-surface-rgb: 22, 36, 40;
    --ts-surface-2-rgb: 31, 48, 53;
}

[data-ec-preset="bluehour"][data-color-scheme="light"] {
    color-scheme: light;

    /* ---- L0 · Template Studio inventory (design spec §2.2) ---- */
    --ec-bg: #F2F1EE;
    --ec-surface: #FBFAF8;
    --ec-surface-2: #E8E6E2;
    --ec-fg: #10252A;
    --ec-fg-2: #475C60;
    --ec-border: #D0CDC7;
    --ec-accent: #9DB2FF;
    --ec-accent-fg: #0B1517;
    --ec-accent-soft: #EAE7E5;
    --ec-shadow: 0 1px 0 rgb(16 37 42 / .04);

    /* ---- L1 · Vesper design tokens (design spec §2.3) ---- */
    --vs-sunken: #E8E6E2;
    --vs-ink: #0B1517;
    --vs-control: #6F8487;
    --vs-accent-ink: #3C4C9A;
    --vs-accent-ink-hover: #2B3874;
    --vs-accent-hover: #B6C5FF;
    --vs-accent-active: #8DA0E6;
    --vs-signal: #5566B8;
    --vs-focus: #3C4C9A;
    --vs-lit: #DAE2FF;
    --vs-lit-fg: var(--vs-accent-ink);
    --vs-glow: rgb(85 102 184 / .18);
    --vs-glow-hover: rgb(85 102 184 / .35);
    --vs-highlight: #5566B8;
    --vs-hairline: rgb(16 37 42 / .12);
    --vs-live: #F48CA6;
    --vs-live-fg: #0B1517;
    --vs-success: #1C6B43;
    --vs-success-bg: #DCEFE3;
    --vs-danger: #A8261B;
    --vs-danger-bg: #FBE1DC;
    --vs-info: #1D5E80;
    --vs-info-bg: #DCEDF5;
    --vs-warning: #7F5200;
    --vs-warning-bg: #FBE3B6;
    --vs-avatar-1: #CDE5DF;
    --vs-avatar-2: #D2DFE6;
    --vs-avatar-3: #F1D5DC;
    --vs-avatar-4: #E5DED6;
    --vs-avatar-5: #F9E2B0;
    --vs-avatar-fg: #10252A;
    --vs-toggle-on: #FBFAF8;
    --vs-scrim: rgb(16 37 42 / .48);
    --vs-overlay-shadow: 0 16px 40px rgb(16 37 42 / .14);
    --vs-map-ground: #E8E6E2;
    --vs-map-park: #D6E6D9;
    --vs-map-water: #BFDBD8;
    --vs-map-street: #DDDAD5;
    --vs-map-street-major: #FBFAF8;
    --vs-map-contour: #D0CDC7;
    --vs-map-route: #9DB2FF;
    --vs-map-route-width: 4px;
    --vs-map-casing: #0F1A1D;
    --vs-strip-bg: #0F1A1D;
    --vs-band: var(--ec-accent);
    --vs-band-fg: var(--vs-ink);
    --vs-footer-bg: #E8E6E2;

    /* ---- L2 · shared semantic layer (portable) ---- */
    --ts-link: var(--vs-accent-ink);
    --ts-link-hover: var(--vs-accent-ink-hover);
    --ts-focus: var(--vs-focus);
    --ts-focus-gap: transparent;
    --ts-control: var(--vs-control);
    --ts-signal: var(--vs-signal);
    --ts-tint: var(--vs-lit);
    --ts-on-tint: var(--vs-lit-fg);
    --ts-success: var(--vs-success);
    --ts-success-bg: var(--vs-success-bg);
    --ts-danger: var(--vs-danger);
    --ts-danger-bg: var(--vs-danger-bg);
    --ts-warning: var(--vs-warning);
    --ts-warning-bg: var(--vs-warning-bg);
    --ts-info: var(--vs-info);
    --ts-info-bg: var(--vs-info-bg);
    --ts-font-mono: ui-monospace, 'Cascadia Code', 'SF Mono', Menlo, Consolas, monospace;
    --ts-scrim: var(--vs-scrim);
    --ts-overlay-shadow: var(--vs-overlay-shadow);

    /* ---- L2 · rgb twins (literal triplets of this block) ---- */
    --ts-bg-rgb: 242, 241, 238;
    --ts-fg-rgb: 16, 37, 42;
    --ts-accent-rgb: 157, 178, 255;
    --ts-link-rgb: 60, 76, 154;
    --ts-link-hover-rgb: 43, 56, 116;
    --ts-success-rgb: 28, 107, 67;
    --ts-danger-rgb: 168, 38, 27;
    --ts-warning-rgb: 127, 82, 0;
    --ts-info-rgb: 29, 94, 128;
    --ts-fg-2-rgb: 71, 92, 96;
    --ts-surface-rgb: 251, 250, 248;
    --ts-surface-2-rgb: 232, 230, 226;

    /* ---- K · knobs that differ in this scheme ---- */
    --ts-btn-primary-border: var(--vs-signal);
    --hue: 40;
}

/* ==========================================================================
   Night scope: the Tonight strip (the library top bar) stays a dark marquee over the
   daylight building in the light scheme (design spec §2.4). It re-declares the dark
   L0/L1 colours and every L2 name that is a var() of them; accent values follow the
   preset, because every Vesper preset uses its fill colour as dark-scheme text.
   ========================================================================== */

.ts-topbar,
[data-vs-scope="night"] {
    color-scheme: dark;
    --ec-bg: #0F1A1D;
    --ec-surface: #162428;
    --ec-surface-2: #1F3035;
    --ec-fg: #EFE8DA;
    --ec-fg-2: #A6B4B1;
    --ec-border: #2C4046;
    --vs-control: #648087;
    --vs-accent-ink: var(--ec-accent);
    --vs-accent-ink-hover: var(--vs-accent-hover);
    --vs-signal: var(--ec-accent);
    --vs-focus: var(--ec-accent);
    --vs-lit: #3A2D13;
    --vs-lit: color-mix(in srgb, var(--ec-accent) 24%, #000);
    --vs-glow: rgb(244 182 63 / .1);
    --vs-glow: color-mix(in srgb, var(--ec-accent) 10%, transparent);
    --vs-hairline: rgb(239 232 218 / .12);
    --vs-avatar-fg: #EFE8DA;
    --ts-link: var(--vs-accent-ink);
    --ts-link-hover: var(--vs-accent-ink-hover);
    --ts-focus: var(--vs-focus);
    --ts-control: var(--vs-control);
    --ts-signal: var(--vs-signal);
    --ts-tint: var(--vs-lit);
    --ts-on-tint: var(--vs-accent-ink);
    --ts-bg-rgb: 15, 26, 29;
    --ts-fg-rgb: 239, 232, 218;
    --ts-fg-2-rgb: 166, 180, 177;
    --ts-surface-rgb: 22, 36, 40;
    --ts-surface-2-rgb: 31, 48, 53;
    --ts-link-rgb: var(--ts-accent-rgb);
    --ts-link-hover-rgb: var(--ts-accent-rgb);
}

/* ==========================================================================
   Custom accent (Studio Style tab hex; PageContext adds body.ts-custom-accent and prints
   :root[data-ec-preset]{--ts-accent-rgb} inline). The static --vs-* values only fit the
   shipped presets, so the accent family is derived here (design spec §2.6). Keyed on the
   root through :has() so every L2/L3/L4 var() declared on :root resolves with the derived
   values; it never touches the accent triplet the library owns.
   ========================================================================== */

@supports (color: color-mix(in oklch, red 50%, blue)) {
    :root:has(> body.ts-custom-accent) {
        --vs-accent-ink: var(--ec-accent);
        --vs-accent-ink-hover: color-mix(in srgb, var(--ec-accent) 75%, #fff);
        --vs-accent-hover: color-mix(in srgb, var(--ec-accent) 75%, #fff);
        --vs-accent-active: color-mix(in srgb, var(--ec-accent) 90%, #000);
        --vs-signal: var(--ec-accent);
        --vs-focus: var(--ec-accent);
        --vs-lit: color-mix(in srgb, var(--ec-accent) 24%, #000);
        --vs-glow: color-mix(in srgb, var(--ec-accent) 10%, transparent);
        --vs-glow-hover: color-mix(in srgb, var(--ec-accent) 28%, transparent);
        --vs-highlight: color-mix(in srgb, var(--ec-accent) 55%, transparent);
        --vs-map-route: var(--ec-accent);
        --ts-link-rgb: var(--ts-accent-rgb);
    }

    :root[data-color-scheme="light"]:has(> body.ts-custom-accent) {
        --vs-accent-ink: color-mix(in oklch, var(--ec-accent) 58%, #000);
        --vs-accent-ink-hover: color-mix(in oklch, var(--ec-accent) 45%, #000);
        --vs-signal: color-mix(in oklch, var(--ec-accent) 72%, #000);
        --vs-focus: var(--vs-accent-ink);
        --vs-lit: color-mix(in srgb, var(--ec-accent) 38%, #fff);
        --vs-glow: color-mix(in srgb, var(--vs-signal) 18%, transparent);
        --vs-glow-hover: color-mix(in srgb, var(--vs-signal) 35%, transparent);
        --vs-highlight: var(--vs-signal);
    }
}

/* ==========================================================================
   K · component knobs read by the kit files (bootstrap-bridge.css, joomla.css, vendor, system)
   Scheme-dependent knobs are var() references; the light-only brass edge lives in block B/D.
   ========================================================================== */

:root,
[data-bs-theme]:not(:root),
.ts-topbar,
[data-vs-scope="night"] {
    --ts-focus-width: 2px;
    --ts-control-height: 2.75rem; /* 44px buttons, inputs and selects */
    --ts-control-height-sm: 2.25rem;
    --ts-control-radius: var(--ec-btn-radius);
    --ts-control-border-width: 1px;
    --ts-control-bg: var(--ec-surface);
    --ts-control-focus-border: var(--ts-focus);
    --ts-btn-font: var(--ec-font-body);
    --ts-btn-weight: 700;
    --ts-btn-transform: none;
    --ts-btn-tracking: normal;
    --ts-btn-pad-x: 1.25rem;
    --ts-btn-border-width: var(--ts-control-border-width);
    --ts-btn-primary-bg: var(--ec-accent);
    --ts-btn-primary-fg: var(--ec-accent-fg);
    --ts-btn-primary-border: var(--ts-btn-primary-bg); /* light scheme: the --vs-signal edge (block B/D) */
    --ts-btn-primary-hover-bg: var(--vs-accent-hover); /* "the lamp brightens" */
    --ts-btn-primary-hover-fg: var(--ts-btn-primary-fg);
    --ts-btn-primary-shadow: none;
    --ts-btn-secondary-bg: transparent;
    --ts-btn-secondary-fg: var(--ec-fg);
    --ts-btn-secondary-border: var(--ec-fg-2); /* outline buttons: 1.5px fg-2 in the design */
    --ts-btn-secondary-hover-bg: var(--ec-surface-2);
    --ts-btn-secondary-hover-fg: var(--ec-fg);
    --ts-btn-secondary-hover-border: var(--ec-fg);
    --ts-check-size: 1.375em; /* 22px boxes */
    --ts-check-bg: var(--ec-accent);
    --ts-check-mark: var(--ts-mark-ink-check); /* ink marks on marigold in both schemes */
    --ts-radio-mark: var(--ts-mark-ink-dot);
    --ts-dash-mark: var(--ts-mark-ink-dash);
    --ts-switch-mark: var(--ts-mark-ink-knob);
    --ts-card-bg: var(--ec-surface);
    --ts-card-border: var(--ec-border);
    --ts-card-radius: var(--ec-radius); /* single length (the kit uses it in calc); bubble tails live in components.css */
    --ts-card-shadow: inset 0 1px 0 var(--vs-glow); /* the lamplight edge */
    --ts-overlay-radius: var(--ec-radius);
    --ts-badge-radius: var(--vs-r-tag);
    --ts-tab-indicator: var(--ts-signal);
    --ts-tab-indicator-width: 3px;
    --ts-tab-active-bg: transparent;
    --ts-tab-active-border: transparent;
    --ts-table-head-bg: transparent;
    --ts-table-head-fg: var(--ec-fg-2);
    --ts-table-head-rule: var(--ec-border);
    --ts-page-current-bg: var(--ec-accent);
    --ts-page-current-fg: var(--ec-accent-fg);
    --ts-page-gap: 0.375rem;
    --ts-alert-border-width: 1px;
    --ts-alert-bar-width: 1px;
    --ts-alert-radius: var(--ec-radius);
    --ts-tooltip-bg: var(--vs-ink); /* ink in both schemes */
    --ts-tooltip-fg: #EFE8DA; /* cream on ink (15.19:1) */
}

/* ==========================================================================
   L3 · Studio aliases (the --color-* and --font-* names of the earlier Studio templates; Community Answers reads them)
   ========================================================================== */

:root,
[data-bs-theme]:not(:root),
.ts-topbar,
[data-vs-scope="night"] {
    --color-paper: var(--ec-bg);
    --color-paper-2: var(--ec-surface);
    --color-paper-3: var(--ec-surface-2);
    --color-ink: var(--ec-fg);
    --color-ink-2: var(--ec-fg);
    --color-neutral: var(--ec-fg-2);
    --color-muted: var(--ec-fg-2);
    --color-rule: var(--ec-border);
    --color-rule-2: var(--ts-control);
    --color-accent: var(--ec-accent);
    --color-accent-ink: var(--ec-accent-fg); /* Studio meaning: text ON the accent */
    --color-accent-soft: var(--ec-accent-soft);
    --color-focus: var(--ts-focus);
    --color-error: var(--ts-danger);
    --color-error-soft: var(--ts-danger-bg);
    --color-success: var(--ts-success);
    --color-success-soft: var(--ts-success-bg);
    --color-warning: var(--ts-warning);
    --color-warning-soft: var(--ts-warning-bg);
    --color-scrim: var(--ts-scrim);

    /* ---- fonts ---- */
    --font-display: var(--ec-font-display);
    --font-body: var(--ec-font-body);
    --font-mono: var(--ts-font-mono); /* declared on purpose: Community Answers reads it */
    --font-ui: var(--ec-font-body);

    /* ---- space (design spec §4.1) ---- */
    --space-3xs: 0.125rem;
    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 5rem;
    --space-5xl: 6rem;

    /* ---- type (design spec §3.3) ---- */
    --text-xs: var(--vs-t-tag);
    --text-sm: var(--vs-t-meta-s);
    --text-base: 1rem;
    --text-md: var(--vs-t-body);
    --text-lg: var(--vs-t-title-l);
    --text-xl: var(--vs-t-lede);
    --text-2xl: 1.75rem;
    --text-3xl: var(--vs-t-h2);
    --text-4xl: var(--vs-t-h1-page);
    --text-display-s: var(--vs-t-display-l);
    --text-display: var(--vs-t-display-xl);

    /* ---- shape and page ---- */
    --radius-xs: var(--vs-r-tail);
    --radius-sm: var(--ec-btn-radius);
    --radius-md: var(--ec-radius);
    --radius-lg: 1.25rem;
    --radius-pill: 999px;
    --measure: 68ch;
    --target-min: 44px;
    --page-max: var(--ec-cw);
    --page-gutter: max(var(--ec-gut), env(safe-area-inset-left), env(safe-area-inset-right));
    --rule-hair: 1px;
    --rule-strong: 2px;
}

/* ==========================================================================
   L4 · extension and core maps (variables only; scoped !important maps live in ext/*.css)
   ========================================================================== */

:root,
[data-bs-theme]:not(:root),
.ts-topbar,
[data-vs-scope="night"] {
    /* ---- Community Answers follow-template mode: all 21 names ---- */
    --template-bg: var(--ec-bg);
    --template-bg-elev: var(--ec-surface);
    --template-bg-subtle: var(--ec-surface);
    --template-bg-inset: var(--ec-surface-2);
    --template-border-color: var(--ec-border);
    --template-border-strong-color: var(--ts-control);
    --template-text-color: var(--ec-fg);
    --template-muted-color: var(--ec-fg-2);
    --template-subtle-color: var(--ec-fg-2);
    --template-link-color: var(--ts-link);
    --template-link-hover-color: var(--ts-link-hover);
    --template-accent-soft: var(--ts-tint);
    --template-success-color: var(--ts-success);
    --template-success-bg: var(--ts-success-bg);
    --template-warning-color: var(--ts-warning);
    --template-warning-bg: var(--ts-warning-bg);
    --template-danger-color: var(--ts-danger);
    --template-danger-bg: var(--ts-danger-bg);
    --template-heading-font: var(--ec-font-display);
    --template-font-family: var(--ec-font-body);
    --template-mono-font: var(--ts-font-mono);

    /* ---- VidyaLMS public tokens ---- */
    --vy-bg: var(--ec-bg);
    --vy-surface: var(--ec-surface);
    --vy-surface-2: var(--ec-surface-2);
    --vy-fg: var(--ec-fg);
    --vy-fg-2: var(--ec-fg-2);
    --vy-border: var(--ec-border);
    --vy-control-border: var(--ts-control);
    --vy-accent: var(--ec-accent);
    --vy-accent-fg: var(--ec-accent-fg);
    --vy-accent-soft: var(--ts-tint);
    --vy-ok: var(--ts-success);
    --vy-ok-strong: var(--ts-success);
    --vy-warn: var(--ts-warning);
    --vy-warn-strong: var(--ts-warning);
    --vy-danger: var(--ts-danger);
    --vy-danger-strong: var(--ts-danger);
    --vy-feature: var(--vs-lit); /* the lit room */
    --vy-feature-fg: var(--ec-fg);
    --vy-feature-fg-2: var(--ec-fg-2);
    --vy-feature-action: var(--ec-accent);
    --vy-feature-action-fg: var(--ec-accent-fg);
    --vy-radius: var(--ec-btn-radius);
    --vy-radius-lg: var(--ec-radius);
    --vy-btn-radius: var(--ec-btn-radius);
    --vy-font-body: var(--ec-font-body); /* stops the bundled Bricolage Grotesque download */
    --vy-font-display: var(--ec-font-display);
    --vy-font-mono: var(--ts-font-mono);
    --vy-focus: var(--ts-focus-width, 2px) solid var(--ts-focus);
    --vy-dur-1: var(--ec-dur-1);
    --vy-dur-2: var(--ec-dur-2);

    /* ---- Joomla calendar field ---- */
    --calendar-bg: var(--ec-surface);
    --calendar-week-bg: var(--ec-surface-2);
    --calendar-select-color: var(--ec-fg);
    --calendar-select-bg-color: var(--ts-control-bg, var(--ec-surface));
    --calendar-disabled-bg: transparent;
    --calendar-disabled-color: var(--ec-fg-2);
    --btn-primary-bg: var(--ec-accent);
    --btn-primary-color: var(--ec-accent-fg);
    --body-bg: var(--ec-bg);

    /* ---- Joomla switcher field ---- */
    --focus: var(--ts-focus);

    /* ---- Media Manager (com_media inside component.php) ---- */
    --template-bg-dark: var(--ec-fg);
    --template-bg-dark-3: color-mix(in srgb, var(--ec-fg) 3%, var(--ec-surface));
    --template-bg-dark-5: color-mix(in srgb, var(--ec-fg) 5%, var(--ec-surface));
    --template-bg-dark-7: color-mix(in srgb, var(--ec-fg) 7%, var(--ec-surface));
    --template-bg-dark-10: color-mix(in srgb, var(--ec-fg) 10%, var(--ec-surface));
    --template-bg-dark-40: color-mix(in srgb, var(--ec-fg) 40%, var(--ec-surface));
    --template-bg-dark-50: color-mix(in srgb, var(--ec-fg) 50%, var(--ec-surface));
    --template-bg-dark-60: var(--ec-fg-2);
    --template-bg-dark-80: var(--ec-fg);
    --hue: 193; /* hue of --ec-bg; the light scheme re-declares it in block B */
    --link-color: var(--ts-link);
    --body-color: var(--ec-fg);
    --gray-400: var(--ec-border);
    --com-media-manager-content-bg: var(--ec-surface);
    --com-media-manager-content-color: var(--ec-fg);
    --com-media-manager-disk-name-color: var(--ec-fg);
    --com-media-manager-infobar-dt-color: var(--ec-fg-2);
    --com-media-manager-overlay-bg: var(--ec-surface-2);
    --com-media-manager-overlay-header-bg: var(--ec-surface-2);
    --com-media-manager-toolbar-icon-color: var(--ec-fg-2);
    --com-media-manager-tree-item-hover-bg: var(--ec-surface-2);

    /* ---- mod_articles grid layout ---- */
    --grid-layout-gap: var(--ec-grid-gap);
    --grid-item--min-width: 16rem;
}

/* ==========================================================================
   Reduced motion (last, so it wins over A and C)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    :root,
    [data-ec-preset] {
        --ec-dur-1: 0ms;
        --ec-dur-2: 0ms;
        --ec-dur-3: 0ms;
    }
}