/**
 * Kestrel design tokens: the production tokens.css (ships as tpl_kestrel/media/css/tokens.css).
 *
 * The implementation of DESIGN_SPEC.md sections 3 to 6 and 8, built block for block on the community kit
 * skeleton (template-studio/kit/community/tokens-template.css), with Atrium's tokens.css as the worked
 * example. This file is the source of truth for every --ke-* name (DECISIONS K28): DESIGN_SPEC.md section
 * 3, the other documents and pairs.json use these names. The helper names DESIGN_SPEC 3.16 lists (board
 * type sizes the specification gives in prose, line heights, weights, tracking, component sizes, the
 * primary hover, the band tints, the band rgb twin and the Media Manager tints) carry board values or
 * values derived here.
 * Values come from the canvas boards (StyleGuide is the colour and type reference), design/DECISIONS.md
 * (K4 presets, K5 dark scheme, K6 fonts, K7 width, K22 controls), tpl_kestrel/presets/*.json and
 * tpl_kestrel/fonts.spec.json. The boards draw one light page per state; production keys presets and
 * schemes on attributes of <html>:
 *   data-ec-preset="cobalt|vermilion|forest|plum"   printed by Engine::htmlAttributes()
 *   data-color-scheme="light|dark"                  printed by the Engine, corrected by the scheme boot script
 * and two nested scopes (DESIGN_SPEC 3.9, K28): the band, the dark band (.ts-footer, .ts-tone-dark,
 * [data-ke-scope="band"]), and paper ([data-ke-scope="paper"], .ts-row[data-ts-row="band"]).
 *
 * Layers:
 *   L0 --ec-*  Template Studio inventory: the library, ec-bridge.js and EasyCommerce read these
 *   L1 --ke-*  Kestrel design tokens: template-owned CSS reads only these (and the L1 aliases)
 *   L2 --ts-*  shared semantic layer: every kit file (bootstrap-bridge, joomla, vendor, system, ext) reads these
 *   K          kit component knobs (--ts-*), read as var(--knob, default)
 *   L3         Concord aliases (--color-*, --font-*, --space-*, --text-*, --radius-*): Community Answers
 *   L4         extension and core maps (--template-*, --vy-*, calendar, switcher, Media Manager, mod_articles)
 *
 * Block map (Kestrel is seeded light, K5, so <S> = light and <O> = dark):
 *   A   :root, [data-ec-preset="cobalt"], [data-bs-theme="light"]:not(:root)
 *         Cobalt light: full colour set, every scheme-invariant token; doubles as Cobalt's C block
 *   B   :root[data-color-scheme="dark"], [data-ec-preset="cobalt"][data-color-scheme="dark"],
 *       [data-bs-theme="dark"]:not(:root)
 *         Cobalt dark: full colour set; also serves unknown preset slugs and doubles as Cobalt's D block
 *   C   [data-ec-preset="vermilion|forest|plum"]                            preset light: full colour set
 *   D   [data-ec-preset="vermilion|forest|plum"][data-color-scheme="dark"]  preset dark: full colour set
 *   then the custom accent block, K knobs, the band and paper scopes, L1 aliases, L3, L4, phone
 *   type sizes and reduced motion (last). No block E: the seeded scheme is light, not auto (K5); add
 *   block E from the kit skeleton if the seed ever changes to auto.
 *
 * Rules: every colour in blocks A to D is literal hex (DESIGN_SPEC 3.2), including the eight colours
 * ec-bridge.js reads (--ec-bg, -surface, -surface-2, -fg, -fg-2, -border, -accent, -accent-fg); color-mix()
 * appears only in the custom accent block, always after a hex line of the same name; rgb twins are literal
 * triplets of their block; no selector passes 0,2,0, so the library's inline TokenCompiler block
 * (:root[data-ec-preset], printed later) still wins for the accent triplet, container width, grid density,
 * font pair and radius; no .dark or .light classes; none of the names reserved by lint rule R5 (--bg,
 * --surface, --text, --ink, --line, --r, bare shadcn names, the extensions' own prefixes, Tailwind theme
 * names) is declared. Scheme-invariant tokens live in block A only; the band tints of each preset are
 * scheme invariant, so they sit in A and C only.
 *
 * Deviations and settled conflicts, kept on purpose:
 *  - --ke-control and --ts-control are the boards' #8A909A on white (K22, K28, DV1): 3.21:1. Inside the
 *    paper scope they are #838993 (3.25:1 on #F5F6F7), because #8A909A measures 2.97:1 on paper.
 *  - --ec-fg-2 is ink 2 (#3F444C light, #B8BDC6 dark, K28), the kit's secondary text role; Kestrel's meta
 *    text and the table heads (--ts-table-head-fg) read --ke-ink-3.
 *  - --ts-alert-bar-width is 0px (K28): no status-coloured start bar. The kit reads it as the inline-start
 *    border width of joomla-alert and the bridged .alert, so that side prints no border.
 *  - The boards mix accent tints in oklab; the preset files and these blocks use literal sRGB mixes
 *    (DV7). Only the custom accent block mixes at runtime. One exception: Forest's dark mark is a 30%
 *    mix (#345143), because at 32% ink 2 behind the search highlight measures 4.37:1.
 *  - --ts-on-tint is ink (K28): every board draws text on an accent tint in #111316 (the accent appears
 *    on tints only as icons), and INTEGRATIONS.md 1.1 maps it to --ec-fg.
 *  - The custom accent link mixes 65% of the accent toward ink in light and 50% toward the text colour in
 *    dark (DESIGN_SPEC 3.14): mixed 80% and 70% toward white instead, a Cobalt-like custom accent gives
 *    4.29:1 on the dark raised surface and a sky #0EA5E9 gives 3.79:1 on paper. With these, the same
 *    colours give 5.84:1 and 5.25:1 (a very light custom accent still needs checking by eye).
 *  - --ke-accent-hover is a literal per block, and the K knob reads it: the kit default (accent mixed
 *    toward --ec-fg) re-resolves inside the band toward light ink and drops a Vermilion primary
 *    button's hover to 4.21:1 with white text.
 *  - Inside the band the tints become the preset's dark soft and line (accentSoftDark, accentLineDark,
 *    DESIGN_SPEC 3.9), so ink text on a tint stays readable (10.08:1 or better).
 *  - --ec-accent-soft under a custom accent is the TokenCompiler's 12% rgba wash; Kestrel's tints stay
 *    opaque because the custom accent block derives --ke-accent-soft from the fill.
 *  - The phone size block pins the clamp floors (DESIGN_SPEC 4.4), so the phone sizes stay fixed if a
 *    desktop clamp changes.
 *
 * @copyright   Copyright (C) 2026 BulaSikku Technologies Private Limited. All rights reserved.
 * @license     GNU General Public License version 2 or later
 */

/* ==========================================================================
   A. Cobalt (default preset), light (seeded scheme): full colour set and every scheme-invariant token

   Contrast in the light scheme (WCAG 2 ratios of the literal values; text 4.5:1, UI parts 3:1):
     ink #111316 on page / paper                  18.61 / 17.20
     ink 2 #3F444C                                9.80 / 9.06
     ink 3 #5B6270 (meta, help)                   6.13 / 5.67   (4.82 on the hairline: disabled label)
     control border #8A909A                       3.21 on white (#838993 in the paper scope: 3.25 on paper)
     accent text on page / paper / soft           Cobalt 7.81 / 7.21 / 6.75, Vermilion 5.18 / 4.79 / 4.55,
                                                  Forest 7.13 / 6.59 / 6.21, Plum 6.98 / 6.45 / 6.01
     white on accent / on hover                   Cobalt 7.81 / 9.19, Vermilion 5.18 / 6.45,
                                                  Forest 7.13 / 8.39, Plum 6.98 / 8.36
     ink on soft / mark                           16.03 / 14.20 or better
     accent on wash / on hairline (UI parts)      4.35 / 4.07 or better (Vermilion)
     danger, success, warning on page / paper / own soft   6.57 / 6.08 / 5.75, 6.15 / 5.68 / 5.48, 6.33 / 5.85 / 5.81
     message ink on own soft                      danger 9.26, success 8.62, warning 8.09
     white on the danger fill                     6.57
     white on ink / on the ink hover #2A2E35      18.61 / 13.63
     band #0E1013: strong / ink / ink 2 / ink 3   19.05 / 15.95 / 10.10 / 8.06; control #6B7280 3.94
     tone ink on ground / on shape                7.80 / 6.46 or better
   ========================================================================== */

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

    /* ---- L0: Template Studio colour inventory (literal hex: ec-bridge.js reads eight of these) ---- */
    --ec-bg: #FFFFFF; /* --ke-page: page ground */
    --ec-surface: #FFFFFF; /* --ke-raised: fields, cards, menus (DESIGN_SPEC 3.10) */
    --ec-surface-2: #F5F6F7; /* --ke-paper: bands, panels, chips, hover fills */
    --ec-fg: #111316; /* --ke-ink */
    --ec-fg-2: #3F444C; /* --ke-ink-2: the kit role of fg-2 is secondary text (K28); meta and table heads read --ke-ink-3 */
    --ec-border: #E2E4E8; /* --ke-hairline: decorative only, never a control boundary */
    --ec-accent: #1F3FD1; /* fill role; runtime value from presets/cobalt.json accent */
    --ec-accent-fg: #FFFFFF; /* accentFg */
    --ec-accent-soft: #EBEEFB; /* accentSoft, equal to --ke-accent-soft */

    /* ---- L1: neutrals (DESIGN_SPEC 3.3) ---- */
    --ke-page: #FFFFFF; /* page ground, header, cards */
    --ke-paper: #F5F6F7; /* alternate bands, panels, chips, date block, stat tile, member strip and bar */
    --ke-raised: #FFFFFF; /* field fills, toggle buttons, popovers, choice rows */
    --ke-ink: #111316; /* headings, body text, icons, ink buttons */
    --ke-ink-2: #3F444C; /* excerpts, intros, inactive menu items */
    --ke-ink-3: #5B6270; /* meta and help text, placeholders: the lightest text allowed */
    --ke-hairline: #E2E4E8; /* dividers, chip, tile and card borders, progress track */
    --ke-control: #8A909A; /* field, select, textarea, radio and checkbox outlines (K22, DV1) */
    --ke-on-ink: #FFFFFF; /* text on an ink fill: ink button, current page tile, current chip */
    --ke-ink-hover: #2A2E35; /* ink button hover fill */

    /* ---- L1: the band ground of this scheme (DESIGN_SPEC 3.4; band text is scheme invariant, block A) ---- */
    --ke-band: #0E1013; /* footer and offline panel */
    --ke-band-edge: transparent; /* no top edge on a white page */

    /* ---- L1: status (DESIGN_SPEC 3.5; info has no hue: the Notice is ink on --ke-accent-soft) ---- */
    --ke-danger: #B42318; /* error icon, invalid border, error text, destructive fill, required mark */
    --ke-danger-soft: #FDECEA; /* error message fill, invalid halo, Expired badge */
    --ke-danger-line: #F4C7C2; /* decorative border */
    --ke-danger-ink: #7A1A12; /* text inside the error message and badge */
    --ke-on-danger: #FFFFFF; /* text on the destructive fill */
    --ke-success: #12703F;
    --ke-success-soft: #E8F5EE;
    --ke-success-line: #BFE3CD;
    --ke-success-ink: #0E4F2C;
    --ke-warning: #8A5300;
    --ke-warning-soft: #FFF4E0;
    --ke-warning-line: #F5D9A8;
    --ke-warning-ink: #6B4100;

    /* ---- L1: accent family (DESIGN_SPEC 3.6, DV7: literal sRGB mixes over #FFFFFF: 9, 12, 16, 22, 28%) ---- */
    --ke-accent-soft: #EBEEFB; /* info message, Featured badge, toggle on, chosen choice row */
    --ke-accent-wash: #E4E8F9; /* icon discs: badge medallions, notification and step icons */
    --ke-accent-mark: #DBE0F8; /* search highlight behind inherited text */
    --ke-accent-halo: #CED5F5; /* 3px halo around a focused field */
    --ke-accent-line: #C0C9F2; /* tint borders, common medallion ring, toggle on border */
    --ke-accent-hover: #1D38B5; /* primary hover: accent 85% toward #111316 (a literal, so the band scope keeps it) */

    /* ---- L1: placeholder and avatar tones, ground / shape / ink (DESIGN_SPEC 3.7) ---- */
    --ke-slate: #DDE2EA;
    --ke-slate-shape: #C8CFDB;
    --ke-slate-ink: #394151;
    --ke-sand: #E8E1D6;
    --ke-sand-shape: #D8CDBD;
    --ke-sand-ink: #4A4033;
    --ke-sage: #DCE5DE;
    --ke-sage-shape: #C6D4C9;
    --ke-sage-ink: #33463A;
    --ke-rose: #EADCDD;
    --ke-rose-shape: #DCC6C8;
    --ke-rose-ink: #4D3638;
    /* Media Manager tints: ink at 3 to 50% on --ec-surface (literal: the surface is fixed in a block) */
    --ke-media-tint-3: #F8F8F8;
    --ke-media-tint-5: #F3F3F3;
    --ke-media-tint-7: #EEEEEF;
    --ke-media-tint-10: #E7E7E8;
    --ke-media-tint-40: #A0A1A2;
    --ke-media-tint-50: #88898B;

    /* ---- L2: shared semantic layer (read by every kit file; literal per block, DESIGN_SPEC 3.11) ---- */
    --ts-link: #1F3FD1; /* accent text: links, eyebrows, indexes, active tab text */
    --ts-link-hover: #111316; /* links turn ink on hover */
    --ts-focus: #1F3FD1;
    --ts-focus-gap: transparent;
    --ts-control: #8A909A;
    --ts-signal: #1F3FD1; /* tab underline, progress fill, active marks */
    --ts-tint: #EBEEFB;
    --ts-on-tint: #111316; /* ink on the tint, as every board draws it (see the header) */
    --ts-success: #12703F;
    --ts-success-bg: #E8F5EE;
    --ts-danger: #B42318;
    --ts-danger-bg: #FDECEA;
    --ts-warning: #8A5300;
    --ts-warning-bg: #FFF4E0;
    --ts-info: #1F3FD1;
    --ts-info-bg: #EBEEFB;
    --ts-scrim: rgba(14, 16, 19, 0.56);
    --ts-overlay-shadow: 0 18px 40px -18px rgba(17, 19, 22, 0.35); /* account menu, dropdowns, dialogs (Header board) */

    /* ---- L2: rgb twins (literal triplets of this block) ---- */
    --ts-bg-rgb: 255, 255, 255;
    --ts-fg-rgb: 17, 19, 22;
    --ts-accent-rgb: 31, 63, 209;
    --ts-link-rgb: 31, 63, 209;
    --ts-link-hover-rgb: 17, 19, 22;
    --ts-success-rgb: 18, 112, 63;
    --ts-danger-rgb: 180, 35, 24;
    --ts-warning-rgb: 138, 83, 0;
    --ts-info-rgb: 31, 63, 209;
    --ts-fg-2-rgb: 63, 68, 76;
    --ts-surface-rgb: 255, 255, 255;
    --ts-surface-2-rgb: 245, 246, 247;
    --ke-band-rgb: 14, 16, 19;

    /* ---- K: check, radio, indeterminate and switch marks on this scheme's accent fill ---- */
    --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);

    /* ---- L1: tints inside the band (scheme invariant: A and C only; the preset's dark soft and line) ---- */
    --ke-band-accent-soft: #2E3447; /* accentSoftDark */
    --ke-band-accent-line: #4C5578; /* accentLineDark */

    /* ---- L1: band text (scheme invariant; DESIGN_SPEC 3.4) ---- */
    --ke-band-strong: #FFFFFF; /* wordmark and display headline on the band */
    --ke-band-ink: #E9EBEE; /* band text and links */
    --ke-band-ink-2: #B8BDC6; /* blurb, offline lede */
    --ke-band-ink-3: #A3A9B3; /* column headings, bottom bar, labels */
    --ke-band-line: #2A2E35; /* bottom bar rule, dividers */

    /* ---- L0: shape, type, layout and motion (scheme invariant) ---- */
    --ec-radius: 8px; /* cards, panels, messages, overlays */
    --ec-btn-radius: 8px; /* buttons, fields, pagination tiles, toggles (K22) */
    --ec-img-radius: 6px; /* images and placeholders */
    --ec-shadow: none; /* flat: hairlines and 2px ink rules, no resting shadow */
    --ec-font-display: 'Bricolage Grotesque', 'Bricolage Grotesque Fallback', 'Helvetica Neue', Arial, sans-serif;
    --ec-font-body: 'Geist', 'Geist Fallback', system-ui, 'Segoe UI', sans-serif;
    --ec-disp-weight: 700;
    --ec-disp-style: normal;
    --ec-disp-tracking: -0.03em;
    --ec-disp-transform: none;
    --ec-cw: 1240px; /* layout.width.boxed (K7); the library re-emits it */
    --ec-gut: clamp(1rem, 4vw, 3rem); /* the boards' clamp(16px, 4vw, 48px) */
    --ec-sect-y: clamp(3.5rem, 2.571rem + 3.81vw, 6rem); /* 56 at 390, 96 at 1440: page end, Studio Pages sections */
    --ec-grid: 3; /* card density (seed layout.gridDensity 3), never the 12-column layout */
    --ec-grid-gap: 2rem; /* 32px column gap of the card grids */
    --ec-dur-1: 150ms; /* colour and border hovers (the boards' 0.15s) */
    --ec-dur-2: 200ms; /* menus, mega panels, search band */
    --ec-dur-3: 300ms; /* drawer, progress fills */
    --ec-ease: cubic-bezier(0.2, 0, 0, 1);

    /* ---- L1: type scale (DESIGN_SPEC 4.2; px at 1440 and at 390 in the comments) ---- */
    --ke-t-display: clamp(2.75rem, 5.6vw, 5.25rem); /* 84 and 44: article h1 */
    --ke-t-lead: clamp(2.5rem, 4.6vw, 4rem); /* 64 and 40: home lead title, the stacked lead (DV29) */
    --ke-t-page: clamp(2.5rem, 5vw, 4.5rem); /* 72 and 40: blog, categories, archive, search, tags, contact, error */
    --ke-t-auth: clamp(2.25rem, 4.4vw, 3.75rem); /* 60 and 36: account pages, ArticleEdit */
    --ke-t-app: clamp(2.25rem, 4.4vw, 3.5rem); /* 56 and 36: Sociable, Rewardify and Surveys page heads */
    --ke-t-offline: clamp(2.75rem, 6vw, 5.5rem); /* 88 and 44: offline headline */
    --ke-t-code: clamp(7.5rem, 18vw, 15rem); /* 240 and 120: error code */
    --ke-t-feature: clamp(1.875rem, 3.4vw, 2.75rem); /* 44 and 30: lead card titles (DV27) */
    --ke-t-band: 3rem; /* 48: band head, leaderboard numerals */
    --ke-t-h2: 1.875rem; /* 30: section titles (rule head) */
    --ke-t-quote: 1.875rem; /* 30: pull quote */
    --ke-t-prose-h2: 1.75rem; /* 28: article body h2 */
    --ke-t-panel: 1.625rem; /* 26: panel and form section titles */
    --ke-t-h3: 1.4375rem; /* 23: card titles */
    --ke-t-standfirst: 1.375rem; /* 22: article standfirst */
    --ke-t-list: 1.3125rem; /* 21: ranked list and event row titles, article h3 */
    --ke-t-dek: 1.25rem; /* 20: home lead dek */
    --ke-t-intro: 1.1875rem; /* 19: page intros */
    --ke-t-article: 1.1875rem; /* 19: article body */
    --ke-t-lede: 1.0625rem; /* 17: auth and band intros */
    --ke-t-body: 1rem; /* 16: default, forms, module text */
    --ke-t-ui: 0.9375rem; /* 15: buttons, navigation, excerpts */
    --ke-t-label: 0.875rem; /* 14: form labels, chips */
    --ke-t-help: 0.8125rem; /* 13: help text */
    --ke-t-eyebrow: 0.75rem; /* 12 mono: eyebrows, category and module labels */
    --ke-t-meta: 0.75rem; /* 12 mono: bylines, dates, counters */
    --ke-t-index: 0.8125rem; /* 13 mono: section index */
    --ke-t-micro: 0.6875rem; /* 11 mono: badges, date block month and weekday */
    /* board sizes DESIGN_SPEC gives in prose (5.6, 7.10, 7.12, 7.17) and the Surveys result figure */
    --ke-t-brand: 1.5rem; /* 24: header wordmark */
    --ke-t-brand-s: 1.375rem; /* 22: footer, offline and phone wordmark */
    --ke-t-num: 2.75rem; /* 44: rank numerals, Rewardify level name */
    --ke-t-stat: 2.25rem; /* 36: stat tile values */
    --ke-t-num-l: 4rem; /* 64: survey result figure (SurveyResults, section 6 skin) */
    --ke-t-teaser: 1.375rem; /* 22: search result and archive titles */
    --ke-t-row: 1.125rem; /* 18: table title cells */
    --ke-lh-display: 0.96;
    --ke-lh-page: 1; /* page, auth, app, band */
    --ke-lh-feature: 1.05;
    --ke-lh-h2: 1.1;
    --ke-lh-panel: 1.15; /* panel, prose h2 */
    --ke-lh-h3: 1.2;
    --ke-lh-list: 1.25; /* list, quote */
    --ke-lh-label: 1.3; /* label, eyebrow */
    --ke-lh-help: 1.45; /* help, standfirst */
    --ke-lh-ui: 1.5; /* ui, dek */
    --ke-lh-intro: 1.55;
    --ke-lh-body: 1.6; /* body, lede */
    --ke-lh-article: 1.7;
    --ke-w-display: 700; /* display and page titles */
    --ke-w-h2: 650; /* section, prose h2 and panel titles */
    --ke-w-h3: 600; /* card, list and quote titles */
    --ke-w-code: 800; /* the error code */
    --ke-track-display: -0.035em; /* display, offline */
    --ke-track-page: -0.03em; /* page, auth, app, band */
    --ke-track-feature: -0.025em; /* feature, wordmark */
    --ke-track-h2: -0.02em; /* section, prose h2, panel */
    --ke-track-h3: -0.015em; /* card titles, quote */
    --ke-track-list: -0.01em;
    --ke-track-code: -0.05em;
    --ke-track-eyebrow: 0.08em; /* mono uppercase eyebrows and module heads */
    --ke-track-index: 0.06em; /* mono section index, badges, breadcrumbs */
    --ke-track-meta: 0.04em; /* mono meta lines */
    --ke-measure: 42.5rem; /* 680: article column, fixed so a font swap cannot reflow it */

    /* ---- L1: space (DESIGN_SPEC 5.1; components keep their own board values, 5.1 note) ---- */
    --ke-s-1: 0.25rem; /* 4 */
    --ke-s-2: 0.5rem; /* 8 */
    --ke-s-3: 0.75rem; /* 12 */
    --ke-s-4: 1rem; /* 16 */
    --ke-s-5: 1.5rem; /* 24 */
    --ke-s-6: 2rem; /* 32 */
    --ke-s-7: 3rem; /* 48 */
    --ke-s-8: 4rem; /* 64 */
    --ke-page-top: 2.5rem; /* 40: header or member bar to the first row of an inner page */
    --ke-row-gap: clamp(3rem, 2.071rem + 3.81vw, 5.5rem); /* 48 at 390 to 88 at 1440: between rows */
    --ke-band-pad: clamp(3rem, 2.443rem + 2.286vw, 4.5rem); /* 48 to 72: paper band padding */
    --ke-card-min: 18.75rem; /* 300: smallest teaser card column */

    /* ---- L1: sizes, radii and focus (DESIGN_SPEC 6, 7; K22) ---- */
    --ke-control-h: 3rem; /* 48: fields and buttons */
    --ke-control-h-sm: 2.75rem; /* 44: compact and icon buttons, pagination tiles, the touch floor */
    --ke-chip-h: 2.25rem; /* 36: chips */
    --ke-badge-h: 1.5rem; /* 24: mono badges */
    --ke-menu-w: 16.5rem; /* 264: account menu */
    --ke-focus-offset: 3px; /* K22: 2px ring, 3px offset */
    --ke-halo-w: 3px; /* tint halo around a focused or invalid field */
    --ke-r-sm: 6px; /* menu items, close buttons, inline notices, password toggle */
    --ke-r-xs: 4px; /* badges */
    --ke-pill: 999px; /* chips, points pill, avatar menu button, progress tracks, count badges */

    /* ---- L2: shared, scheme invariant ---- */
    --ts-font-mono: 'Geist Mono', 'Geist Mono Fallback', ui-monospace, 'Cascadia Code', Consolas, monospace;
    --ts-z-scrim: 1005; /* drawer scrim; above Leaflet (400 to 1000) */
    --ts-z-header: 1010; /* sticky header; the drawer and mega panels live inside it */
    --ts-z-dropdown: 1020; /* template dropdowns and the account menu */
    --ts-z-toast: 1100; /* below the EasyCommerce cart (1200 to 1300) and app dialogs (10000 and up) */
    --ts-sticky-offset: 0px; /* template.js writes the sticky header height here */
}

/* ==========================================================================
   B. Cobalt, dark (DECISIONS K5, DESIGN_SPEC 3.8): full colour set. Also serves unknown preset slugs and
   doubles as Cobalt's D block. K5 fixes the ground, the surface #16191E (--ke-paper), the raised surface
   #1E2229 (--ke-raised), the three text colours, the hairline and the control border; the rest is
   DESIGN_SPEC 3.8's derivation. Measured pairs (text 4.5:1, UI 3:1):
     text #E9EBEE on page #0E1013 / paper #16191E / raised #1E2229       15.95 / 14.75 / 13.36
     ink 2 #B8BDC6 on raised                                              8.46
     ink 3 #A3A9B3                                                        8.06 / 7.45 / 6.75 (5.77 on the hairline)
     control border #6B7280                                               3.94 / 3.64 / 3.30
     dark accent text on page / paper / raised                            Cobalt 9.15 / 8.46 / 7.67, Vermilion 9.15 / 8.46 / 7.66,
                                                                          Forest 10.54 / 9.74 / 8.82, Plum 9.57 / 8.85 / 8.02
     dark accent on soft / accentFgDark on the accent                     5.94 (Cobalt) / 7.96 (Vermilion) or better
     text on soft / on mark                                               10.08 / 6.91 or better
     danger #F97A6B, success #4FC285, warning #F0B34E on page / paper / raised / own soft
                                                                          7.28 / 6.73 / 6.10 / 6.11, 8.52 / 7.88 / 7.13 / 6.57,
                                                                          10.22 / 9.45 / 8.56 / 7.98
     message ink on own soft                                              11.76, 11.53, 11.62
     #2A0A06 on the danger fill / page on an ink fill / on the ink hover  7.01 / 15.95 / 19.05
     band #08090B: strong / ink / ink 2 / ink 3 / control                 19.92 / 16.68 / 10.56 / 8.43 / 4.12
     tone ink on ground / on shape                                        8.70 / 7.22 or better
   ========================================================================== */

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

    /* ---- L0: Template Studio colour inventory (literal hex: ec-bridge.js reads eight of these) ---- */
    --ec-bg: #0E1013; /* --ke-page: page ground */
    --ec-surface: #1E2229; /* --ke-raised: fields, cards, menus (DESIGN_SPEC 3.10) */
    --ec-surface-2: #16191E; /* --ke-paper: bands, panels, chips, hover fills */
    --ec-fg: #E9EBEE; /* --ke-ink */
    --ec-fg-2: #B8BDC6; /* --ke-ink-2: the kit role of fg-2 is secondary text (K28); meta and table heads read --ke-ink-3 */
    --ec-border: #2A2E35; /* --ke-hairline: decorative only, never a control boundary */
    --ec-accent: #9DB0FF; /* fill role; runtime value from presets/cobalt.json accentDark */
    --ec-accent-fg: #0B1340; /* accentFgDark */
    --ec-accent-soft: #2E3447; /* accentSoftDark, equal to --ke-accent-soft */

    /* ---- L1: neutrals (DESIGN_SPEC 3.3) ---- */
    --ke-page: #0E1013; /* page ground, header, cards */
    --ke-paper: #16191E; /* alternate bands, panels, chips, date block, stat tile, member strip and bar */
    --ke-raised: #1E2229; /* field fills, toggle buttons, popovers, choice rows */
    --ke-ink: #E9EBEE; /* headings, body text, icons, ink buttons */
    --ke-ink-2: #B8BDC6; /* excerpts, intros, inactive menu items */
    --ke-ink-3: #A3A9B3; /* meta and help text, placeholders: the lightest text allowed */
    --ke-hairline: #2A2E35; /* dividers, chip, tile and card borders, progress track */
    --ke-control: #6B7280; /* control border (K5) */
    --ke-on-ink: #0E1013; /* text on an ink fill: ink button, current page tile, current chip */
    --ke-ink-hover: #FFFFFF; /* ink button hover fill */

    /* ---- L1: the band ground of this scheme (DESIGN_SPEC 3.4; band text is scheme invariant, block A) ---- */
    --ke-band: #08090B; /* one step below the dark page */
    --ke-band-edge: #2A2E35; /* top edge so the band still reads on a near-black page */

    /* ---- L1: status (DESIGN_SPEC 3.5; info has no hue: the Notice is ink on --ke-accent-soft) ---- */
    --ke-danger: #F97A6B; /* error icon, invalid border, error text, destructive fill, required mark */
    --ke-danger-soft: #3A1714; /* error message fill, invalid halo, Expired badge */
    --ke-danger-line: #6E2A22; /* decorative border */
    --ke-danger-ink: #FFD3CC; /* text inside the error message and badge */
    --ke-on-danger: #2A0A06; /* text on the destructive fill */
    --ke-success: #4FC285;
    --ke-success-soft: #0F2E1E;
    --ke-success-line: #1F5A3A;
    --ke-success-ink: #C3EED3;
    --ke-warning: #F0B34E;
    --ke-warning-soft: #33250C;
    --ke-warning-line: #6A4A12;
    --ke-warning-ink: #FBE0B0;

    /* ---- L1: accent family (DESIGN_SPEC 3.6, DV7: literal sRGB mixes over #16191E: 18, 24, 32, 40, 40%) ---- */
    --ke-accent-soft: #2E3447; /* info message, Featured badge, toggle on, chosen choice row */
    --ke-accent-wash: #363D54; /* icon discs: badge medallions, notification and step icons */
    --ke-accent-mark: #414966; /* search highlight behind inherited text */
    --ke-accent-halo: #4C5578; /* 3px halo around a focused field */
    --ke-accent-line: #4C5578; /* tint borders, common medallion ring, toggle on border */
    --ke-accent-hover: #A8B9FC; /* primary hover: accent 85% toward #E9EBEE */

    /* ---- L1: placeholder and avatar tones, ground / shape / ink (DESIGN_SPEC 3.7) ---- */
    --ke-slate: #252B36;
    --ke-slate-shape: #303846;
    --ke-slate-ink: #C3CBD8;
    --ke-sand: #2F2A22;
    --ke-sand-shape: #3B342A;
    --ke-sand-ink: #DCCFBC;
    --ke-sage: #232C26;
    --ke-sage-shape: #2D3830;
    --ke-sage-ink: #BED0C3;
    --ke-rose: #312527;
    --ke-rose-shape: #3D2E31;
    --ke-rose-ink: #DEC7CA;
    /* Media Manager tints: ink at 3 to 50% on --ec-surface (literal: the surface is fixed in a block) */
    --ke-media-tint-3: #24282F;
    --ke-media-tint-5: #282C33;
    --ke-media-tint-7: #2C3037;
    --ke-media-tint-10: #32363D;
    --ke-media-tint-40: #6F7278;
    --ke-media-tint-50: #84878C;

    /* ---- L2: shared semantic layer (read by every kit file; literal per block, DESIGN_SPEC 3.11) ---- */
    --ts-link: #9DB0FF; /* accent text: links, eyebrows, indexes, active tab text */
    --ts-link-hover: #E9EBEE; /* links turn ink on hover */
    --ts-focus: #9DB0FF;
    --ts-focus-gap: transparent;
    --ts-control: #6B7280;
    --ts-signal: #9DB0FF; /* tab underline, progress fill, active marks */
    --ts-tint: #2E3447;
    --ts-on-tint: #E9EBEE; /* ink on the tint, as every board draws it (see the header) */
    --ts-success: #4FC285;
    --ts-success-bg: #0F2E1E;
    --ts-danger: #F97A6B;
    --ts-danger-bg: #3A1714;
    --ts-warning: #F0B34E;
    --ts-warning-bg: #33250C;
    --ts-info: #9DB0FF;
    --ts-info-bg: #2E3447;
    --ts-scrim: rgba(0, 0, 0, 0.64);
    --ts-overlay-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.7);

    /* ---- L2: rgb twins (literal triplets of this block) ---- */
    --ts-bg-rgb: 14, 16, 19;
    --ts-fg-rgb: 233, 235, 238;
    --ts-accent-rgb: 157, 176, 255;
    --ts-link-rgb: 157, 176, 255;
    --ts-link-hover-rgb: 233, 235, 238;
    --ts-success-rgb: 79, 194, 133;
    --ts-danger-rgb: 249, 122, 107;
    --ts-warning-rgb: 240, 179, 78;
    --ts-info-rgb: 157, 176, 255;
    --ts-fg-2-rgb: 184, 189, 198;
    --ts-surface-rgb: 30, 34, 41;
    --ts-surface-2-rgb: 22, 25, 30;
    --ke-band-rgb: 8, 9, 11;

    /* ---- K: check, radio, indeterminate and switch marks on this scheme's accent fill ---- */
    --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. Vermilion (vermilion): light, then dark. Full colour sets.
   ========================================================================== */

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

    /* ---- L0: Template Studio colour inventory (literal hex: ec-bridge.js reads eight of these) ---- */
    --ec-bg: #FFFFFF;
    --ec-surface: #FFFFFF;
    --ec-surface-2: #F5F6F7;
    --ec-fg: #111316;
    --ec-fg-2: #3F444C;
    --ec-border: #E2E4E8;
    --ec-accent: #C2410C;
    --ec-accent-fg: #FFFFFF;
    --ec-accent-soft: #FAEEE9;

    /* ---- L1: neutrals (DESIGN_SPEC 3.3) ---- */
    --ke-page: #FFFFFF;
    --ke-paper: #F5F6F7;
    --ke-raised: #FFFFFF;
    --ke-ink: #111316;
    --ke-ink-2: #3F444C;
    --ke-ink-3: #5B6270;
    --ke-hairline: #E2E4E8;
    --ke-control: #8A909A;
    --ke-on-ink: #FFFFFF;
    --ke-ink-hover: #2A2E35;

    /* ---- L1: the band ground of this scheme (DESIGN_SPEC 3.4; band text is scheme invariant, block A) ---- */
    --ke-band: #0E1013;
    --ke-band-edge: transparent;

    /* ---- L1: status (DESIGN_SPEC 3.5; info has no hue: the Notice is ink on --ke-accent-soft) ---- */
    --ke-danger: #B42318;
    --ke-danger-soft: #FDECEA;
    --ke-danger-line: #F4C7C2;
    --ke-danger-ink: #7A1A12;
    --ke-on-danger: #FFFFFF;
    --ke-success: #12703F;
    --ke-success-soft: #E8F5EE;
    --ke-success-line: #BFE3CD;
    --ke-success-ink: #0E4F2C;
    --ke-warning: #8A5300;
    --ke-warning-soft: #FFF4E0;
    --ke-warning-line: #F5D9A8;
    --ke-warning-ink: #6B4100;

    /* ---- L1: accent family (DESIGN_SPEC 3.6, DV7: literal sRGB mixes over #FFFFFF: 9, 12, 16, 22, 28%) ---- */
    --ke-accent-soft: #FAEEE9;
    --ke-accent-wash: #F8E8E2;
    --ke-accent-mark: #F5E1D8;
    --ke-accent-halo: #F2D5CA;
    --ke-accent-line: #EECABB;
    --ke-accent-hover: #A73A0E;

    /* ---- L1: placeholder and avatar tones, ground / shape / ink (DESIGN_SPEC 3.7) ---- */
    --ke-slate: #DDE2EA;
    --ke-slate-shape: #C8CFDB;
    --ke-slate-ink: #394151;
    --ke-sand: #E8E1D6;
    --ke-sand-shape: #D8CDBD;
    --ke-sand-ink: #4A4033;
    --ke-sage: #DCE5DE;
    --ke-sage-shape: #C6D4C9;
    --ke-sage-ink: #33463A;
    --ke-rose: #EADCDD;
    --ke-rose-shape: #DCC6C8;
    --ke-rose-ink: #4D3638;
    /* Media Manager tints: ink at 3 to 50% on --ec-surface (literal: the surface is fixed in a block) */
    --ke-media-tint-3: #F8F8F8;
    --ke-media-tint-5: #F3F3F3;
    --ke-media-tint-7: #EEEEEF;
    --ke-media-tint-10: #E7E7E8;
    --ke-media-tint-40: #A0A1A2;
    --ke-media-tint-50: #88898B;

    /* ---- L2: shared semantic layer (read by every kit file; literal per block, DESIGN_SPEC 3.11) ---- */
    --ts-link: #C2410C;
    --ts-link-hover: #111316;
    --ts-focus: #C2410C;
    --ts-focus-gap: transparent;
    --ts-control: #8A909A;
    --ts-signal: #C2410C;
    --ts-tint: #FAEEE9;
    --ts-on-tint: #111316;
    --ts-success: #12703F;
    --ts-success-bg: #E8F5EE;
    --ts-danger: #B42318;
    --ts-danger-bg: #FDECEA;
    --ts-warning: #8A5300;
    --ts-warning-bg: #FFF4E0;
    --ts-info: #C2410C;
    --ts-info-bg: #FAEEE9;
    --ts-scrim: rgba(14, 16, 19, 0.56);
    --ts-overlay-shadow: 0 18px 40px -18px rgba(17, 19, 22, 0.35);

    /* ---- L2: rgb twins (literal triplets of this block) ---- */
    --ts-bg-rgb: 255, 255, 255;
    --ts-fg-rgb: 17, 19, 22;
    --ts-accent-rgb: 194, 65, 12;
    --ts-link-rgb: 194, 65, 12;
    --ts-link-hover-rgb: 17, 19, 22;
    --ts-success-rgb: 18, 112, 63;
    --ts-danger-rgb: 180, 35, 24;
    --ts-warning-rgb: 138, 83, 0;
    --ts-info-rgb: 194, 65, 12;
    --ts-fg-2-rgb: 63, 68, 76;
    --ts-surface-rgb: 255, 255, 255;
    --ts-surface-2-rgb: 245, 246, 247;
    --ke-band-rgb: 14, 16, 19;

    /* ---- K: check, radio, indeterminate and switch marks on this scheme's accent fill ---- */
    --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);

    /* ---- L1: tints inside the band (scheme invariant: A and C only; the preset's dark soft and line) ---- */
    --ke-band-accent-soft: #40302C;
    --ke-band-accent-line: #734D3D;
}

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

    /* ---- L0: Template Studio colour inventory (literal hex: ec-bridge.js reads eight of these) ---- */
    --ec-bg: #0E1013;
    --ec-surface: #1E2229;
    --ec-surface-2: #16191E;
    --ec-fg: #E9EBEE;
    --ec-fg-2: #B8BDC6;
    --ec-border: #2A2E35;
    --ec-accent: #FF9A6B;
    --ec-accent-fg: #3A1200;
    --ec-accent-soft: #40302C;

    /* ---- L1: neutrals (DESIGN_SPEC 3.3) ---- */
    --ke-page: #0E1013;
    --ke-paper: #16191E;
    --ke-raised: #1E2229;
    --ke-ink: #E9EBEE;
    --ke-ink-2: #B8BDC6;
    --ke-ink-3: #A3A9B3;
    --ke-hairline: #2A2E35;
    --ke-control: #6B7280;
    --ke-on-ink: #0E1013;
    --ke-ink-hover: #FFFFFF;

    /* ---- L1: the band ground of this scheme (DESIGN_SPEC 3.4; band text is scheme invariant, block A) ---- */
    --ke-band: #08090B;
    --ke-band-edge: #2A2E35;

    /* ---- L1: status (DESIGN_SPEC 3.5; info has no hue: the Notice is ink on --ke-accent-soft) ---- */
    --ke-danger: #F97A6B;
    --ke-danger-soft: #3A1714;
    --ke-danger-line: #6E2A22;
    --ke-danger-ink: #FFD3CC;
    --ke-on-danger: #2A0A06;
    --ke-success: #4FC285;
    --ke-success-soft: #0F2E1E;
    --ke-success-line: #1F5A3A;
    --ke-success-ink: #C3EED3;
    --ke-warning: #F0B34E;
    --ke-warning-soft: #33250C;
    --ke-warning-line: #6A4A12;
    --ke-warning-ink: #FBE0B0;

    /* ---- L1: accent family (DESIGN_SPEC 3.6, DV7: literal sRGB mixes over #16191E: 18, 24, 32, 40, 40%) ---- */
    --ke-accent-soft: #40302C;
    --ke-accent-wash: #4E3830;
    --ke-accent-mark: #614237;
    --ke-accent-halo: #734D3D;
    --ke-accent-line: #734D3D;
    --ke-accent-hover: #FCA67F;

    /* ---- L1: placeholder and avatar tones, ground / shape / ink (DESIGN_SPEC 3.7) ---- */
    --ke-slate: #252B36;
    --ke-slate-shape: #303846;
    --ke-slate-ink: #C3CBD8;
    --ke-sand: #2F2A22;
    --ke-sand-shape: #3B342A;
    --ke-sand-ink: #DCCFBC;
    --ke-sage: #232C26;
    --ke-sage-shape: #2D3830;
    --ke-sage-ink: #BED0C3;
    --ke-rose: #312527;
    --ke-rose-shape: #3D2E31;
    --ke-rose-ink: #DEC7CA;
    /* Media Manager tints: ink at 3 to 50% on --ec-surface (literal: the surface is fixed in a block) */
    --ke-media-tint-3: #24282F;
    --ke-media-tint-5: #282C33;
    --ke-media-tint-7: #2C3037;
    --ke-media-tint-10: #32363D;
    --ke-media-tint-40: #6F7278;
    --ke-media-tint-50: #84878C;

    /* ---- L2: shared semantic layer (read by every kit file; literal per block, DESIGN_SPEC 3.11) ---- */
    --ts-link: #FF9A6B;
    --ts-link-hover: #E9EBEE;
    --ts-focus: #FF9A6B;
    --ts-focus-gap: transparent;
    --ts-control: #6B7280;
    --ts-signal: #FF9A6B;
    --ts-tint: #40302C;
    --ts-on-tint: #E9EBEE;
    --ts-success: #4FC285;
    --ts-success-bg: #0F2E1E;
    --ts-danger: #F97A6B;
    --ts-danger-bg: #3A1714;
    --ts-warning: #F0B34E;
    --ts-warning-bg: #33250C;
    --ts-info: #FF9A6B;
    --ts-info-bg: #40302C;
    --ts-scrim: rgba(0, 0, 0, 0.64);
    --ts-overlay-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.7);

    /* ---- L2: rgb twins (literal triplets of this block) ---- */
    --ts-bg-rgb: 14, 16, 19;
    --ts-fg-rgb: 233, 235, 238;
    --ts-accent-rgb: 255, 154, 107;
    --ts-link-rgb: 255, 154, 107;
    --ts-link-hover-rgb: 233, 235, 238;
    --ts-success-rgb: 79, 194, 133;
    --ts-danger-rgb: 249, 122, 107;
    --ts-warning-rgb: 240, 179, 78;
    --ts-info-rgb: 255, 154, 107;
    --ts-fg-2-rgb: 184, 189, 198;
    --ts-surface-rgb: 30, 34, 41;
    --ts-surface-2-rgb: 22, 25, 30;
    --ke-band-rgb: 8, 9, 11;

    /* ---- K: check, radio, indeterminate and switch marks on this scheme's accent fill ---- */
    --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. Forest (forest): light, then dark. Full colour sets.
   ========================================================================== */

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

    /* ---- L0: Template Studio colour inventory (literal hex: ec-bridge.js reads eight of these) ---- */
    --ec-bg: #FFFFFF;
    --ec-surface: #FFFFFF;
    --ec-surface-2: #F5F6F7;
    --ec-fg: #111316;
    --ec-fg-2: #3F444C;
    --ec-border: #E2E4E8;
    --ec-accent: #166534;
    --ec-accent-fg: #FFFFFF;
    --ec-accent-soft: #EAF1ED;

    /* ---- L1: neutrals (DESIGN_SPEC 3.3) ---- */
    --ke-page: #FFFFFF;
    --ke-paper: #F5F6F7;
    --ke-raised: #FFFFFF;
    --ke-ink: #111316;
    --ke-ink-2: #3F444C;
    --ke-ink-3: #5B6270;
    --ke-hairline: #E2E4E8;
    --ke-control: #8A909A;
    --ke-on-ink: #FFFFFF;
    --ke-ink-hover: #2A2E35;

    /* ---- L1: the band ground of this scheme (DESIGN_SPEC 3.4; band text is scheme invariant, block A) ---- */
    --ke-band: #0E1013;
    --ke-band-edge: transparent;

    /* ---- L1: status (DESIGN_SPEC 3.5; info has no hue: the Notice is ink on --ke-accent-soft) ---- */
    --ke-danger: #B42318;
    --ke-danger-soft: #FDECEA;
    --ke-danger-line: #F4C7C2;
    --ke-danger-ink: #7A1A12;
    --ke-on-danger: #FFFFFF;
    --ke-success: #12703F;
    --ke-success-soft: #E8F5EE;
    --ke-success-line: #BFE3CD;
    --ke-success-ink: #0E4F2C;
    --ke-warning: #8A5300;
    --ke-warning-soft: #FFF4E0;
    --ke-warning-line: #F5D9A8;
    --ke-warning-ink: #6B4100;

    /* ---- L1: accent family (DESIGN_SPEC 3.6, DV7: literal sRGB mixes over #FFFFFF: 9, 12, 16, 22, 28%) ---- */
    --ke-accent-soft: #EAF1ED;
    --ke-accent-wash: #E3EDE7;
    --ke-accent-mark: #DAE6DF;
    --ke-accent-halo: #CCDDD2;
    --ke-accent-line: #BED4C6;
    --ke-accent-hover: #155930;

    /* ---- L1: placeholder and avatar tones, ground / shape / ink (DESIGN_SPEC 3.7) ---- */
    --ke-slate: #DDE2EA;
    --ke-slate-shape: #C8CFDB;
    --ke-slate-ink: #394151;
    --ke-sand: #E8E1D6;
    --ke-sand-shape: #D8CDBD;
    --ke-sand-ink: #4A4033;
    --ke-sage: #DCE5DE;
    --ke-sage-shape: #C6D4C9;
    --ke-sage-ink: #33463A;
    --ke-rose: #EADCDD;
    --ke-rose-shape: #DCC6C8;
    --ke-rose-ink: #4D3638;
    /* Media Manager tints: ink at 3 to 50% on --ec-surface (literal: the surface is fixed in a block) */
    --ke-media-tint-3: #F8F8F8;
    --ke-media-tint-5: #F3F3F3;
    --ke-media-tint-7: #EEEEEF;
    --ke-media-tint-10: #E7E7E8;
    --ke-media-tint-40: #A0A1A2;
    --ke-media-tint-50: #88898B;

    /* ---- L2: shared semantic layer (read by every kit file; literal per block, DESIGN_SPEC 3.11) ---- */
    --ts-link: #166534;
    --ts-link-hover: #111316;
    --ts-focus: #166534;
    --ts-focus-gap: transparent;
    --ts-control: #8A909A;
    --ts-signal: #166534;
    --ts-tint: #EAF1ED;
    --ts-on-tint: #111316;
    --ts-success: #12703F;
    --ts-success-bg: #E8F5EE;
    --ts-danger: #B42318;
    --ts-danger-bg: #FDECEA;
    --ts-warning: #8A5300;
    --ts-warning-bg: #FFF4E0;
    --ts-info: #166534;
    --ts-info-bg: #EAF1ED;
    --ts-scrim: rgba(14, 16, 19, 0.56);
    --ts-overlay-shadow: 0 18px 40px -18px rgba(17, 19, 22, 0.35);

    /* ---- L2: rgb twins (literal triplets of this block) ---- */
    --ts-bg-rgb: 255, 255, 255;
    --ts-fg-rgb: 17, 19, 22;
    --ts-accent-rgb: 22, 101, 52;
    --ts-link-rgb: 22, 101, 52;
    --ts-link-hover-rgb: 17, 19, 22;
    --ts-success-rgb: 18, 112, 63;
    --ts-danger-rgb: 180, 35, 24;
    --ts-warning-rgb: 138, 83, 0;
    --ts-info-rgb: 22, 101, 52;
    --ts-fg-2-rgb: 63, 68, 76;
    --ts-surface-rgb: 255, 255, 255;
    --ts-surface-2-rgb: 245, 246, 247;
    --ke-band-rgb: 14, 16, 19;

    /* ---- K: check, radio, indeterminate and switch marks on this scheme's accent fill ---- */
    --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);

    /* ---- L1: tints inside the band (scheme invariant: A and C only; the preset's dark soft and line) ---- */
    --ke-band-accent-soft: #283A34;
    --ke-band-accent-line: #3E6350;
}

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

    /* ---- L0: Template Studio colour inventory (literal hex: ec-bridge.js reads eight of these) ---- */
    --ec-bg: #0E1013;
    --ec-surface: #1E2229;
    --ec-surface-2: #16191E;
    --ec-fg: #E9EBEE;
    --ec-fg-2: #B8BDC6;
    --ec-border: #2A2E35;
    --ec-accent: #7AD39A;
    --ec-accent-fg: #052A14;
    --ec-accent-soft: #283A34;

    /* ---- L1: neutrals (DESIGN_SPEC 3.3) ---- */
    --ke-page: #0E1013;
    --ke-paper: #16191E;
    --ke-raised: #1E2229;
    --ke-ink: #E9EBEE;
    --ke-ink-2: #B8BDC6;
    --ke-ink-3: #A3A9B3;
    --ke-hairline: #2A2E35;
    --ke-control: #6B7280;
    --ke-on-ink: #0E1013;
    --ke-ink-hover: #FFFFFF;

    /* ---- L1: the band ground of this scheme (DESIGN_SPEC 3.4; band text is scheme invariant, block A) ---- */
    --ke-band: #08090B;
    --ke-band-edge: #2A2E35;

    /* ---- L1: status (DESIGN_SPEC 3.5; info has no hue: the Notice is ink on --ke-accent-soft) ---- */
    --ke-danger: #F97A6B;
    --ke-danger-soft: #3A1714;
    --ke-danger-line: #6E2A22;
    --ke-danger-ink: #FFD3CC;
    --ke-on-danger: #2A0A06;
    --ke-success: #4FC285;
    --ke-success-soft: #0F2E1E;
    --ke-success-line: #1F5A3A;
    --ke-success-ink: #C3EED3;
    --ke-warning: #F0B34E;
    --ke-warning-soft: #33250C;
    --ke-warning-line: #6A4A12;
    --ke-warning-ink: #FBE0B0;

    /* ---- L1: accent family (DESIGN_SPEC 3.6, DV7: literal sRGB mixes over #16191E: 18, 24, 32, 40, 40%) ---- */
    --ke-accent-soft: #283A34;
    --ke-accent-wash: #2E463C;
    --ke-accent-mark: #345143; /* 30%, not 32%: ink 2 behind the highlight keeps 4.5:1 (4.37 at 32%) */
    --ke-accent-halo: #3E6350;
    --ke-accent-line: #3E6350;
    --ke-accent-hover: #8BD7A7;

    /* ---- L1: placeholder and avatar tones, ground / shape / ink (DESIGN_SPEC 3.7) ---- */
    --ke-slate: #252B36;
    --ke-slate-shape: #303846;
    --ke-slate-ink: #C3CBD8;
    --ke-sand: #2F2A22;
    --ke-sand-shape: #3B342A;
    --ke-sand-ink: #DCCFBC;
    --ke-sage: #232C26;
    --ke-sage-shape: #2D3830;
    --ke-sage-ink: #BED0C3;
    --ke-rose: #312527;
    --ke-rose-shape: #3D2E31;
    --ke-rose-ink: #DEC7CA;
    /* Media Manager tints: ink at 3 to 50% on --ec-surface (literal: the surface is fixed in a block) */
    --ke-media-tint-3: #24282F;
    --ke-media-tint-5: #282C33;
    --ke-media-tint-7: #2C3037;
    --ke-media-tint-10: #32363D;
    --ke-media-tint-40: #6F7278;
    --ke-media-tint-50: #84878C;

    /* ---- L2: shared semantic layer (read by every kit file; literal per block, DESIGN_SPEC 3.11) ---- */
    --ts-link: #7AD39A;
    --ts-link-hover: #E9EBEE;
    --ts-focus: #7AD39A;
    --ts-focus-gap: transparent;
    --ts-control: #6B7280;
    --ts-signal: #7AD39A;
    --ts-tint: #283A34;
    --ts-on-tint: #E9EBEE;
    --ts-success: #4FC285;
    --ts-success-bg: #0F2E1E;
    --ts-danger: #F97A6B;
    --ts-danger-bg: #3A1714;
    --ts-warning: #F0B34E;
    --ts-warning-bg: #33250C;
    --ts-info: #7AD39A;
    --ts-info-bg: #283A34;
    --ts-scrim: rgba(0, 0, 0, 0.64);
    --ts-overlay-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.7);

    /* ---- L2: rgb twins (literal triplets of this block) ---- */
    --ts-bg-rgb: 14, 16, 19;
    --ts-fg-rgb: 233, 235, 238;
    --ts-accent-rgb: 122, 211, 154;
    --ts-link-rgb: 122, 211, 154;
    --ts-link-hover-rgb: 233, 235, 238;
    --ts-success-rgb: 79, 194, 133;
    --ts-danger-rgb: 249, 122, 107;
    --ts-warning-rgb: 240, 179, 78;
    --ts-info-rgb: 122, 211, 154;
    --ts-fg-2-rgb: 184, 189, 198;
    --ts-surface-rgb: 30, 34, 41;
    --ts-surface-2-rgb: 22, 25, 30;
    --ke-band-rgb: 8, 9, 11;

    /* ---- K: check, radio, indeterminate and switch marks on this scheme's accent fill ---- */
    --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. Plum (plum): light, then dark. Full colour sets.
   ========================================================================== */

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

    /* ---- L0: Template Studio colour inventory (literal hex: ec-bridge.js reads eight of these) ---- */
    --ec-bg: #FFFFFF;
    --ec-surface: #FFFFFF;
    --ec-surface-2: #F5F6F7;
    --ec-fg: #111316;
    --ec-fg-2: #3F444C;
    --ec-border: #E2E4E8;
    --ec-accent: #7E22CE;
    --ec-accent-fg: #FFFFFF;
    --ec-accent-soft: #F3EBFB;

    /* ---- L1: neutrals (DESIGN_SPEC 3.3) ---- */
    --ke-page: #FFFFFF;
    --ke-paper: #F5F6F7;
    --ke-raised: #FFFFFF;
    --ke-ink: #111316;
    --ke-ink-2: #3F444C;
    --ke-ink-3: #5B6270;
    --ke-hairline: #E2E4E8;
    --ke-control: #8A909A;
    --ke-on-ink: #FFFFFF;
    --ke-ink-hover: #2A2E35;

    /* ---- L1: the band ground of this scheme (DESIGN_SPEC 3.4; band text is scheme invariant, block A) ---- */
    --ke-band: #0E1013;
    --ke-band-edge: transparent;

    /* ---- L1: status (DESIGN_SPEC 3.5; info has no hue: the Notice is ink on --ke-accent-soft) ---- */
    --ke-danger: #B42318;
    --ke-danger-soft: #FDECEA;
    --ke-danger-line: #F4C7C2;
    --ke-danger-ink: #7A1A12;
    --ke-on-danger: #FFFFFF;
    --ke-success: #12703F;
    --ke-success-soft: #E8F5EE;
    --ke-success-line: #BFE3CD;
    --ke-success-ink: #0E4F2C;
    --ke-warning: #8A5300;
    --ke-warning-soft: #FFF4E0;
    --ke-warning-line: #F5D9A8;
    --ke-warning-ink: #6B4100;

    /* ---- L1: accent family (DESIGN_SPEC 3.6, DV7: literal sRGB mixes over #FFFFFF: 9, 12, 16, 22, 28%) ---- */
    --ke-accent-soft: #F3EBFB;
    --ke-accent-wash: #F0E4F9;
    --ke-accent-mark: #EADCF7;
    --ke-accent-halo: #E3CEF4;
    --ke-accent-line: #DBC1F1;
    --ke-accent-hover: #6E20B2;

    /* ---- L1: placeholder and avatar tones, ground / shape / ink (DESIGN_SPEC 3.7) ---- */
    --ke-slate: #DDE2EA;
    --ke-slate-shape: #C8CFDB;
    --ke-slate-ink: #394151;
    --ke-sand: #E8E1D6;
    --ke-sand-shape: #D8CDBD;
    --ke-sand-ink: #4A4033;
    --ke-sage: #DCE5DE;
    --ke-sage-shape: #C6D4C9;
    --ke-sage-ink: #33463A;
    --ke-rose: #EADCDD;
    --ke-rose-shape: #DCC6C8;
    --ke-rose-ink: #4D3638;
    /* Media Manager tints: ink at 3 to 50% on --ec-surface (literal: the surface is fixed in a block) */
    --ke-media-tint-3: #F8F8F8;
    --ke-media-tint-5: #F3F3F3;
    --ke-media-tint-7: #EEEEEF;
    --ke-media-tint-10: #E7E7E8;
    --ke-media-tint-40: #A0A1A2;
    --ke-media-tint-50: #88898B;

    /* ---- L2: shared semantic layer (read by every kit file; literal per block, DESIGN_SPEC 3.11) ---- */
    --ts-link: #7E22CE;
    --ts-link-hover: #111316;
    --ts-focus: #7E22CE;
    --ts-focus-gap: transparent;
    --ts-control: #8A909A;
    --ts-signal: #7E22CE;
    --ts-tint: #F3EBFB;
    --ts-on-tint: #111316;
    --ts-success: #12703F;
    --ts-success-bg: #E8F5EE;
    --ts-danger: #B42318;
    --ts-danger-bg: #FDECEA;
    --ts-warning: #8A5300;
    --ts-warning-bg: #FFF4E0;
    --ts-info: #7E22CE;
    --ts-info-bg: #F3EBFB;
    --ts-scrim: rgba(14, 16, 19, 0.56);
    --ts-overlay-shadow: 0 18px 40px -18px rgba(17, 19, 22, 0.35);

    /* ---- L2: rgb twins (literal triplets of this block) ---- */
    --ts-bg-rgb: 255, 255, 255;
    --ts-fg-rgb: 17, 19, 22;
    --ts-accent-rgb: 126, 34, 206;
    --ts-link-rgb: 126, 34, 206;
    --ts-link-hover-rgb: 17, 19, 22;
    --ts-success-rgb: 18, 112, 63;
    --ts-danger-rgb: 180, 35, 24;
    --ts-warning-rgb: 138, 83, 0;
    --ts-info-rgb: 126, 34, 206;
    --ts-fg-2-rgb: 63, 68, 76;
    --ts-surface-rgb: 255, 255, 255;
    --ts-surface-2-rgb: 245, 246, 247;
    --ke-band-rgb: 14, 16, 19;

    /* ---- K: check, radio, indeterminate and switch marks on this scheme's accent fill ---- */
    --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);

    /* ---- L1: tints inside the band (scheme invariant: A and C only; the preset's dark soft and line) ---- */
    --ke-band-accent-soft: #373247;
    --ke-band-accent-line: #605178;
}

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

    /* ---- L0: Template Studio colour inventory (literal hex: ec-bridge.js reads eight of these) ---- */
    --ec-bg: #0E1013;
    --ec-surface: #1E2229;
    --ec-surface-2: #16191E;
    --ec-fg: #E9EBEE;
    --ec-fg-2: #B8BDC6;
    --ec-border: #2A2E35;
    --ec-accent: #CFA6FF;
    --ec-accent-fg: #2A0B4A;
    --ec-accent-soft: #373247;

    /* ---- L1: neutrals (DESIGN_SPEC 3.3) ---- */
    --ke-page: #0E1013;
    --ke-paper: #16191E;
    --ke-raised: #1E2229;
    --ke-ink: #E9EBEE;
    --ke-ink-2: #B8BDC6;
    --ke-ink-3: #A3A9B3;
    --ke-hairline: #2A2E35;
    --ke-control: #6B7280;
    --ke-on-ink: #0E1013;
    --ke-ink-hover: #FFFFFF;

    /* ---- L1: the band ground of this scheme (DESIGN_SPEC 3.4; band text is scheme invariant, block A) ---- */
    --ke-band: #08090B;
    --ke-band-edge: #2A2E35;

    /* ---- L1: status (DESIGN_SPEC 3.5; info has no hue: the Notice is ink on --ke-accent-soft) ---- */
    --ke-danger: #F97A6B;
    --ke-danger-soft: #3A1714;
    --ke-danger-line: #6E2A22;
    --ke-danger-ink: #FFD3CC;
    --ke-on-danger: #2A0A06;
    --ke-success: #4FC285;
    --ke-success-soft: #0F2E1E;
    --ke-success-line: #1F5A3A;
    --ke-success-ink: #C3EED3;
    --ke-warning: #F0B34E;
    --ke-warning-soft: #33250C;
    --ke-warning-line: #6A4A12;
    --ke-warning-ink: #FBE0B0;

    /* ---- L1: accent family (DESIGN_SPEC 3.6, DV7: literal sRGB mixes over #16191E: 18, 24, 32, 40, 40%) ---- */
    --ke-accent-soft: #373247;
    --ke-accent-wash: #423B54;
    --ke-accent-mark: #514666;
    --ke-accent-halo: #605178;
    --ke-accent-line: #605178;
    --ke-accent-hover: #D3B0FC;

    /* ---- L1: placeholder and avatar tones, ground / shape / ink (DESIGN_SPEC 3.7) ---- */
    --ke-slate: #252B36;
    --ke-slate-shape: #303846;
    --ke-slate-ink: #C3CBD8;
    --ke-sand: #2F2A22;
    --ke-sand-shape: #3B342A;
    --ke-sand-ink: #DCCFBC;
    --ke-sage: #232C26;
    --ke-sage-shape: #2D3830;
    --ke-sage-ink: #BED0C3;
    --ke-rose: #312527;
    --ke-rose-shape: #3D2E31;
    --ke-rose-ink: #DEC7CA;
    /* Media Manager tints: ink at 3 to 50% on --ec-surface (literal: the surface is fixed in a block) */
    --ke-media-tint-3: #24282F;
    --ke-media-tint-5: #282C33;
    --ke-media-tint-7: #2C3037;
    --ke-media-tint-10: #32363D;
    --ke-media-tint-40: #6F7278;
    --ke-media-tint-50: #84878C;

    /* ---- L2: shared semantic layer (read by every kit file; literal per block, DESIGN_SPEC 3.11) ---- */
    --ts-link: #CFA6FF;
    --ts-link-hover: #E9EBEE;
    --ts-focus: #CFA6FF;
    --ts-focus-gap: transparent;
    --ts-control: #6B7280;
    --ts-signal: #CFA6FF;
    --ts-tint: #373247;
    --ts-on-tint: #E9EBEE;
    --ts-success: #4FC285;
    --ts-success-bg: #0F2E1E;
    --ts-danger: #F97A6B;
    --ts-danger-bg: #3A1714;
    --ts-warning: #F0B34E;
    --ts-warning-bg: #33250C;
    --ts-info: #CFA6FF;
    --ts-info-bg: #373247;
    --ts-scrim: rgba(0, 0, 0, 0.64);
    --ts-overlay-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.7);

    /* ---- L2: rgb twins (literal triplets of this block) ---- */
    --ts-bg-rgb: 14, 16, 19;
    --ts-fg-rgb: 233, 235, 238;
    --ts-accent-rgb: 207, 166, 255;
    --ts-link-rgb: 207, 166, 255;
    --ts-link-hover-rgb: 233, 235, 238;
    --ts-success-rgb: 79, 194, 133;
    --ts-danger-rgb: 249, 122, 107;
    --ts-warning-rgb: 240, 179, 78;
    --ts-info-rgb: 207, 166, 255;
    --ts-fg-2-rgb: 184, 189, 198;
    --ts-surface-rgb: 30, 34, 41;
    --ts-surface-2-rgb: 22, 25, 30;
    --ke-band-rgb: 8, 9, 11;

    /* ---- K: check, radio, indeterminate and switch marks on this scheme's accent fill ---- */
    --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 (body.ts-custom-accent; index.php prints --ts-accent-rgb inline). The TokenCompiler
   prints the Studio colour as the fill in both schemes, with a computed --ec-accent-fg and a 12% rgba
   --ec-accent-soft. Kestrel derives its opaque tints from the fill as the preset blocks do (sRGB over
   #FFFFFF in light, over #16191E in dark, DESIGN_SPEC 3.14) and a text form of the accent for links,
   indexes, focus rings and marks: 65% of the fill toward ink in light, 50% toward the text colour in dark
   (see the header). --ts-on-tint stays ink. The rgb twins keep the preset triplet (a mixed colour has no
   computable triplet, kit rule). The hex lines are the values for a custom accent equal to Cobalt. Both
   selectors are 0,2,0 and come after blocks A to D.
   ========================================================================== */

@supports (color: color-mix(in srgb, red 50%, blue)) {
    :root:has(> :where(body).ts-custom-accent) {
        --ke-accent-soft: #EBEEFB;
        --ke-accent-soft: color-mix(in srgb, var(--ec-accent) 9%, #FFFFFF);
        --ke-accent-wash: #E4E8F9;
        --ke-accent-wash: color-mix(in srgb, var(--ec-accent) 12%, #FFFFFF);
        --ke-accent-mark: #DBE0F8;
        --ke-accent-mark: color-mix(in srgb, var(--ec-accent) 16%, #FFFFFF);
        --ke-accent-halo: #CED5F5;
        --ke-accent-halo: color-mix(in srgb, var(--ec-accent) 22%, #FFFFFF);
        --ke-accent-line: #C0C9F2;
        --ke-accent-line: color-mix(in srgb, var(--ec-accent) 28%, #FFFFFF);
        --ke-accent-hover: #1D38B5;
        --ke-accent-hover: color-mix(in srgb, var(--ec-accent) 85%, #111316);
        --ke-band-accent-soft: #18203E;
        --ke-band-accent-soft: color-mix(in srgb, var(--ec-accent) 18%, #16191E);
        --ke-band-accent-line: #1A2866;
        --ke-band-accent-line: color-mix(in srgb, var(--ec-accent) 40%, #16191E);
        --ts-link: #19338A;
        --ts-link: color-mix(in oklab, var(--ec-accent) 65%, #111316);
        --ts-focus: var(--ts-link);
        --ts-signal: var(--ts-link);
        --ts-info: var(--ts-link);
        --ts-tint: var(--ke-accent-soft);
        --ts-info-bg: var(--ke-accent-soft);
    }

    :root[data-color-scheme="dark"]:has(> :where(body.ts-custom-accent)) {
        --ke-accent-soft: #18203E;
        --ke-accent-soft: color-mix(in srgb, var(--ec-accent) 18%, #16191E);
        --ke-accent-wash: #182249;
        --ke-accent-wash: color-mix(in srgb, var(--ec-accent) 24%, #16191E);
        --ke-accent-mark: #192557;
        --ke-accent-mark: color-mix(in srgb, var(--ec-accent) 32%, #16191E);
        --ke-accent-halo: #1A2866;
        --ke-accent-halo: color-mix(in srgb, var(--ec-accent) 40%, #16191E);
        --ke-accent-line: #1A2866;
        --ke-accent-line: color-mix(in srgb, var(--ec-accent) 40%, #16191E);
        --ke-accent-hover: #3D59D5;
        --ke-accent-hover: color-mix(in srgb, var(--ec-accent) 85%, #E9EBEE);
        --ts-link: #7D9BE5;
        --ts-link: color-mix(in oklab, var(--ec-accent) 50%, #E9EBEE);
    }
}

/* ==========================================================================
   K. Component knobs read by the kit files (bootstrap-bridge.css, joomla.css, vendor, system, ext);
   DESIGN_SPEC 3.12. Scheme-dependent knobs are var() references; the check marks live in blocks A to D.
   The scope selectors make the references resolve again inside nested scopes.
   ========================================================================== */

:root,
[data-bs-theme]:not(:root),
.ts-footer,
.ts-tone-dark,
[data-ke-scope],
.ts-row[data-ts-row="band"] {
    --ts-focus-width: 2px; /* K22: 2px ring with a 3px offset (--ke-focus-offset) */
    --ts-control-height: var(--ke-control-h); /* 48px fields and buttons */
    --ts-control-height-sm: var(--ke-control-h-sm); /* 44px compact buttons */
    --ts-control-radius: var(--ec-btn-radius); /* 8px: Kestrel and Bootstrap buttons share it (K22) */
    --ts-control-border-width: 1px;
    --ts-control-bg: var(--ec-surface); /* --ke-raised */
    --ts-control-focus-border: var(--ts-focus); /* accent border; template CSS adds the --ke-accent-halo */
    --ts-btn-font: var(--ec-font-body); /* Geist */
    --ts-btn-weight: 600;
    --ts-btn-transform: none;
    --ts-btn-tracking: normal;
    --ts-btn-pad-x: 1.375rem; /* 22px; compact buttons use 16px */
    --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);
    --ts-btn-primary-hover-bg: var(--ke-accent-hover); /* a literal per block (see the header) */
    --ts-btn-primary-hover-fg: var(--ts-btn-primary-fg);
    --ts-btn-primary-shadow: none;
    --ts-btn-secondary-bg: var(--ke-page); /* DESIGN_SPEC 7.1: page fill with a 1px ink border */
    --ts-btn-secondary-fg: var(--ke-ink);
    --ts-btn-secondary-border: var(--ke-ink);
    --ts-btn-secondary-hover-bg: var(--ke-paper);
    --ts-btn-secondary-hover-fg: var(--ke-ink);
    --ts-btn-secondary-hover-border: var(--ke-ink);
    --ts-check-size: 1.25em; /* 20px boxes at 16px */
    --ts-check-bg: var(--ec-accent);
    --ts-card-bg: var(--ec-surface);
    --ts-card-border: var(--ec-border);
    --ts-card-radius: var(--ec-radius);
    --ts-card-shadow: var(--ec-shadow);
    --ts-overlay-radius: var(--ec-radius);
    --ts-badge-radius: var(--ke-r-xs); /* 4px badges */
    --ts-tab-indicator: var(--ts-signal);
    --ts-tab-indicator-width: 2px; /* accent underline of the selected tab */
    --ts-tab-active-bg: transparent;
    --ts-tab-active-border: transparent;
    --ts-table-head-bg: transparent;
    --ts-table-head-fg: var(--ke-ink-3); /* mono uppercase heads in ink 3 (the kit default --ec-fg-2 is ink 2 since K28) */
    --ts-table-head-rule: var(--ec-border);
    --ts-page-current-bg: var(--ke-ink); /* the current page is an ink tile */
    --ts-page-current-fg: var(--ke-on-ink);
    --ts-page-gap: 0.5rem; /* 8px between tiles (DESIGN_SPEC 7.6) */
    --ts-alert-border-width: 1px;
    --ts-alert-bar-width: 0px; /* K28: no status-coloured start bar (0px, not 0: the kit also reads it inside max()) */
    --ts-alert-radius: var(--ec-radius);
    --ts-tooltip-bg: var(--ec-fg);
    --ts-tooltip-fg: var(--ec-bg);
}

/* ==========================================================================
   Band scope (DESIGN_SPEC 3.9, K28): the dark band. The footer gets it through CSS on .ts-footer
   (the library prints the footer markup, so no attribute can be added), the library's Studio Pages
   sections with tone dark through .ts-tone-dark, and any Kestrel markup that prints
   data-ke-scope="band" (the offline notice, Kestrel's own section skins with tone dark). Never a
   nested data-bs-theme="dark": that picks up block B, which carries Cobalt's dark accent whatever the
   preset. A dark island in either scheme. It remaps L0 and L1 so modules placed in the band read
   correctly, and it re-declares every L2 name that depends on them (a value resolves on the element
   that declares it). Links, focus rings and signals use the band ink (focus ring 15.95:1 or better);
   accent fills are unchanged; statuses take their dark values; tints take the preset's dark soft and
   line. The seed's Studio row whose id is "band" is a paper scope (below), not this one.
   ========================================================================== */

.ts-footer,
.ts-tone-dark,
[data-ke-scope="band"] {
    color-scheme: dark;
    --ec-bg: var(--ke-band);
    --ec-surface: var(--ke-band);
    --ec-surface-2: #16191E;
    --ec-fg: var(--ke-band-ink);
    --ec-fg-2: var(--ke-band-ink-2);
    --ec-border: var(--ke-band-line);
    --ec-accent-soft: var(--ke-band-accent-soft);
    --ke-page: var(--ke-band);
    --ke-paper: #16191E;
    --ke-raised: #1E2229;
    --ke-ink: var(--ke-band-ink);
    --ke-ink-2: var(--ke-band-ink-2);
    --ke-ink-3: var(--ke-band-ink-3);
    --ke-hairline: var(--ke-band-line);
    --ke-control: #6B7280;
    --ke-on-ink: #0E1013;
    --ke-ink-hover: #FFFFFF;
    --ke-danger: #F97A6B;
    --ke-danger-soft: #3A1714;
    --ke-danger-line: #6E2A22;
    --ke-danger-ink: #FFD3CC;
    --ke-on-danger: #2A0A06;
    --ke-success: #4FC285;
    --ke-success-soft: #0F2E1E;
    --ke-success-line: #1F5A3A;
    --ke-success-ink: #C3EED3;
    --ke-warning: #F0B34E;
    --ke-warning-soft: #33250C;
    --ke-warning-line: #6A4A12;
    --ke-warning-ink: #FBE0B0;
    --ke-accent-soft: var(--ke-band-accent-soft);
    --ke-accent-wash: var(--ke-band-accent-soft);
    --ke-accent-mark: var(--ke-band-accent-line);
    --ke-accent-halo: var(--ke-band-accent-line);
    --ke-accent-line: var(--ke-band-accent-line);
    --ts-link: var(--ke-band-ink);
    --ts-link-hover: var(--ke-band-ink); /* underlined on hover */
    --ts-focus: var(--ke-band-ink);
    --ts-control: #6B7280; /* 3.94 on #0E1013, 4.12 on #08090B */
    --ts-signal: var(--ke-band-ink);
    --ts-tint: var(--ke-band-accent-soft);
    --ts-on-tint: var(--ke-band-ink);
    --ts-success: #4FC285;
    --ts-success-bg: #0F2E1E;
    --ts-danger: #F97A6B;
    --ts-danger-bg: #3A1714;
    --ts-warning: #F0B34E;
    --ts-warning-bg: #33250C;
    --ts-info: var(--ke-band-ink);
    --ts-info-bg: var(--ke-band-accent-soft);
    --ts-bg-rgb: var(--ke-band-rgb);
    --ts-fg-rgb: 233, 235, 238;
    --ts-fg-2-rgb: 184, 189, 198;
    --ts-surface-rgb: var(--ke-band-rgb);
    --ts-surface-2-rgb: 22, 25, 30;
    --ts-link-rgb: 233, 235, 238;
    --ts-link-hover-rgb: 233, 235, 238;
    --ts-info-rgb: 233, 235, 238;
    --ts-success-rgb: 79, 194, 133;
    --ts-danger-rgb: 249, 122, 107;
    --ts-warning-rgb: 240, 179, 78;
}

/* ==========================================================================
   Paper scope (DESIGN_SPEC 3.9, K28): any Kestrel markup that prints data-ke-scope="paper" (the member
   bar, the member strip, the Guides band section, paper panels) and the seed's Studio row with the id
   "band" (.ts-row[data-ts-row="band"], footer-top), which holds the Guides band. The page ground
   becomes paper and paper becomes white, and the control border darkens to #838993 (3.25:1 on paper,
   K22, K28; #8A909A measures 2.97:1 there). The dark rule follows the light one at the same specificity.
   ========================================================================== */

.ts-row[data-ts-row="band"],
[data-ke-scope="paper"] {
    --ec-bg: #F5F6F7;
    --ec-surface-2: #FFFFFF;
    --ke-page: #F5F6F7;
    --ke-paper: #FFFFFF;
    --ke-control: #838993;
    --ts-control: #838993;
    --ts-bg-rgb: 245, 246, 247;
    --ts-surface-2-rgb: 255, 255, 255;
}

:where([data-color-scheme="dark"]) .ts-row[data-ts-row="band"],
:where([data-color-scheme="dark"]) [data-ke-scope="paper"] {
    --ec-bg: #16191E;
    --ec-surface-2: #1E2229;
    --ke-page: #16191E;
    --ke-paper: #1E2229;
    --ke-control: #6B7280; /* 3.64 on #16191E */
    --ts-control: #6B7280;
    --ts-bg-rgb: 22, 25, 30;
    --ts-surface-2-rgb: 30, 34, 41;
}

/* ==========================================================================
   L1. Kestrel aliases of L0 and L1 roles (DESIGN_SPEC 3.10). Declared once; the scope selectors make
   them resolve again inside nested scopes, so the runtime --ec-* values (Studio accent, radius, fonts,
   width) and the scope remaps flow through.
   ========================================================================== */

:root,
[data-bs-theme]:not(:root),
.ts-footer,
.ts-tone-dark,
[data-ke-scope],
.ts-row[data-ts-row="band"] {
    --ke-accent: var(--ec-accent); /* accent fills and strokes; accent text uses --ts-link */
    --ke-on-accent: var(--ec-accent-fg);
    --ke-display: var(--ec-font-display);
    --ke-sans: var(--ec-font-body);
    --ke-mono: var(--ts-font-mono);
    --ke-r: var(--ec-radius);
    --ke-r-control: var(--ec-btn-radius);
    --ke-r-img: var(--ec-img-radius);
    --ke-container: var(--ec-cw);
    --ke-gutter: var(--ec-gut);
    --ke-rule: var(--ke-ink); /* the 2px rule above every section, with its mono index */
    --ke-disabled-bg: var(--ke-hairline);
    --ke-disabled-fg: var(--ke-ink-3); /* 4.82 light, 5.77 dark */
}

/* ==========================================================================
   L3. Concord aliases (Community Answers' follow-template mode reads --color-* and --font-*)
   ========================================================================== */

:root,
[data-bs-theme]:not(:root),
.ts-footer,
.ts-tone-dark,
[data-ke-scope],
.ts-row[data-ts-row="band"] {
    --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(--ke-ink-2);
    --color-muted: var(--ke-ink-3); /* meta; --ec-fg-2 is ink 2 (K28) */
    --color-rule: var(--ec-border);
    --color-rule-2: var(--ts-control); /* the stronger rule */
    --color-accent: var(--ec-accent);
    --color-accent-ink: var(--ec-accent-fg); /* Concord meaning: text on the accent */
    --color-accent-soft: var(--ke-accent-soft); /* opaque, also under a custom accent */
    --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: 0.125rem; /* 2: mark highlight inset */
    --space-2xs: var(--ke-s-1);
    --space-xs: var(--ke-s-2);
    --space-sm: var(--ke-s-3);
    --space-md: var(--ke-s-4);
    --space-lg: var(--ke-s-5);
    --space-xl: var(--ke-s-6);
    --space-2xl: var(--ke-s-7);
    --space-3xl: var(--ke-s-8);
    --space-4xl: 4.5rem; /* 72: the boards' paper band padding */
    --space-5xl: 6rem; /* 96: the boards' largest gap (page end) */

    --text-xs: var(--ke-t-meta);
    --text-sm: var(--ke-t-label);
    --text-base: 1rem;
    --text-md: var(--ke-t-lede);
    --text-lg: var(--ke-t-intro);
    --text-xl: var(--ke-t-h3);
    --text-2xl: var(--ke-t-panel);
    --text-3xl: var(--ke-t-h2);
    --text-4xl: var(--ke-t-feature);
    --text-display-s: var(--ke-t-page);
    --text-display: var(--ke-t-display);

    --radius-xs: var(--ke-r-xs);
    --radius-sm: var(--ke-r-sm);
    --radius-md: var(--ec-radius);
    --radius-lg: var(--ec-radius); /* Kestrel's largest radius is 8px */
    --radius-pill: var(--ke-pill);

    --measure: var(--ke-measure);
    --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). The Sociable, Rewardify, Community Surveys and
   CjForum names are reserved on :root (lint R5); their maps are section 1 of ext/<key>.css.
   ========================================================================== */

:root,
[data-bs-theme]:not(:root),
.ts-footer,
.ts-tone-dark,
[data-ke-scope],
.ts-row[data-ts-row="band"] {
    /* ---- 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(--ke-ink-2); /* secondary text */
    --template-subtle-color: var(--ke-ink-3); /* meta */
    --template-link-color: var(--ts-link); /* readable on the ground, not the accent fill */
    --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(--ke-success-ink);
    --vy-warn: var(--ts-warning);
    --vy-warn-strong: var(--ke-warning-ink);
    --vy-danger: var(--ts-danger);
    --vy-danger-strong: var(--ke-danger-ink);
    --vy-feature: var(--ke-band); /* the band */
    --vy-feature-fg: var(--ke-band-ink);
    --vy-feature-fg-2: var(--ke-band-ink-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); /* Geist: stops the bundled Bricolage Grotesque Variable download */
    --vy-font-display: var(--ec-font-display); /* Kestrel's self-hosted Bricolage Grotesque */
    --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 (system/fields/calendar.css reads these unprefixed names) ---- */
    --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 (system/fields/switcher.css) ---- */
    --focus: var(--ts-focus);

    /* ---- Media Manager (com_media inside component.php): Atum and Cassiopeia names ---- */
    --template-bg-dark: var(--ec-fg);
    --template-bg-dark-3: var(--ke-media-tint-3);
    --template-bg-dark-5: var(--ke-media-tint-5);
    --template-bg-dark-7: var(--ke-media-tint-7);
    --template-bg-dark-10: var(--ke-media-tint-10);
    --template-bg-dark-40: var(--ke-media-tint-40);
    --template-bg-dark-50: var(--ke-media-tint-50);
    --template-bg-dark-60: var(--ke-ink-2);
    --template-bg-dark-80: var(--ec-fg);
    --hue: 216; /* hue of Kestrel's cool neutrals: ink #111316 and the dark page #0E1013 both sit at 216 */
    --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); /* one length: mod-articles.css multiplies it in calc() */
    --grid-item--min-width: var(--ke-card-min);
}

/* ==========================================================================
   Phone type sizes. The phone boards are the desktop boards drawn at 390px, so on a phone every fluid
   size sits at its clamp floor (DESIGN_SPEC 4.4); the floors are pinned here so the phone sizes stay
   put if a desktop clamp changes. Fixed sizes (30px section heads, 19px article text) are the same on
   phones.
   ========================================================================== */

@media (width < 48rem) {
    :root {
        --ke-t-display: 2.75rem; /* 44 */
        --ke-t-offline: 2.75rem; /* 44 */
        --ke-t-lead: 2.5rem; /* 40 */
        --ke-t-page: 2.5rem; /* 40 */
        --ke-t-auth: 2.25rem; /* 36 */
        --ke-t-app: 2.25rem; /* 36 */
        --ke-t-feature: 1.875rem; /* 30 */
        --ke-t-code: 7.5rem; /* 120 */
    }
}

/* ==========================================================================
   Reduced motion (last, so it wins over A; the C and D blocks never declare durations). 0.01ms, not 0,
   so transitionend still fires (DESIGN_SPEC 8).
   ========================================================================== */

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