/**
 * Mimeo · design tokens, layers L0-L4 (contract §2.5; design spec §2.2-§2.9).
 *
 * Block map (maximum specificity 0,2,0, so the library's inline TokenCompiler block, printed later
 * at 0,2,0, still wins for the accent triplet, container width, grid density, fonts and radius):
 *   A  :root, [data-ec-preset="mimeo"], [data-bs-theme="light"]:not(:root)
 *      default preset, light (the board): FULL set + every scheme-invariant token
 *   B  :root[data-color-scheme="dark"], [data-bs-theme="dark"]:not(:root)
 *      default preset, "Night edition" (carbon stock, fluoro ink): FULL colour set; also serves
 *      unknown preset slugs
 *   C  [data-ec-preset="<slug>"]                                  light, one per preset
 *   D  [data-ec-preset="<slug>"][data-color-scheme="dark"]         dark, one per preset
 *   E  @media (prefers-color-scheme: dark) :root:not([data-color-scheme]): the TinyMCE iframe
 *   then the custom-accent derivations, the K knobs, L3 Studio aliases and L4 extension maps.
 *
 * Colours are literal hex; color-mix() appears only in derived values, after a hex line.
 * Two accent roles: --ec-accent is the band / fill ink, --mm-accent-ink the text-size accent
 * (numerals, stamps, link underlines); they are equal in light and split in dark.
 *
 * @copyright   Copyright (C) 2026 BulaSikku Technologies Private Limited. All rights reserved.
 * @license     GNU General Public License version 2 or later
 */

/* ==========================================================================
   A. Mimeo (default preset), light (the board): FULL set + every scheme-invariant token
   ========================================================================== */

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

    /* ---- L0 · scheme-invariant inventory ---- */
    --ec-radius: 2px;                      /* cards, panels, inputs; overrides are clamped at 8px (--mm-r) */
    --ec-btn-radius: 2px;
    --ec-img-radius: 0px;                  /* posters, thumbnails, maps: square print */
    --ec-shadow: 3px 3px 0 0 var(--mm-offset); /* the only shadow: the misprint offset */
    --ec-font-display: 'Zilla Slab', 'Zilla Slab Fallback', Rockwell, 'Rockwell Nova', Georgia, serif;
    --ec-font-body: 'Atkinson Hyperlegible Next', 'Atkinson Fallback', 'Atkinson Hyperlegible', 'Segoe UI', system-ui, sans-serif;
    --ec-disp-weight: 700;
    --ec-disp-style: normal;
    --ec-disp-tracking: -0.015em;
    --ec-disp-transform: none;
    --ec-cw: 1280px;                       /* content width at 1440 (the lib re-emits it from layout.width) */
    --ec-gut: clamp(16px, 6.1vw - 7.8px, 80px); /* 16px at 390, 80px at 1440, linear between */
    --ec-sect-y: clamp(40px, 5vw, 72px);   /* section top padding */
    --ec-grid: 3;
    --ec-grid-gap: clamp(24px, 3.9vw, 56px);
    --ec-dur-1: 120ms;
    --ec-dur-2: 200ms;
    --ec-dur-3: 360ms;
    --ec-ease: cubic-bezier(0.2, 0.7, 0.2, 1);

    /* ---- L1 · scheme-invariant Mimeo tokens ---- */
    --mm-r: min(var(--ec-radius), 8px);    /* design spec §0.11: honour a radius override up to 8px */
    --mm-btn-r: min(var(--ec-btn-radius), 8px);
    --mm-s-1: 4px;                         /* spacing scale, design spec §4.1 (4px steps) */
    --mm-s-2: 8px;
    --mm-s-3: 12px;
    --mm-s-4: 16px;
    --mm-s-5: 20px;
    --mm-s-6: 24px;
    --mm-s-7: 28px;
    --mm-s-8: 32px;
    --mm-s-10: 40px;
    --mm-s-12: 48px;
    --mm-s-14: 56px;
    --mm-s-16: 64px;
    --mm-s-18: 72px;
    --mm-s-20: 80px;
    --mm-s-22: 88px;

    /* L2 · stacking and sticky (scheme invariant) */
    --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 */

    /* ---- L0 · Template Studio inventory (design spec §2.2) ---- */
    --ec-bg: #E7E5E4; /* stock */
    --ec-surface: #FCFCFA; /* paper: cards, panels, footer band */
    --ec-surface-2: #F3F2F0; /* inactive tabs, hover rows */
    --ec-fg: #1D1B1A; /* ink */
    --ec-fg-2: #56514B; /* meta, captions */
    --ec-border: #827E7B; /* 1px component borders, >= 3:1 on every surface */
    --ec-accent: #BE1068; /* band / fill ink (runtime value from the preset JSON) */
    --ec-accent-fg: #FFFFFF; /* preset accentFg / accentFgDark */
    --ec-accent-soft: #F9DDEB; /* hover wash: pink-100 (preset accentSoft) */
    /* ---- L1 · Mimeo tokens (design spec §2.3) ---- */
    --mm-paper: #FCFCFA;
    --mm-paper-ink: #1D1B1A;
    --mm-surface-3: #F1EFEC;
    --mm-track: #E7E5E4;
    --mm-rule: #A8A29E; /* 1px dashed separators (decorative) */
    --mm-rule-strong: var(--ec-fg);
    --mm-leader: var(--ec-border);
    --mm-accent-ink: #BE1068; /* accent as text and graphics on stock or paper */
    --mm-accent-hover: #8F0C4E;
    --mm-on-band: #FCFCFA;
    --mm-band-rule: #DA7AAA; /* strip hairline (decorative) */
    --mm-offset: #0078BF; /* hard offset shadow ink */
    --mm-misreg-band: #00084E; /* text-shadow on the band = multiply(offset, band) */
    --mm-misreg: #AB0E5E;
    --mm-misreg: color-mix(in srgb, var(--ec-accent) 90%, #000); /* text-shadow on stock and paper */
    --mm-action: #005C9E;
    --mm-action-fg: #FFFFFF;
    --mm-action-hover: #00467A;
    --mm-action-ink: #005C9E;
    --mm-tag-bg: #DDEAF5;
    --mm-tag-fg: #005C9E;
    --mm-yellow: #FFE14A;
    --mm-yellow-ink: #1D1B1A;
    --mm-fluoro: #FF48B0; /* illustration only */
    --mm-navy: #002284; /* illustration only */
    --mm-btn-primary: var(--ec-accent);
    --mm-btn-primary-fg: var(--ec-accent-fg);
    --mm-success: #1A6E3E;
    --mm-success-fg: #FCFCFA;
    --mm-success-soft: #DCEFE3;
    --mm-error: #B42318;
    --mm-error-soft: #F8E1DE;
    --mm-warning: #8A5300;
    --mm-warning-soft: #F8ECD2;
    --mm-focus: #1D1B1A;
    --mm-focus-band: #FFE14A;
    --mm-scrim: rgba(29, 27, 26, 0.55);
    --mm-avatar-a: var(--ec-accent);
    --mm-avatar-a-fg: #FFFFFF;
    --mm-avatar-b: #005C9E;
    --mm-avatar-b-fg: #FFFFFF;
    --mm-avatar-c: #FFE14A;
    --mm-avatar-c-fg: #1D1B1A;
    --mm-map-ground: #ECEAE6;
    --mm-map-park: #D3E2C5;
    --mm-map-block: #DEDAD4;
    --mm-map-landmark: #D6D0C8;
    --mm-map-road: #FFFFFF;
    --mm-map-casing: #D2CDC6;
    --mm-map-water: #A9CCE0;
    --mm-map-route-casing: #FCFCFA;
    /* ---- L2 · shared semantic layer (contract §2.5, Mimeo column) ---- */
    --ts-link: #BE1068; /* --mm-accent-ink */
    --ts-link-hover: #8F0C4E; /* --mm-accent-hover */
    --ts-focus: #1D1B1A; /* --mm-focus */
    --ts-focus-gap: transparent;
    --ts-control: #827E7B; /* --ec-border */
    --ts-signal: #BE1068; /* --mm-accent-ink */
    --ts-tint: #DDEAF5; /* --mm-tag-bg */
    --ts-on-tint: #005C9E; /* --mm-tag-fg */
    --ts-success: #1A6E3E;
    --ts-success-bg: #DCEFE3;
    --ts-danger: #B42318;
    --ts-danger-bg: #F8E1DE;
    --ts-warning: #8A5300;
    --ts-warning-bg: #F8ECD2;
    --ts-info: #005C9E; /* --mm-action-ink */
    --ts-info-bg: #DDEAF5; /* --mm-tag-bg */
    --ts-font-mono: 'Courier Prime', 'Courier Prime Fallback', 'Courier New', ui-monospace, monospace;
    --ts-scrim: rgba(29, 27, 26, 0.55);
    --ts-overlay-shadow: 4px 4px 0 0 var(--mm-offset);
    /* L2 · rgb twins of this block */
    --ts-bg-rgb: 231, 229, 228;
    --ts-fg-rgb: 29, 27, 26;
    --ts-accent-rgb: 190, 16, 104;
    --ts-link-rgb: 190, 16, 104;
    --ts-link-hover-rgb: 143, 12, 78;
    --ts-success-rgb: 26, 110, 62;
    --ts-danger-rgb: 180, 35, 24;
    --ts-warning-rgb: 138, 83, 0;
    --ts-info-rgb: 0, 92, 158;
    --ts-fg-2-rgb: 86, 81, 75;
    --ts-surface-rgb: 252, 252, 250;
    --ts-surface-2-rgb: 243, 242, 240;
}

/* ==========================================================================
   B. Mimeo, dark ("Night edition": the same zine on warm carbon stock, fluoro ink).
      FULL colour set; also serves unknown preset slugs.
   ========================================================================== */

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

    /* ---- L0 · Template Studio inventory (design spec §2.2) ---- */
    --ec-bg: #161514;
    --ec-surface: #1D1B1A;
    --ec-surface-2: #292725;
    --ec-fg: #F3F2F0;
    --ec-fg-2: #B7B1A8;
    --ec-border: #827E7B;
    --ec-accent: #A30E5A;
    --ec-accent-fg: #FCFCFA;
    --ec-accent-soft: #44192F;
    /* ---- L1 · Mimeo tokens (design spec §2.3) ---- */
    --mm-paper: #FCFCFA;
    --mm-paper-ink: #1D1B1A;
    --mm-surface-3: #33312E;
    --mm-track: #292725;
    --mm-rule: #56514B;
    --mm-rule-strong: var(--ec-fg);
    --mm-leader: var(--ec-border);
    --mm-accent-ink: #FF6FBF;
    --mm-accent-hover: #FF94CF;
    --mm-on-band: #FCFCFA;
    --mm-band-rule: #C7609A;
    --mm-offset: #0078BF;
    --mm-misreg-band: #000743;
    --mm-misreg: var(--mm-accent-ink);
    --mm-action: #62B2EC;
    --mm-action-fg: #161514;
    --mm-action-hover: #8CC7F2;
    --mm-action-ink: #62B2EC;
    --mm-tag-bg: #183349;
    --mm-tag-fg: #A5D0F5;
    --mm-yellow: #FFE14A;
    --mm-yellow-ink: #1D1B1A;
    --mm-fluoro: #FF48B0;
    --mm-navy: #002284;
    --mm-btn-primary: var(--mm-accent-ink);
    --mm-btn-primary-fg: #161514;
    --mm-success: #57C785;
    --mm-success-fg: #161514;
    --mm-success-soft: #1A3326;
    --mm-error: #FF8A7A;
    --mm-error-soft: #3A1F1B;
    --mm-warning: #F2C14E;
    --mm-warning-soft: #3A2E14;
    --mm-focus: #FFE14A;
    --mm-focus-band: #FFE14A;
    --mm-scrim: rgba(0, 0, 0, 0.66);
    --mm-avatar-a: var(--ec-accent);
    --mm-avatar-a-fg: #FFFFFF;
    --mm-avatar-b: #005C9E;
    --mm-avatar-b-fg: #FFFFFF;
    --mm-avatar-c: #FFE14A;
    --mm-avatar-c-fg: #1D1B1A;
    --mm-map-ground: #22201E;
    --mm-map-park: #26331F;
    --mm-map-block: #2E2A27;
    --mm-map-landmark: #3A3531;
    --mm-map-road: #3D3935;
    --mm-map-casing: #121110;
    --mm-map-water: #1C3A4F;
    --mm-map-route-casing: var(--ec-bg);
    /* ---- L2 · shared semantic layer (contract §2.5, Mimeo column) ---- */
    --ts-link: #FF6FBF;
    --ts-link-hover: #FF94CF;
    --ts-focus: #FFE14A;
    --ts-focus-gap: transparent;
    --ts-control: #827E7B;
    --ts-signal: #FF6FBF;
    --ts-tint: #183349;
    --ts-on-tint: #A5D0F5;
    --ts-success: #57C785;
    --ts-success-bg: #1A3326;
    --ts-danger: #FF8A7A;
    --ts-danger-bg: #3A1F1B;
    --ts-warning: #F2C14E;
    --ts-warning-bg: #3A2E14;
    --ts-info: #62B2EC;
    --ts-info-bg: #183349;
    --ts-font-mono: 'Courier Prime', 'Courier Prime Fallback', 'Courier New', ui-monospace, monospace;
    --ts-scrim: rgba(0, 0, 0, 0.66);
    --ts-overlay-shadow: 4px 4px 0 0 var(--mm-offset);
    /* L2 · rgb twins of this block */
    --ts-bg-rgb: 22, 21, 20;
    --ts-fg-rgb: 243, 242, 240;
    --ts-accent-rgb: 163, 14, 90;
    --ts-link-rgb: 255, 111, 191;
    --ts-link-hover-rgb: 255, 148, 207;
    --ts-success-rgb: 87, 199, 133;
    --ts-danger-rgb: 255, 138, 122;
    --ts-warning-rgb: 242, 193, 78;
    --ts-info-rgb: 98, 178, 236;
    --ts-fg-2-rgb: 183, 177, 168;
    --ts-surface-rgb: 29, 27, 26;
    --ts-surface-2-rgb: 41, 39, 37;
    /* K · marks on the fluorescent check fill are ink in this scheme */
    --ts-check-mark: var(--ts-mark-ink-check);
    --ts-radio-mark: var(--ts-mark-ink-dot);
    --ts-dash-mark: var(--ts-mark-ink-dash);
    --ts-switch-mark: var(--ts-mark-ink-knob);
}

/* ==========================================================================
   C/D. Mimeo (default) preset (mimeo): light, then dark. FULL colour sets.
   ========================================================================== */

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

    /* ---- L0 · Template Studio inventory (design spec §2.2) ---- */
    --ec-bg: #E7E5E4;
    --ec-surface: #FCFCFA;
    --ec-surface-2: #F3F2F0;
    --ec-fg: #1D1B1A;
    --ec-fg-2: #56514B;
    --ec-border: #827E7B;
    --ec-accent: #BE1068;
    --ec-accent-fg: #FFFFFF;
    --ec-accent-soft: #F9DDEB;
    /* ---- L1 · Mimeo tokens (design spec §2.3) ---- */
    --mm-paper: #FCFCFA;
    --mm-paper-ink: #1D1B1A;
    --mm-surface-3: #F1EFEC;
    --mm-track: #E7E5E4;
    --mm-rule: #A8A29E;
    --mm-rule-strong: var(--ec-fg);
    --mm-leader: var(--ec-border);
    --mm-accent-ink: #BE1068;
    --mm-accent-hover: #8F0C4E;
    --mm-on-band: #FCFCFA;
    --mm-band-rule: #DA7AAA;
    --mm-offset: #0078BF;
    --mm-misreg-band: #00084E;
    --mm-misreg: #AB0E5E;
    --mm-misreg: color-mix(in srgb, var(--ec-accent) 90%, #000);
    --mm-action: #005C9E;
    --mm-action-fg: #FFFFFF;
    --mm-action-hover: #00467A;
    --mm-action-ink: #005C9E;
    --mm-tag-bg: #DDEAF5;
    --mm-tag-fg: #005C9E;
    --mm-yellow: #FFE14A;
    --mm-yellow-ink: #1D1B1A;
    --mm-fluoro: #FF48B0;
    --mm-navy: #002284;
    --mm-btn-primary: var(--ec-accent);
    --mm-btn-primary-fg: var(--ec-accent-fg);
    --mm-success: #1A6E3E;
    --mm-success-fg: #FCFCFA;
    --mm-success-soft: #DCEFE3;
    --mm-error: #B42318;
    --mm-error-soft: #F8E1DE;
    --mm-warning: #8A5300;
    --mm-warning-soft: #F8ECD2;
    --mm-focus: #1D1B1A;
    --mm-focus-band: #FFE14A;
    --mm-scrim: rgba(29, 27, 26, 0.55);
    --mm-avatar-a: var(--ec-accent);
    --mm-avatar-a-fg: #FFFFFF;
    --mm-avatar-b: #005C9E;
    --mm-avatar-b-fg: #FFFFFF;
    --mm-avatar-c: #FFE14A;
    --mm-avatar-c-fg: #1D1B1A;
    --mm-map-ground: #ECEAE6;
    --mm-map-park: #D3E2C5;
    --mm-map-block: #DEDAD4;
    --mm-map-landmark: #D6D0C8;
    --mm-map-road: #FFFFFF;
    --mm-map-casing: #D2CDC6;
    --mm-map-water: #A9CCE0;
    --mm-map-route-casing: #FCFCFA;
    /* ---- L2 · shared semantic layer (contract §2.5, Mimeo column) ---- */
    --ts-link: #BE1068;
    --ts-link-hover: #8F0C4E;
    --ts-focus: #1D1B1A;
    --ts-focus-gap: transparent;
    --ts-control: #827E7B;
    --ts-signal: #BE1068;
    --ts-tint: #DDEAF5;
    --ts-on-tint: #005C9E;
    --ts-success: #1A6E3E;
    --ts-success-bg: #DCEFE3;
    --ts-danger: #B42318;
    --ts-danger-bg: #F8E1DE;
    --ts-warning: #8A5300;
    --ts-warning-bg: #F8ECD2;
    --ts-info: #005C9E;
    --ts-info-bg: #DDEAF5;
    --ts-font-mono: 'Courier Prime', 'Courier Prime Fallback', 'Courier New', ui-monospace, monospace;
    --ts-scrim: rgba(29, 27, 26, 0.55);
    --ts-overlay-shadow: 4px 4px 0 0 var(--mm-offset);
    /* L2 · rgb twins of this block */
    --ts-bg-rgb: 231, 229, 228;
    --ts-fg-rgb: 29, 27, 26;
    --ts-accent-rgb: 190, 16, 104;
    --ts-link-rgb: 190, 16, 104;
    --ts-link-hover-rgb: 143, 12, 78;
    --ts-success-rgb: 26, 110, 62;
    --ts-danger-rgb: 180, 35, 24;
    --ts-warning-rgb: 138, 83, 0;
    --ts-info-rgb: 0, 92, 158;
    --ts-fg-2-rgb: 86, 81, 75;
    --ts-surface-rgb: 252, 252, 250;
    --ts-surface-2-rgb: 243, 242, 240;
}

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

    /* ---- L0 · Template Studio inventory (design spec §2.2) ---- */
    --ec-bg: #161514;
    --ec-surface: #1D1B1A;
    --ec-surface-2: #292725;
    --ec-fg: #F3F2F0;
    --ec-fg-2: #B7B1A8;
    --ec-border: #827E7B;
    --ec-accent: #A30E5A;
    --ec-accent-fg: #FCFCFA;
    --ec-accent-soft: #44192F;
    /* ---- L1 · Mimeo tokens (design spec §2.3) ---- */
    --mm-paper: #FCFCFA;
    --mm-paper-ink: #1D1B1A;
    --mm-surface-3: #33312E;
    --mm-track: #292725;
    --mm-rule: #56514B;
    --mm-rule-strong: var(--ec-fg);
    --mm-leader: var(--ec-border);
    --mm-accent-ink: #FF6FBF;
    --mm-accent-hover: #FF94CF;
    --mm-on-band: #FCFCFA;
    --mm-band-rule: #C7609A;
    --mm-offset: #0078BF;
    --mm-misreg-band: #000743;
    --mm-misreg: var(--mm-accent-ink);
    --mm-action: #62B2EC;
    --mm-action-fg: #161514;
    --mm-action-hover: #8CC7F2;
    --mm-action-ink: #62B2EC;
    --mm-tag-bg: #183349;
    --mm-tag-fg: #A5D0F5;
    --mm-yellow: #FFE14A;
    --mm-yellow-ink: #1D1B1A;
    --mm-fluoro: #FF48B0;
    --mm-navy: #002284;
    --mm-btn-primary: var(--mm-accent-ink);
    --mm-btn-primary-fg: #161514;
    --mm-success: #57C785;
    --mm-success-fg: #161514;
    --mm-success-soft: #1A3326;
    --mm-error: #FF8A7A;
    --mm-error-soft: #3A1F1B;
    --mm-warning: #F2C14E;
    --mm-warning-soft: #3A2E14;
    --mm-focus: #FFE14A;
    --mm-focus-band: #FFE14A;
    --mm-scrim: rgba(0, 0, 0, 0.66);
    --mm-avatar-a: var(--ec-accent);
    --mm-avatar-a-fg: #FFFFFF;
    --mm-avatar-b: #005C9E;
    --mm-avatar-b-fg: #FFFFFF;
    --mm-avatar-c: #FFE14A;
    --mm-avatar-c-fg: #1D1B1A;
    --mm-map-ground: #22201E;
    --mm-map-park: #26331F;
    --mm-map-block: #2E2A27;
    --mm-map-landmark: #3A3531;
    --mm-map-road: #3D3935;
    --mm-map-casing: #121110;
    --mm-map-water: #1C3A4F;
    --mm-map-route-casing: var(--ec-bg);
    /* ---- L2 · shared semantic layer (contract §2.5, Mimeo column) ---- */
    --ts-link: #FF6FBF;
    --ts-link-hover: #FF94CF;
    --ts-focus: #FFE14A;
    --ts-focus-gap: transparent;
    --ts-control: #827E7B;
    --ts-signal: #FF6FBF;
    --ts-tint: #183349;
    --ts-on-tint: #A5D0F5;
    --ts-success: #57C785;
    --ts-success-bg: #1A3326;
    --ts-danger: #FF8A7A;
    --ts-danger-bg: #3A1F1B;
    --ts-warning: #F2C14E;
    --ts-warning-bg: #3A2E14;
    --ts-info: #62B2EC;
    --ts-info-bg: #183349;
    --ts-font-mono: 'Courier Prime', 'Courier Prime Fallback', 'Courier New', ui-monospace, monospace;
    --ts-scrim: rgba(0, 0, 0, 0.66);
    --ts-overlay-shadow: 4px 4px 0 0 var(--mm-offset);
    /* L2 · rgb twins of this block */
    --ts-bg-rgb: 22, 21, 20;
    --ts-fg-rgb: 243, 242, 240;
    --ts-accent-rgb: 163, 14, 90;
    --ts-link-rgb: 255, 111, 191;
    --ts-link-hover-rgb: 255, 148, 207;
    --ts-success-rgb: 87, 199, 133;
    --ts-danger-rgb: 255, 138, 122;
    --ts-warning-rgb: 242, 193, 78;
    --ts-info-rgb: 98, 178, 236;
    --ts-fg-2-rgb: 183, 177, 168;
    --ts-surface-rgb: 29, 27, 26;
    --ts-surface-2-rgb: 41, 39, 37;
    /* K · marks on the fluorescent check fill are ink in this scheme */
    --ts-check-mark: var(--ts-mark-ink-check);
    --ts-radio-mark: var(--ts-mark-ink-dot);
    --ts-dash-mark: var(--ts-mark-ink-dash);
    --ts-switch-mark: var(--ts-mark-ink-knob);
}

/* ==========================================================================
   C/D. Poster red preset (poster): light, then dark. FULL colour sets.
   ========================================================================== */

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

    /* ---- L0 · Template Studio inventory (design spec §2.2) ---- */
    --ec-bg: #E7E5E4;
    --ec-surface: #FCFCFA;
    --ec-surface-2: #F3F2F0;
    --ec-fg: #1D1B1A;
    --ec-fg-2: #56514B;
    --ec-border: #827E7B;
    --ec-accent: #BE1D2F;
    --ec-accent-fg: #FFFFFF;
    --ec-accent-soft: #F5E1E2;
    /* ---- L1 · Mimeo tokens (design spec §2.3) ---- */
    --mm-paper: #FCFCFA;
    --mm-paper-ink: #1D1B1A;
    --mm-surface-3: #F1EFEC;
    --mm-track: #E7E5E4;
    --mm-rule: #A8A29E;
    --mm-rule-strong: var(--ec-fg);
    --mm-leader: var(--ec-border);
    --mm-accent-ink: #BE1D2F;
    --mm-accent-hover: #8C1622;
    --mm-on-band: #FCFCFA;
    --mm-band-rule: #DA818A;
    --mm-offset: #0078BF;
    --mm-misreg-band: #000E23;
    --mm-misreg: #AB1A2A;
    --mm-misreg: color-mix(in srgb, var(--ec-accent) 90%, #000);
    --mm-action: #005C9E;
    --mm-action-fg: #FFFFFF;
    --mm-action-hover: #00467A;
    --mm-action-ink: #005C9E;
    --mm-tag-bg: #DDEAF5;
    --mm-tag-fg: #005C9E;
    --mm-yellow: #FFE14A;
    --mm-yellow-ink: #1D1B1A;
    --mm-fluoro: #FF48B0;
    --mm-navy: #002284;
    --mm-btn-primary: var(--ec-accent);
    --mm-btn-primary-fg: var(--ec-accent-fg);
    --mm-success: #1A6E3E;
    --mm-success-fg: #FCFCFA;
    --mm-success-soft: #DCEFE3;
    --mm-error: #B42318;
    --mm-error-soft: #F8E1DE;
    --mm-warning: #8A5300;
    --mm-warning-soft: #F8ECD2;
    --mm-focus: #1D1B1A;
    --mm-focus-band: #FFE14A;
    --mm-scrim: rgba(29, 27, 26, 0.55);
    --mm-avatar-a: var(--ec-accent);
    --mm-avatar-a-fg: #FFFFFF;
    --mm-avatar-b: #005C9E;
    --mm-avatar-b-fg: #FFFFFF;
    --mm-avatar-c: #FFE14A;
    --mm-avatar-c-fg: #1D1B1A;
    --mm-map-ground: #ECEAE6;
    --mm-map-park: #D3E2C5;
    --mm-map-block: #DEDAD4;
    --mm-map-landmark: #D6D0C8;
    --mm-map-road: #FFFFFF;
    --mm-map-casing: #D2CDC6;
    --mm-map-water: #A9CCE0;
    --mm-map-route-casing: #FCFCFA;
    /* ---- L2 · shared semantic layer (contract §2.5, Mimeo column) ---- */
    --ts-link: #BE1D2F;
    --ts-link-hover: #8C1622;
    --ts-focus: #1D1B1A;
    --ts-focus-gap: transparent;
    --ts-control: #827E7B;
    --ts-signal: #BE1D2F;
    --ts-tint: #DDEAF5;
    --ts-on-tint: #005C9E;
    --ts-success: #1A6E3E;
    --ts-success-bg: #DCEFE3;
    --ts-danger: #B42318;
    --ts-danger-bg: #F8E1DE;
    --ts-warning: #8A5300;
    --ts-warning-bg: #F8ECD2;
    --ts-info: #005C9E;
    --ts-info-bg: #DDEAF5;
    --ts-font-mono: 'Courier Prime', 'Courier Prime Fallback', 'Courier New', ui-monospace, monospace;
    --ts-scrim: rgba(29, 27, 26, 0.55);
    --ts-overlay-shadow: 4px 4px 0 0 var(--mm-offset);
    /* L2 · rgb twins of this block */
    --ts-bg-rgb: 231, 229, 228;
    --ts-fg-rgb: 29, 27, 26;
    --ts-accent-rgb: 190, 29, 47;
    --ts-link-rgb: 190, 29, 47;
    --ts-link-hover-rgb: 140, 22, 34;
    --ts-success-rgb: 26, 110, 62;
    --ts-danger-rgb: 180, 35, 24;
    --ts-warning-rgb: 138, 83, 0;
    --ts-info-rgb: 0, 92, 158;
    --ts-fg-2-rgb: 86, 81, 75;
    --ts-surface-rgb: 252, 252, 250;
    --ts-surface-2-rgb: 243, 242, 240;
}

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

    /* ---- L0 · Template Studio inventory (design spec §2.2) ---- */
    --ec-bg: #161514;
    --ec-surface: #1D1B1A;
    --ec-surface-2: #292725;
    --ec-fg: #F3F2F0;
    --ec-fg-2: #B7B1A8;
    --ec-border: #827E7B;
    --ec-accent: #A11A2A;
    --ec-accent-fg: #FCFCFA;
    --ec-accent-soft: #332020;
    /* ---- L1 · Mimeo tokens (design spec §2.3) ---- */
    --mm-paper: #FCFCFA;
    --mm-paper-ink: #1D1B1A;
    --mm-surface-3: #33312E;
    --mm-track: #292725;
    --mm-rule: #56514B;
    --mm-rule-strong: var(--ec-fg);
    --mm-leader: var(--ec-border);
    --mm-accent-ink: #FF7A85;
    --mm-accent-hover: #FFA3AA;
    --mm-on-band: #FCFCFA;
    --mm-band-rule: #C5747D;
    --mm-offset: #0078BF;
    --mm-misreg-band: #000C1F;
    --mm-misreg: var(--mm-accent-ink);
    --mm-action: #62B2EC;
    --mm-action-fg: #161514;
    --mm-action-hover: #8CC7F2;
    --mm-action-ink: #62B2EC;
    --mm-tag-bg: #183349;
    --mm-tag-fg: #A5D0F5;
    --mm-yellow: #FFE14A;
    --mm-yellow-ink: #1D1B1A;
    --mm-fluoro: #FF48B0;
    --mm-navy: #002284;
    --mm-btn-primary: var(--mm-accent-ink);
    --mm-btn-primary-fg: #161514;
    --mm-success: #57C785;
    --mm-success-fg: #161514;
    --mm-success-soft: #1A3326;
    --mm-error: #FF8A7A;
    --mm-error-soft: #3A1F1B;
    --mm-warning: #F2C14E;
    --mm-warning-soft: #3A2E14;
    --mm-focus: #FFE14A;
    --mm-focus-band: #FFE14A;
    --mm-scrim: rgba(0, 0, 0, 0.66);
    --mm-avatar-a: var(--ec-accent);
    --mm-avatar-a-fg: #FFFFFF;
    --mm-avatar-b: #005C9E;
    --mm-avatar-b-fg: #FFFFFF;
    --mm-avatar-c: #FFE14A;
    --mm-avatar-c-fg: #1D1B1A;
    --mm-map-ground: #22201E;
    --mm-map-park: #26331F;
    --mm-map-block: #2E2A27;
    --mm-map-landmark: #3A3531;
    --mm-map-road: #3D3935;
    --mm-map-casing: #121110;
    --mm-map-water: #1C3A4F;
    --mm-map-route-casing: var(--ec-bg);
    /* ---- L2 · shared semantic layer (contract §2.5, Mimeo column) ---- */
    --ts-link: #FF7A85;
    --ts-link-hover: #FFA3AA;
    --ts-focus: #FFE14A;
    --ts-focus-gap: transparent;
    --ts-control: #827E7B;
    --ts-signal: #FF7A85;
    --ts-tint: #183349;
    --ts-on-tint: #A5D0F5;
    --ts-success: #57C785;
    --ts-success-bg: #1A3326;
    --ts-danger: #FF8A7A;
    --ts-danger-bg: #3A1F1B;
    --ts-warning: #F2C14E;
    --ts-warning-bg: #3A2E14;
    --ts-info: #62B2EC;
    --ts-info-bg: #183349;
    --ts-font-mono: 'Courier Prime', 'Courier Prime Fallback', 'Courier New', ui-monospace, monospace;
    --ts-scrim: rgba(0, 0, 0, 0.66);
    --ts-overlay-shadow: 4px 4px 0 0 var(--mm-offset);
    /* L2 · rgb twins of this block */
    --ts-bg-rgb: 22, 21, 20;
    --ts-fg-rgb: 243, 242, 240;
    --ts-accent-rgb: 161, 26, 42;
    --ts-link-rgb: 255, 122, 133;
    --ts-link-hover-rgb: 255, 163, 170;
    --ts-success-rgb: 87, 199, 133;
    --ts-danger-rgb: 255, 138, 122;
    --ts-warning-rgb: 242, 193, 78;
    --ts-info-rgb: 98, 178, 236;
    --ts-fg-2-rgb: 183, 177, 168;
    --ts-surface-rgb: 29, 27, 26;
    --ts-surface-2-rgb: 41, 39, 37;
    /* K · marks on the fluorescent check fill are ink in this scheme */
    --ts-check-mark: var(--ts-mark-ink-check);
    --ts-radio-mark: var(--ts-mark-ink-dot);
    --ts-dash-mark: var(--ts-mark-ink-dash);
    --ts-switch-mark: var(--ts-mark-ink-knob);
}

/* ==========================================================================
   C/D. Teal and fluoro preset (teal): light, then dark. FULL colour sets.
   ========================================================================== */

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

    /* ---- L0 · Template Studio inventory (design spec §2.2) ---- */
    --ec-bg: #E7E5E4;
    --ec-surface: #FCFCFA;
    --ec-surface-2: #F3F2F0;
    --ec-fg: #1D1B1A;
    --ec-fg-2: #56514B;
    --ec-border: #827E7B;
    --ec-accent: #006B75;
    --ec-accent-fg: #FFFFFF;
    --ec-accent-soft: #DEEBEA;
    /* ---- L1 · Mimeo tokens (design spec §2.3) ---- */
    --mm-paper: #FCFCFA;
    --mm-paper-ink: #1D1B1A;
    --mm-surface-3: #F1EFEC;
    --mm-track: #E7E5E4;
    --mm-rule: #A8A29E;
    --mm-rule-strong: var(--ec-fg);
    --mm-leader: var(--ec-border);
    --mm-accent-ink: #006B75;
    --mm-accent-hover: #004A51;
    --mm-on-band: #FCFCFA;
    --mm-band-rule: #71ACB1;
    --mm-offset: #FF48B0;
    --mm-misreg-band: #001E51;
    --mm-misreg: #006069;
    --mm-misreg: color-mix(in srgb, var(--ec-accent) 90%, #000);
    --mm-action: #005C9E;
    --mm-action-fg: #FFFFFF;
    --mm-action-hover: #00467A;
    --mm-action-ink: #005C9E;
    --mm-tag-bg: #DDEAF5;
    --mm-tag-fg: #005C9E;
    --mm-yellow: #FFE14A;
    --mm-yellow-ink: #1D1B1A;
    --mm-fluoro: #FF48B0;
    --mm-navy: #002284;
    --mm-btn-primary: var(--ec-accent);
    --mm-btn-primary-fg: var(--ec-accent-fg);
    --mm-success: #1A6E3E;
    --mm-success-fg: #FCFCFA;
    --mm-success-soft: #DCEFE3;
    --mm-error: #B42318;
    --mm-error-soft: #F8E1DE;
    --mm-warning: #8A5300;
    --mm-warning-soft: #F8ECD2;
    --mm-focus: #1D1B1A;
    --mm-focus-band: #FFE14A;
    --mm-scrim: rgba(29, 27, 26, 0.55);
    --mm-avatar-a: var(--ec-accent);
    --mm-avatar-a-fg: #FFFFFF;
    --mm-avatar-b: #005C9E;
    --mm-avatar-b-fg: #FFFFFF;
    --mm-avatar-c: #FFE14A;
    --mm-avatar-c-fg: #1D1B1A;
    --mm-map-ground: #ECEAE6;
    --mm-map-park: #D3E2C5;
    --mm-map-block: #DEDAD4;
    --mm-map-landmark: #D6D0C8;
    --mm-map-road: #FFFFFF;
    --mm-map-casing: #D2CDC6;
    --mm-map-water: #A9CCE0;
    --mm-map-route-casing: #FCFCFA;
    /* ---- L2 · shared semantic layer (contract §2.5, Mimeo column) ---- */
    --ts-link: #006B75;
    --ts-link-hover: #004A51;
    --ts-focus: #1D1B1A;
    --ts-focus-gap: transparent;
    --ts-control: #827E7B;
    --ts-signal: #006B75;
    --ts-tint: #DDEAF5;
    --ts-on-tint: #005C9E;
    --ts-success: #1A6E3E;
    --ts-success-bg: #DCEFE3;
    --ts-danger: #B42318;
    --ts-danger-bg: #F8E1DE;
    --ts-warning: #8A5300;
    --ts-warning-bg: #F8ECD2;
    --ts-info: #005C9E;
    --ts-info-bg: #DDEAF5;
    --ts-font-mono: 'Courier Prime', 'Courier Prime Fallback', 'Courier New', ui-monospace, monospace;
    --ts-scrim: rgba(29, 27, 26, 0.55);
    --ts-overlay-shadow: 4px 4px 0 0 var(--mm-offset);
    /* L2 · rgb twins of this block */
    --ts-bg-rgb: 231, 229, 228;
    --ts-fg-rgb: 29, 27, 26;
    --ts-accent-rgb: 0, 107, 117;
    --ts-link-rgb: 0, 107, 117;
    --ts-link-hover-rgb: 0, 74, 81;
    --ts-success-rgb: 26, 110, 62;
    --ts-danger-rgb: 180, 35, 24;
    --ts-warning-rgb: 138, 83, 0;
    --ts-info-rgb: 0, 92, 158;
    --ts-fg-2-rgb: 86, 81, 75;
    --ts-surface-rgb: 252, 252, 250;
    --ts-surface-2-rgb: 243, 242, 240;
}

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

    /* ---- L0 · Template Studio inventory (design spec §2.2) ---- */
    --ec-bg: #161514;
    --ec-surface: #1D1B1A;
    --ec-surface-2: #292725;
    --ec-fg: #F3F2F0;
    --ec-fg-2: #B7B1A8;
    --ec-border: #827E7B;
    --ec-accent: #00626B;
    --ec-accent-fg: #FCFCFA;
    --ec-accent-soft: #202928;
    /* ---- L1 · Mimeo tokens (design spec §2.3) ---- */
    --mm-paper: #FCFCFA;
    --mm-paper-ink: #1D1B1A;
    --mm-surface-3: #33312E;
    --mm-track: #292725;
    --mm-rule: #56514B;
    --mm-rule-strong: var(--ec-fg);
    --mm-leader: var(--ec-border);
    --mm-accent-ink: #3FCFD8;
    --mm-accent-hover: #86E3E9;
    --mm-on-band: #FCFCFA;
    --mm-band-rule: #65A0A4;
    --mm-offset: #FF48B0;
    --mm-misreg-band: #001C4A;
    --mm-misreg: var(--mm-accent-ink);
    --mm-action: #62B2EC;
    --mm-action-fg: #161514;
    --mm-action-hover: #8CC7F2;
    --mm-action-ink: #62B2EC;
    --mm-tag-bg: #183349;
    --mm-tag-fg: #A5D0F5;
    --mm-yellow: #FFE14A;
    --mm-yellow-ink: #1D1B1A;
    --mm-fluoro: #FF48B0;
    --mm-navy: #002284;
    --mm-btn-primary: var(--mm-accent-ink);
    --mm-btn-primary-fg: #161514;
    --mm-success: #57C785;
    --mm-success-fg: #161514;
    --mm-success-soft: #1A3326;
    --mm-error: #FF8A7A;
    --mm-error-soft: #3A1F1B;
    --mm-warning: #F2C14E;
    --mm-warning-soft: #3A2E14;
    --mm-focus: #FFE14A;
    --mm-focus-band: #FFE14A;
    --mm-scrim: rgba(0, 0, 0, 0.66);
    --mm-avatar-a: var(--ec-accent);
    --mm-avatar-a-fg: #FFFFFF;
    --mm-avatar-b: #005C9E;
    --mm-avatar-b-fg: #FFFFFF;
    --mm-avatar-c: #FFE14A;
    --mm-avatar-c-fg: #1D1B1A;
    --mm-map-ground: #22201E;
    --mm-map-park: #26331F;
    --mm-map-block: #2E2A27;
    --mm-map-landmark: #3A3531;
    --mm-map-road: #3D3935;
    --mm-map-casing: #121110;
    --mm-map-water: #1C3A4F;
    --mm-map-route-casing: var(--ec-bg);
    /* ---- L2 · shared semantic layer (contract §2.5, Mimeo column) ---- */
    --ts-link: #3FCFD8;
    --ts-link-hover: #86E3E9;
    --ts-focus: #FFE14A;
    --ts-focus-gap: transparent;
    --ts-control: #827E7B;
    --ts-signal: #3FCFD8;
    --ts-tint: #183349;
    --ts-on-tint: #A5D0F5;
    --ts-success: #57C785;
    --ts-success-bg: #1A3326;
    --ts-danger: #FF8A7A;
    --ts-danger-bg: #3A1F1B;
    --ts-warning: #F2C14E;
    --ts-warning-bg: #3A2E14;
    --ts-info: #62B2EC;
    --ts-info-bg: #183349;
    --ts-font-mono: 'Courier Prime', 'Courier Prime Fallback', 'Courier New', ui-monospace, monospace;
    --ts-scrim: rgba(0, 0, 0, 0.66);
    --ts-overlay-shadow: 4px 4px 0 0 var(--mm-offset);
    /* L2 · rgb twins of this block */
    --ts-bg-rgb: 22, 21, 20;
    --ts-fg-rgb: 243, 242, 240;
    --ts-accent-rgb: 0, 98, 107;
    --ts-link-rgb: 63, 207, 216;
    --ts-link-hover-rgb: 134, 227, 233;
    --ts-success-rgb: 87, 199, 133;
    --ts-danger-rgb: 255, 138, 122;
    --ts-warning-rgb: 242, 193, 78;
    --ts-info-rgb: 98, 178, 236;
    --ts-fg-2-rgb: 183, 177, 168;
    --ts-surface-rgb: 29, 27, 26;
    --ts-surface-2-rgb: 41, 39, 37;
    /* K · marks on the fluorescent check fill are ink in this scheme */
    --ts-check-mark: var(--ts-mark-ink-check);
    --ts-radio-mark: var(--ts-mark-ink-dot);
    --ts-dash-mark: var(--ts-mark-ink-dash);
    --ts-switch-mark: var(--ts-mark-ink-knob);
}

/* ==========================================================================
   E. TinyMCE content iframe (seeded scheme `auto`). editor.css @imports this file into the
      editor iframe, whose <html> carries no attributes, so block A applies there; this block
      makes the content area follow the OS like the editor skin (index.php prints
      data-color-scheme-os on auto). Default preset, dark.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    :root:not([data-color-scheme]) {
        color-scheme: dark;

        /* ---- L0 · Template Studio inventory (design spec §2.2) ---- */
        --ec-bg: #161514;
        --ec-surface: #1D1B1A;
        --ec-surface-2: #292725;
        --ec-fg: #F3F2F0;
        --ec-fg-2: #B7B1A8;
        --ec-border: #827E7B;
        --ec-accent: #A30E5A;
        --ec-accent-fg: #FCFCFA;
        --ec-accent-soft: #44192F;
        /* ---- L1 · Mimeo tokens (design spec §2.3) ---- */
        --mm-paper: #FCFCFA;
        --mm-paper-ink: #1D1B1A;
        --mm-surface-3: #33312E;
        --mm-track: #292725;
        --mm-rule: #56514B;
        --mm-rule-strong: var(--ec-fg);
        --mm-leader: var(--ec-border);
        --mm-accent-ink: #FF6FBF;
        --mm-accent-hover: #FF94CF;
        --mm-on-band: #FCFCFA;
        --mm-band-rule: #C7609A;
        --mm-offset: #0078BF;
        --mm-misreg-band: #000743;
        --mm-misreg: var(--mm-accent-ink);
        --mm-action: #62B2EC;
        --mm-action-fg: #161514;
        --mm-action-hover: #8CC7F2;
        --mm-action-ink: #62B2EC;
        --mm-tag-bg: #183349;
        --mm-tag-fg: #A5D0F5;
        --mm-yellow: #FFE14A;
        --mm-yellow-ink: #1D1B1A;
        --mm-fluoro: #FF48B0;
        --mm-navy: #002284;
        --mm-btn-primary: var(--mm-accent-ink);
        --mm-btn-primary-fg: #161514;
        --mm-success: #57C785;
        --mm-success-fg: #161514;
        --mm-success-soft: #1A3326;
        --mm-error: #FF8A7A;
        --mm-error-soft: #3A1F1B;
        --mm-warning: #F2C14E;
        --mm-warning-soft: #3A2E14;
        --mm-focus: #FFE14A;
        --mm-focus-band: #FFE14A;
        --mm-scrim: rgba(0, 0, 0, 0.66);
        --mm-avatar-a: var(--ec-accent);
        --mm-avatar-a-fg: #FFFFFF;
        --mm-avatar-b: #005C9E;
        --mm-avatar-b-fg: #FFFFFF;
        --mm-avatar-c: #FFE14A;
        --mm-avatar-c-fg: #1D1B1A;
        --mm-map-ground: #22201E;
        --mm-map-park: #26331F;
        --mm-map-block: #2E2A27;
        --mm-map-landmark: #3A3531;
        --mm-map-road: #3D3935;
        --mm-map-casing: #121110;
        --mm-map-water: #1C3A4F;
        --mm-map-route-casing: var(--ec-bg);
        /* ---- L2 · shared semantic layer (contract §2.5, Mimeo column) ---- */
        --ts-link: #FF6FBF;
        --ts-link-hover: #FF94CF;
        --ts-focus: #FFE14A;
        --ts-focus-gap: transparent;
        --ts-control: #827E7B;
        --ts-signal: #FF6FBF;
        --ts-tint: #183349;
        --ts-on-tint: #A5D0F5;
        --ts-success: #57C785;
        --ts-success-bg: #1A3326;
        --ts-danger: #FF8A7A;
        --ts-danger-bg: #3A1F1B;
        --ts-warning: #F2C14E;
        --ts-warning-bg: #3A2E14;
        --ts-info: #62B2EC;
        --ts-info-bg: #183349;
        --ts-font-mono: 'Courier Prime', 'Courier Prime Fallback', 'Courier New', ui-monospace, monospace;
        --ts-scrim: rgba(0, 0, 0, 0.66);
        --ts-overlay-shadow: 4px 4px 0 0 var(--mm-offset);
        /* L2 · rgb twins of this block */
        --ts-bg-rgb: 22, 21, 20;
        --ts-fg-rgb: 243, 242, 240;
        --ts-accent-rgb: 163, 14, 90;
        --ts-link-rgb: 255, 111, 191;
        --ts-link-hover-rgb: 255, 148, 207;
        --ts-success-rgb: 87, 199, 133;
        --ts-danger-rgb: 255, 138, 122;
        --ts-warning-rgb: 242, 193, 78;
        --ts-info-rgb: 98, 178, 236;
        --ts-fg-2-rgb: 183, 177, 168;
        --ts-surface-rgb: 29, 27, 26;
        --ts-surface-2-rgb: 41, 39, 37;
        /* K · marks on the fluorescent check fill are ink in this scheme */
        --ts-check-mark: var(--ts-mark-ink-check);
        --ts-radio-mark: var(--ts-mark-ink-dot);
        --ts-dash-mark: var(--ts-mark-ink-dash);
        --ts-switch-mark: var(--ts-mark-ink-knob);
    }
}

/* ==========================================================================
   Custom accent (Studio Style tab hex). PageContext adds body.ts-custom-accent and prints
   :root[data-ec-preset]{--ts-accent-rgb} inline. The static accent-ink, hover and hairline
   values only fit the shipped presets, so they are derived here (design spec §2.6): in light
   the text accent is the accent a shade darker (it must read on the grey stock), in dark a
   fluorescent tint of it. Keyed on the root through :has() so every var() declared on :root
   resolves with the derived values; the accent triplet itself stays the library's.
   ========================================================================== */

@supports (color: color-mix(in oklab, red 50%, blue)) {
    :root:has(> body.ts-custom-accent) {
        --mm-accent-ink: color-mix(in oklab, var(--ec-accent) 85%, #000);
        --mm-accent-hover: color-mix(in oklab, var(--ec-accent) 62%, #000);
        --mm-band-rule: color-mix(in srgb, var(--ec-accent) 55%, #FCFCFA);
        --ts-link: var(--mm-accent-ink);
        --ts-link-hover: var(--mm-accent-hover);
        --ts-signal: var(--mm-accent-ink);
    }

    /* The link triplet can only follow where the link colour is (nearly) the accent: light. */
    :root:not([data-color-scheme="dark"]):has(> body.ts-custom-accent) {
        --ts-link-rgb: var(--ts-accent-rgb);
    }

    :root[data-color-scheme="dark"]:has(> body.ts-custom-accent) {
        --mm-accent-ink: color-mix(in oklab, var(--ec-accent) 45%, #FFF);
        --mm-accent-hover: color-mix(in oklab, var(--ec-accent) 28%, #FFF);
        --mm-band-rule: color-mix(in srgb, var(--ec-accent) 60%, #FCFCFA);
    }
}

/* ==========================================================================
   K · component knobs read by the kit files (bootstrap-bridge.css, joomla.css, vendor, system).
   Scheme-dependent knobs are var() references; the dark check marks live in the B/D/E blocks.
   ========================================================================== */

:root,
[data-bs-theme]:not(:root) {
    --ts-focus-width: 3px;                 /* design spec §6.0: 3px ring, offset 2px */
    --ts-control-height: 3rem;             /* 48px buttons; 44px floor */
    --ts-control-height-sm: 2.75rem;       /* 44px: the smallest Mimeo target */
    --ts-control-radius: var(--mm-btn-r);
    --ts-control-border-width: 1px;
    --ts-control-bg: var(--ec-surface);
    --ts-control-focus-border: var(--ec-fg);
    --ts-btn-font: var(--ec-font-body);
    --ts-btn-weight: 600;
    --ts-btn-transform: none;
    --ts-btn-tracking: normal;
    --ts-btn-pad-x: 1.375rem;              /* 22px (size M) */
    --ts-btn-border-width: 2px;            /* outline and ghost buttons */
    --ts-btn-primary-bg: var(--mm-btn-primary);
    --ts-btn-primary-fg: var(--mm-btn-primary-fg);
    --ts-btn-primary-border: var(--ts-btn-primary-bg);
    --ts-btn-primary-hover-bg: var(--mm-accent-hover);
    --ts-btn-primary-hover-fg: var(--ts-btn-primary-fg);
    --ts-btn-primary-shadow: 3px 3px 0 0 var(--mm-offset);
    --ts-btn-secondary-bg: transparent;
    --ts-btn-secondary-fg: var(--ec-fg);
    --ts-btn-secondary-border: var(--ec-fg);
    --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 at 16px */
    --ts-check-bg: var(--mm-accent-ink);
    --ts-check-mark: var(--ts-mark-paper-check);
    --ts-radio-mark: var(--ts-mark-paper-dot);
    --ts-dash-mark: var(--ts-mark-paper-dash);
    --ts-switch-mark: var(--ts-mark-paper-knob);
    --ts-card-bg: var(--ec-surface);
    --ts-card-border: var(--ec-border);
    --ts-card-radius: var(--mm-r);
    --ts-card-shadow: none;                /* ordinary cards carry no shadow (§4.5) */
    --ts-overlay-radius: var(--mm-r);
    --ts-badge-radius: var(--mm-r);
    --ts-tab-indicator: var(--ts-signal);
    --ts-tab-indicator-width: 3px;
    --ts-tab-active-bg: var(--ec-surface); /* folder tabs (§6.12) */
    --ts-tab-active-border: var(--ec-border);
    --ts-table-head-bg: var(--ec-surface-2);
    --ts-table-head-fg: var(--ec-fg);
    --ts-table-head-rule: var(--ec-fg);    /* 2px ink rule under the header row */
    --ts-page-current-bg: var(--ec-fg);    /* pagination: ink fill */
    --ts-page-current-fg: var(--ec-bg);
    --ts-page-gap: 0.375rem;
    --ts-alert-border-width: 0px;          /* alerts: soft fill + a 4px status bar, radius 0 */
    --ts-alert-bar-width: 4px;
    --ts-alert-radius: 0px;
    --ts-tooltip-bg: var(--ec-fg);
    --ts-tooltip-fg: var(--ec-bg);
}

/* ==========================================================================
   L3 · Studio aliases (the --color-*, --font-*, --space-* and --text-* names of the earlier Studio
   templates, same meanings). Community Answers' follow-template mode reads --color-* and --font-*
   as its second tier.
   ========================================================================== */

:root,
[data-bs-theme]:not(:root) {
    --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);

    --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-3xs: 4px;                        /* design spec §4.1 */
    --space-2xs: 8px;
    --space-xs: 12px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 32px;
    --space-xl: 40px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    --space-4xl: 72px;
    --space-5xl: 88px;

    --text-xs: 0.875rem;                     /* 14 attribution, fine print */
    --text-sm: 0.9375rem;                    /* 15 meta, tags, chips */
    --text-base: 1rem;
    --text-md: 1.0625rem;                    /* 17 body in cards, footer links */
    --text-lg: 1.25rem;                      /* 20 lede, thread titles */
    --text-xl: 1.5rem;                       /* 24 card titles */
    --text-2xl: 1.75rem;                     /* 28 list heads, numerals */
    --text-3xl: 2.75rem;                     /* 44 newsletter H2, footer wordmark */
    --text-4xl: 3.5rem;                      /* 56 section H2 */
    --text-display-s: clamp(2.25rem, 4.4vw, 4rem);   /* inner page H1 */
    --text-display: clamp(4rem, 11.1vw, 10rem);      /* cover H1 */

    --radius-xs: 0px;
    --radius-sm: var(--mm-btn-r);
    --radius-md: var(--ec-radius);
    --radius-lg: var(--mm-r);
    --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) {
    /* 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-text, --vy-space, --vy-learner-logo-size and --vy-page-padding
       are sizes VidyaLMS sets for itself: not mapped. */
    --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(--ec-accent);          /* the band: VidyaLMS feature panels print on magenta */
    --vy-feature-fg: var(--mm-on-band);
    --vy-feature-fg-2: var(--mm-on-band);
    --vy-feature-action: var(--mm-paper);
    --vy-feature-action-fg: var(--mm-paper-ink);
    --vy-radius: var(--mm-btn-r);
    --vy-radius-lg: var(--mm-r);
    --vy-btn-radius: var(--mm-btn-r);
    --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, 3px) solid var(--ts-focus);
    --vy-dur-1: var(--ec-dur-1);
    --vy-dur-2: var(--ec-dur-2);

    /* Joomla calendar field (system/fields/calendar.css) */
    --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(--mm-btn-primary);
    --btn-primary-color: var(--mm-btn-primary-fg);
    --body-bg: var(--ec-bg);

    /* Joomla switcher field (system/fields/switcher.css) */
    --focus: var(--ts-focus);

    /* Media Manager (com_media inside component.php): Atum/Cassiopeia names */
    --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: 20;                              /* hue angle of the stock --ec-bg #E7E5E4 */
    --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 (media/mod_articles/css/mod-articles.css) */
    --grid-layout-gap: var(--ec-grid-gap);
    --grid-item--min-width: 16rem;
}

/* ==========================================================================
   Reduced motion (last, so it wins over A and C; D blocks never declare durations)
   ========================================================================== */

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