/* ==========================================================================
   Project Aleph — Design Tokens  (v2, BCG brand)
   Sources
     Components : Figma "Aleph UI Components"  (lpnsNfwJX9H6fWxi2QWzDJ)
     Brand      : Figma "BCG Brand Toolkit"    (7vqFhq7a9aTOTCeW0KG7tg)

   THE BRAND COLOUR RULE
   ---------------------
   1. BCG brand colours are the main colours of every UI built with this
      system. Semantic tokens (--color-*) resolve to --brand-* tokens (or the
      --ink-* tints derived from Midnight Green). Nothing else is the default.
   2. Components and component tokens consume semantic tokens only. They never
      reference a primitive colour (--brand-*, --ink-*, --saffron-*,
      --palette-* …) directly.
   3. Every colour in the system comes from the toolkit. The accent ramps are
      built from the dynamic colours' own tints and shades. The one exception
      is error red, because the brand palette has no red.
   4. Text on Pulse Green and Fresh Green is Midnight Green, never white
      (white on Pulse Green is about 2.4:1).
   5. Both colour modes obey rules 1 to 4. Dark mode is built from the same
      toolkit colours, not from a separate palette.
   Run `python3 lint-tokens.py` to enforce rules 1 to 3 and 5.

   LIGHT AND DARK MODES
   --------------------
   Colour has two modes: [data-mode="light"] and [data-mode="dark"]. Set the
   attribute on <html> (or on any wrapper that also carries class="aleph").
   With no attribute, the OS setting decides (prefers-color-scheme).
     Light  page Ivory, raised surfaces Ivory, text Midnight Green, action
            Fresh Green with Midnight text.
     Dark   page Midnight Green, raised surfaces Logo Green, text Ivory,
            action Fresh Green with Midnight text, action text Fresh Green.
   Only tier 2 (semantic) tokens change between modes. Tier 3 (component)
   tokens and components.css are mode-blind.

   Tiers (each tier only references the tier above it)
     1. PRIMITIVES  raw values            --brand-pulse-green, --space-8
     2. SEMANTIC    meaning / role        --color-action, --color-text-body
     3. COMPONENT   per-component slots   --button-primary-bg, --input-border-focus

   Themeable axes
     [data-mode]    light (default) | dark.  No attribute = follow the OS.
     [data-theme]   bcg-green (default, BCG Brand Toolkit) | moonstone
                    | violet-blue | saffron | tangerine.  "brand" aliases bcg-green.
                    Everything except bcg-green is opt-in.
     [data-radius]  slightly-rounded (default) | sharp | super-rounded

   Units: type and spacing are rem (16px root). Component dimensions, radii,
   borders and shadows are px so they match the Figma file 1:1.
   Colour tints use color-mix(); a static @supports fallback at the end of this
   file covers older browsers.
   ========================================================================== */

/*@@tier-1*/
/* ==========================================================================
   1. PRIMITIVES
   ========================================================================== */

:root {
  /* ---- 1a. BCG brand colours (PRIMARY) -------------------------------- */

  /* Logo and core */
  --brand-logo-green:      #144622;
  --brand-ivory:           #fcfbfa;
  --brand-midnight-green:  #0c2b15;
  --brand-pulse-green:     #21bf61;
  --brand-fresh-green:     #96f878;

  /* Dynamic */
  --brand-neutral:         #f1eeea;
  --brand-nyanza-green:    #e3fddb;
  --brand-mint-green:      #dcfcf3;
  --brand-sandy-yellow:    #fdee73;
  --brand-saffron:         #e8ab00;
  --brand-tangerine:       #ea7b26;
  --brand-aquamarine:      #00e2ad;
  --brand-moonstone:       #19a8af;
  --brand-violet-blue:     #454ac1;

  /* Only used as the first stop of Dyad 1 in the toolkit */
  --brand-dyad-wash:       #e2f5d2;

  /* Neutrals. Porcelain, Beige and Brown are the warm set, the three greys the
     cool set. The toolkit's own neutrals are Neutral and Ivory above; these
     extend the range for surfaces, rules and illustration. */
  --brand-porcelain:       #f5f2ef;
  --brand-beige:           #c3b8a7;
  --brand-brown:           #8f7d62;
  --brand-grey-light:      #bcbcbc;
  --brand-grey-middle:     #7f7f7f;
  --brand-grey-dark:       #414141;

  /* ---- 1b. Dynamic tints and shades ------------------------------------
     Five steps per dynamic colour: three tints (l80, l60, l40) and two shades
     (d25, d50). The steps come from the brand team as fixed values, not as a
     formula: they are HSL lightness moves, which color-mix() cannot reproduce,
     so unlike the Ink and Paper tints they are stored as literals. Each base stays at
     its toolkit hex, so Pulse Green, Moonstone, Violet Blue and Tangerine keep
     the toolkit value rather than the slightly different base in the handover. */

  --brand-ivory-l80: #fefefe;  --brand-ivory-l60: #fefdfd;  --brand-ivory-l40: #fdfdfc;
  --brand-ivory-d25: #cdbcac;  --brand-ivory-d50: #9d7d5e;

  --brand-nyanza-green-l80: #f9fff8;  --brand-nyanza-green-l60: #f4fef1;  --brand-nyanza-green-l40: #eefee9;
  --brand-nyanza-green-d25: #8cf76b;  --brand-nyanza-green-d50: #3ee00c;

  --brand-pulse-green-l80: #cef7df;  --brand-pulse-green-l60: #9defbe;  --brand-pulse-green-l40: #6ce69e;
  --brand-pulse-green-d25: #188f49;  --brand-pulse-green-d50: #106031;

  --brand-midnight-green-l80: #b8ebc7;  --brand-midnight-green-l60: #71d78e;  --brand-midnight-green-l40: #34b95a;
  --brand-midnight-green-d25: #092010;  --brand-midnight-green-d50: #06160a;

  --brand-moonstone-l80: #c8f5f7;  --brand-moonstone-l60: #92ecf0;  --brand-moonstone-l40: #5be2e8;
  --brand-moonstone-d25: #127e83;  --brand-moonstone-d50: #0c5458;

  --brand-violet-blue-l80: #dbddf2;  --brand-violet-blue-l60: #b6bae5;  --brand-violet-blue-l40: #9298d7;
  --brand-violet-blue-d25: #343c90;  --brand-violet-blue-d50: #232860;

  /* Saffron's five steps are derived, not supplied: the handover shipped a set for
     Amber (#fea127), which is not a toolkit colour. These hold Saffron's hue and
     saturation and apply the same HSL lightness offsets that set used, so they
     need confirming against the brand team's own Saffron ramp. */
  --brand-saffron-l80: #ffe497;  --brand-saffron-l60: #ffd86c;  --brand-saffron-l40: #ffcd3f;
  --brand-saffron-d25: #9f7500;  --brand-saffron-d50: #563f00;

  --brand-tangerine-l80: #ffe5d5;  --brand-tangerine-l60: #ffcbaa;  --brand-tangerine-l40: #feb080;
  --brand-tangerine-d25: #de5601;  --brand-tangerine-d50: #943901;

  /* Ink — Midnight Green at fixed strengths, for text, borders and fills.
     The brand has one dark and no mid-greys, so tints are derived, not new hues. */
  --ink-8:  color-mix(in srgb, var(--brand-midnight-green)  8%, transparent);
  --ink-16: color-mix(in srgb, var(--brand-midnight-green) 16%, transparent);
  --ink-24: color-mix(in srgb, var(--brand-midnight-green) 24%, transparent);
  --ink-32: color-mix(in srgb, var(--brand-midnight-green) 32%, transparent);
  --ink-48: color-mix(in srgb, var(--brand-midnight-green) 48%, transparent);
  --ink-64: color-mix(in srgb, var(--brand-midnight-green) 64%, transparent);
  --ink-72: color-mix(in srgb, var(--brand-midnight-green) 72%, transparent);
  --ink-88: color-mix(in srgb, var(--brand-midnight-green) 88%, transparent);

  /* Paper — Ivory at fixed strengths. The dark-mode counterpart of Ink, for
     text, borders and fills on Midnight Green and Logo Green. */
  --paper-8:  color-mix(in srgb, var(--brand-ivory)  8%, transparent);
  --paper-16: color-mix(in srgb, var(--brand-ivory) 16%, transparent);
  --paper-24: color-mix(in srgb, var(--brand-ivory) 24%, transparent);
  --paper-32: color-mix(in srgb, var(--brand-ivory) 32%, transparent);
  --paper-48: color-mix(in srgb, var(--brand-ivory) 48%, transparent);
  --paper-64: color-mix(in srgb, var(--brand-ivory) 64%, transparent);
  --paper-72: color-mix(in srgb, var(--brand-ivory) 72%, transparent);
  --paper-88: color-mix(in srgb, var(--brand-ivory) 88%, transparent);

  /* BCG Green ramp, steps 10 to 100. The anchors (10, 40, 60, 90, 100) are
     toolkit colours; the steps between are blends of their neighbours. */
  --brand-green-10:  var(--brand-nyanza-green);                                                      /* toolkit */
  --brand-green-20:  color-mix(in srgb, var(--brand-fresh-green) 33%, var(--brand-nyanza-green));   /* blend   */
  --brand-green-30:  color-mix(in srgb, var(--brand-fresh-green) 66%, var(--brand-nyanza-green));   /* blend   */
  --brand-green-40:  var(--brand-fresh-green);                                                       /* toolkit */
  --brand-green-50:  color-mix(in srgb, var(--brand-pulse-green) 50%, var(--brand-fresh-green));    /* blend   */
  --brand-green-60:  var(--brand-pulse-green);                                                       /* toolkit */
  --brand-green-70:  color-mix(in srgb, var(--brand-logo-green) 40%, var(--brand-pulse-green));     /* blend   */
  --brand-green-80:  color-mix(in srgb, var(--brand-logo-green) 75%, var(--brand-pulse-green));     /* blend   */
  --brand-green-90:  var(--brand-logo-green);                                                        /* toolkit */
  --brand-green-100: var(--brand-midnight-green);                                                    /* toolkit */

  /* Brand gradients (left to right, as in the toolkit).
     Dyads: primary + secondary only. Triads and tetrads: Ivory, secondary, tertiary. */
  --brand-gradient-dyad-1: linear-gradient(90deg, var(--brand-dyad-wash) 33%, var(--brand-pulse-green) 100%);
  --brand-gradient-dyad-2: linear-gradient(90deg, var(--brand-mint-green) 33%, var(--brand-fresh-green) 100%);
  --brand-gradient-dyad-3: linear-gradient(90deg, var(--brand-ivory) 0%, var(--brand-nyanza-green) 100%);

  --brand-gradient-triad-1: linear-gradient(90deg, var(--brand-ivory) 30%, var(--brand-fresh-green) 65%, var(--brand-aquamarine) 100%);
  --brand-gradient-triad-2: linear-gradient(90deg, var(--brand-ivory) 30%, var(--brand-nyanza-green) 66%, var(--brand-aquamarine) 100%);
  --brand-gradient-triad-3: linear-gradient(90deg, var(--brand-ivory) 33%, var(--brand-aquamarine) 65%, var(--brand-fresh-green) 100%);
  --brand-gradient-triad-4: linear-gradient(90deg, var(--brand-ivory) 33%, var(--brand-aquamarine) 66%, var(--brand-violet-blue) 100%);
  --brand-gradient-triad-5: linear-gradient(90deg, var(--brand-ivory) 33%, var(--brand-sandy-yellow) 66%, var(--brand-fresh-green) 100%);
  --brand-gradient-triad-6: linear-gradient(90deg, var(--brand-ivory) 33%, var(--brand-sandy-yellow) 66%, var(--brand-saffron) 100%);

  --brand-gradient-tetrad-1: linear-gradient(90deg, var(--brand-ivory) 33%, var(--brand-fresh-green) 66%, var(--brand-aquamarine) 90%, var(--brand-moonstone) 100%);
  --brand-gradient-tetrad-2: linear-gradient(90deg, var(--brand-ivory) 33%, var(--brand-fresh-green) 66%, var(--brand-aquamarine) 90%, var(--brand-violet-blue) 100%);
  --brand-gradient-tetrad-3: linear-gradient(90deg, var(--brand-ivory) 33%, var(--brand-nyanza-green) 66%, var(--brand-sandy-yellow) 90%, var(--brand-tangerine) 100%);


  /* ---- 1c. Accent ramps, steps 10 to 100 -------------------------------
     One ramp per dynamic accent, built from that colour's own tints and
     shades: 10 = l80, 30 = l60, 50 = l40, 60 = base, 80 = d25, 100 = d50.
     The four steps in between are blends of their neighbours, the same way
     the BCG Green ramp fills its non-toolkit steps. */

  --moonstone-10:  var(--brand-moonstone-l80);
  --moonstone-20:  color-mix(in srgb, var(--brand-moonstone-l60) 50%, var(--brand-moonstone-l80));
  --moonstone-30:  var(--brand-moonstone-l60);
  --moonstone-40:  color-mix(in srgb, var(--brand-moonstone-l40) 50%, var(--brand-moonstone-l60));
  --moonstone-50:  var(--brand-moonstone-l40);
  --moonstone-60:  var(--brand-moonstone);
  --moonstone-70:  color-mix(in srgb, var(--brand-moonstone-d25) 50%, var(--brand-moonstone));
  --moonstone-80:  var(--brand-moonstone-d25);
  --moonstone-90:  color-mix(in srgb, var(--brand-moonstone-d50) 50%, var(--brand-moonstone-d25));
  --moonstone-100: var(--brand-moonstone-d50);

  --violet-blue-10:  var(--brand-violet-blue-l80);
  --violet-blue-20:  color-mix(in srgb, var(--brand-violet-blue-l60) 50%, var(--brand-violet-blue-l80));
  --violet-blue-30:  var(--brand-violet-blue-l60);
  --violet-blue-40:  color-mix(in srgb, var(--brand-violet-blue-l40) 50%, var(--brand-violet-blue-l60));
  --violet-blue-50:  var(--brand-violet-blue-l40);
  --violet-blue-60:  var(--brand-violet-blue);
  --violet-blue-70:  color-mix(in srgb, var(--brand-violet-blue-d25) 50%, var(--brand-violet-blue));
  --violet-blue-80:  var(--brand-violet-blue-d25);
  --violet-blue-90:  color-mix(in srgb, var(--brand-violet-blue-d50) 50%, var(--brand-violet-blue-d25));
  --violet-blue-100: var(--brand-violet-blue-d50);

  --saffron-10:  var(--brand-saffron-l80);
  --saffron-20:  color-mix(in srgb, var(--brand-saffron-l60) 50%, var(--brand-saffron-l80));
  --saffron-30:  var(--brand-saffron-l60);
  --saffron-40:  color-mix(in srgb, var(--brand-saffron-l40) 50%, var(--brand-saffron-l60));
  --saffron-50:  var(--brand-saffron-l40);
  --saffron-60:  var(--brand-saffron);
  --saffron-70:  color-mix(in srgb, var(--brand-saffron-d25) 50%, var(--brand-saffron));
  --saffron-80:  var(--brand-saffron-d25);
  --saffron-90:  color-mix(in srgb, var(--brand-saffron-d50) 50%, var(--brand-saffron-d25));
  --saffron-100: var(--brand-saffron-d50);

  --tangerine-10:  var(--brand-tangerine-l80);
  --tangerine-20:  color-mix(in srgb, var(--brand-tangerine-l60) 50%, var(--brand-tangerine-l80));
  --tangerine-30:  var(--brand-tangerine-l60);
  --tangerine-40:  color-mix(in srgb, var(--brand-tangerine-l40) 50%, var(--brand-tangerine-l60));
  --tangerine-50:  var(--brand-tangerine-l40);
  --tangerine-60:  var(--brand-tangerine);
  --tangerine-70:  color-mix(in srgb, var(--brand-tangerine-d25) 50%, var(--brand-tangerine));
  --tangerine-80:  var(--brand-tangerine-d25);
  --tangerine-90:  color-mix(in srgb, var(--brand-tangerine-d50) 50%, var(--brand-tangerine-d25));
  --tangerine-100: var(--brand-tangerine-d50);

  /* Red — error only. The brand palette has no red.
     Steps 10 and 50 are blends, added so the ramp is complete. */
  --red-10: #fef3f0;  --red-20: #fce1dc;  --red-30: #f9c1b5;
  --red-40: #f7a08e;  --red-50: #e76152;  --red-60: #d82216;
  --red-70: #bd1c11;  --red-80: #a1150c;  --red-90: #84120b;
  --red-100: #670f09;

  /* Aleph text paint styles */
  --text-light-primary:   #2c2c2c;
  --text-light-secondary: #768185;
  --text-light-tertiary:  #8c979a;
  --text-link:            #2f80ed;

  /* Utility */
  --black: #000000;
  --alpha-black-55: rgb(0 0 0 / 0.55);
  --alpha-white-30: rgb(255 255 255 / 0.3);
  --scrim-ink: rgb(14 18 16 / 0.85);


  /* ---- Typography: Henderson BCG ------------------------------------- */
  /* Sans: Light 300, Regular 400, Bold 700.  Serif: Regular 400 only.
     Both are licensed. Installed copies are picked up by name; to self-host,
     add @font-face rules (see the commented template at the end of the file). */
  --font-family-sans:  "Henderson BCG Sans", "BCG Henderson Sans", "Segoe UI", system-ui,
                       -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-family-serif: "Henderson BCG Serif", "BCG Henderson Serif", Georgia,
                       "Times New Roman", serif;

  --font-weight-light:   300;
  --font-weight-regular: 400;
  --font-weight-bold:    700;

  --font-size-10: 0.625rem;   --font-size-11: 0.6875rem;
  --font-size-12: 0.75rem;    --font-size-13: 0.8125rem;
  --font-size-14: 0.875rem;   --font-size-16: 1rem;
  --font-size-17: 1.0625rem;  --font-size-18: 1.125rem;
  --font-size-20: 1.25rem;    --font-size-22: 1.375rem;
  --font-size-28: 1.75rem;

  --line-height-120: 1.2;       /* Figma default: 120% */
  --line-height-114: 1.142857;  /* 16px on 14px */
  --letter-spacing-none: 0;

  /* ---- Spacing — Figma "spacer" scale, named by pixel value ----------- */
  --space-0:   0;
  --space-2:   0.125rem;
  --space-4:   0.25rem;
  --space-8:   0.5rem;
  --space-12:  0.75rem;
  --space-16:  1rem;
  --space-20:  1.25rem;
  --space-24:  1.5rem;
  --space-32:  2rem;
  --space-48:  3rem;
  --space-64:  4rem;
  --space-80:  5rem;
  --space-96:  6rem;
  --space-128: 8rem;

  /* ---- Borders -------------------------------------------------------- */
  --border-width-hairline: 0.5px;
  --border-width-1: 1px;
  --border-width-field-focus: 1.6px;
  --border-width-2: 2px;
  --border-width-3: 3px;
  --border-width-4: 4px;

  /* ---- Radius (static) ------------------------------------------------ */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-4:    4px;
  --radius-6:    6px;
  --radius-pill: 999px;

  /* ---- Elevation — Figma effect styles "Shadow/*" --------------------- */
  --shadow-xs:  0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm:  0 2px 9px 0 rgb(0 0 0 / 0.10);
  --shadow-md:  0 3px 9px 2px rgb(0 0 0 / 0.10);
  --shadow-lg:  0 5px 15px 2px rgb(0 0 0 / 0.10);
  --shadow-xl:  0 6px 20px 2px rgb(0 0 0 / 0.15);
  --shadow-2xl: 0 10px 40px 2px rgb(0 0 0 / 0.20);
  --shadow-3xl: 0 10px 56px 8px rgb(0 0 0 / 0.20);

  /* Focus rings. Error keeps its Aleph value. Success and warning are now
     brand-derived; the previous values are retained as -legacy. */
  --focus-ring-error:   0 0 0 2px rgb(168 34 34 / 0.7), 0 1px 3px 0 rgb(0 0 0 / 0.1);
  --focus-ring-success: 0 0 0 2px color-mix(in srgb, var(--brand-pulse-green) 70%, transparent), 0 1px 3px 0 rgb(0 0 0 / 0.1);
  --focus-ring-warning: 0 0 0 2px color-mix(in srgb, var(--brand-saffron) 80%, transparent), 0 1px 3px 0 rgb(0 0 0 / 0.1);
  --focus-ring-success-legacy: 0 0 0 2px rgb(47 134 50 / 0.6), 0 1px 3px 0 rgb(0 0 0 / 0.1);
  --focus-ring-warning-legacy: 0 0 0 2px rgb(215 117 26 / 0.7), 0 1px 3px 0 rgb(0 0 0 / 0.1);
  --focus-ring-highlight: 0 0 0 4px color-mix(in srgb, var(--brand-fresh-green) 60%, transparent);

  /* Background blur — "Blur/*" (the Figma style named 32px stores a 48 radius) */
  --blur-8:  8px;
  --blur-16: 16px;
  --blur-24: 24px;
  --blur-32: 48px;

  /* ---- Motion (not in Figma; kept short and overridable) -------------- */
  --duration-fast: 120ms;
  --easing-standard: cubic-bezier(0.2, 0, 0, 1);
}


/* --------------------------------------------------------------------------
   Themeable primitives
   -------------------------------------------------------------------------- */

/* Palette steps 10 to 100, one variable per step, mapped per theme.
   Pulse Green is the default and maps to the toolkit ramp. The other four are
   the dynamic accents, each on its own tint and shade steps. */
:root,
[data-theme="bcg-green"],
[data-theme="brand"] {
  --palette-10: var(--brand-green-10);  --palette-20: var(--brand-green-20);
  --palette-30: var(--brand-green-30);  --palette-40: var(--brand-green-40);
  --palette-50: var(--brand-green-50);  --palette-60: var(--brand-green-60);
  --palette-70: var(--brand-green-70);  --palette-80: var(--brand-green-80);
  --palette-90: var(--brand-green-90);  --palette-100: var(--brand-green-100);
}
[data-theme="moonstone"] {
  --palette-10: var(--moonstone-10);  --palette-20: var(--moonstone-20);
  --palette-30: var(--moonstone-30);  --palette-40: var(--moonstone-40);
  --palette-50: var(--moonstone-50);  --palette-60: var(--moonstone-60);
  --palette-70: var(--moonstone-70);  --palette-80: var(--moonstone-80);
  --palette-90: var(--moonstone-90);  --palette-100: var(--moonstone-100);
}
[data-theme="violet-blue"] {
  --palette-10: var(--violet-blue-10);  --palette-20: var(--violet-blue-20);
  --palette-30: var(--violet-blue-30);  --palette-40: var(--violet-blue-40);
  --palette-50: var(--violet-blue-50);  --palette-60: var(--violet-blue-60);
  --palette-70: var(--violet-blue-70);  --palette-80: var(--violet-blue-80);
  --palette-90: var(--violet-blue-90);  --palette-100: var(--violet-blue-100);
}
[data-theme="saffron"] {
  --palette-10: var(--saffron-10);  --palette-20: var(--saffron-20);
  --palette-30: var(--saffron-30);  --palette-40: var(--saffron-40);
  --palette-50: var(--saffron-50);  --palette-60: var(--saffron-60);
  --palette-70: var(--saffron-70);  --palette-80: var(--saffron-80);
  --palette-90: var(--saffron-90);  --palette-100: var(--saffron-100);
}
[data-theme="tangerine"] {
  --palette-10: var(--tangerine-10);  --palette-20: var(--tangerine-20);
  --palette-30: var(--tangerine-30);  --palette-40: var(--tangerine-40);
  --palette-50: var(--tangerine-50);  --palette-60: var(--tangerine-60);
  --palette-70: var(--tangerine-70);  --palette-80: var(--tangerine-80);
  --palette-90: var(--tangerine-90);  --palette-100: var(--tangerine-100);
}

/* Border radius — Figma "Border-Radius" collection, S / M / L */
:root,
[data-radius="slightly-rounded"] { --radius-s: 4px;   --radius-m: 8px;  --radius-l: 10px; }
[data-radius="sharp"]            { --radius-s: 0px;   --radius-m: 0px;  --radius-l: 0px;  }
[data-radius="super-rounded"]    { --radius-s: 999px; --radius-m: 15px; --radius-l: 25px; }


/*@@tier-2*/
/* ==========================================================================
   2. SEMANTIC, LIGHT MODE  (default; theme = BCG Green)
   ========================================================================== */

:root,
[data-mode="light"] {
  color-scheme: light;

  /* ---- Action --------------------------------------------------------- */
  --color-action:                var(--brand-fresh-green);
  --color-action-pressed:        var(--brand-green-50);
  --color-action-deep:           var(--brand-logo-green);
  --color-action-tint:           var(--brand-nyanza-green);
  --color-action-subtle:         var(--brand-pulse-green-l80);
  --color-action-subtle-pressed: var(--brand-pulse-green-l40);
  --color-on-action:             var(--brand-midnight-green);
  --color-on-action-pressed:     var(--brand-midnight-green);
  /* Small filled marks: checkbox, radio dot, switch track, slider fill,
     primary chip, and the spacing bars in the docs.
     They take Pulse Green in light mode, not the
     Fresh Green that --color-action carries, because at this size Fresh Green
     washes out against a light page. Dark mode keeps Fresh Green, where the
     page is dark and the lighter green is what reads. */
  --color-control:               var(--brand-pulse-green);
  --color-control-pressed:       var(--brand-green-50);
  --color-on-control:            var(--brand-midnight-green);
  --color-on-control-pressed:    var(--brand-midnight-green);
  --color-on-action-subtle:      var(--brand-midnight-green);
  --color-on-action-subtle-pressed: var(--brand-midnight-green);
  --color-action-text:           var(--brand-logo-green);
  --color-action-text-strong:    var(--brand-logo-green);
  --color-action-border:         var(--brand-logo-green);
  --color-action-border-pressed: var(--brand-midnight-green);
  --color-action-accent:         var(--brand-pulse-green);   /* decorative: underline, switch track */
  --color-action-focus:          var(--brand-midnight-green); /* keyboard focus outline */
  --color-border-focus:          var(--brand-logo-green);     /* focused field border */

  /* ---- Surfaces ------------------------------------------------------- */
  --color-surface:         var(--brand-ivory);
  --color-surface-subtle:  var(--brand-neutral);
  --color-surface-muted:   var(--ink-8);
  --color-surface-raised:  var(--brand-ivory);   /* cards, dropdowns, modals, drawers */
  --color-surface-hover:   var(--brand-neutral);
  --color-surface-inverse: var(--brand-midnight-green);
  --color-surface-brand:   var(--brand-midnight-green);
  --color-scrim:           var(--ink-88);
  --color-glass:           var(--paper-32);

  /* ---- Borders -------------------------------------------------------- */
  --color-border-subtle:   var(--ink-16);
  --color-border-default:  var(--ink-32);
  --color-border-strong:   var(--ink-48);
  --color-border-inverse:  var(--brand-midnight-green);
  --color-border-control:        var(--ink-64);  /* edges of inputs, checkboxes, switches: 3:1+ on Ivory */
  --color-border-control-strong: var(--ink-88);

  /* ---- Text ----------------------------------------------------------- */
  --color-text-strong:      var(--brand-midnight-green);
  --color-text-primary:     var(--brand-midnight-green);
  --color-text-value:       var(--brand-midnight-green);
  --color-text-body:        var(--ink-88);
  --color-text-secondary:   var(--ink-72);
  --color-text-tertiary:    var(--ink-64);
  --color-text-placeholder: var(--ink-64);
  --color-text-disabled:    var(--ink-48);
  /* Moonstone, but its d25 shade: the base step is 2.8:1 on Ivory, under the
     4.5:1 that link text needs. */
  --color-text-link:        var(--brand-moonstone-d25);
  --color-text-inverse:     var(--brand-ivory);
  --color-text-on-dark:     var(--brand-ivory);   /* on brand and inverse surfaces, both modes */
  --color-text-on-light:    var(--brand-midnight-green); /* on light-only surfaces such as the gradients */
  --color-knob:             var(--brand-ivory);   /* switch and slider thumbs, both modes */

  /* ---- Disabled ------------------------------------------------------- */
  --color-disabled-fill:        var(--ink-16);
  --color-disabled-fill-subtle: var(--ink-8);
  --color-disabled-on-fill:     var(--ink-48);
  --color-disabled-border:      var(--ink-24);

  /* ---- Feedback ------------------------------------------------------- */
  --color-success-bg:      var(--brand-pulse-green-l80);
  --color-success-accent:  var(--brand-pulse-green);
  --color-success-text:    var(--brand-midnight-green);
  --color-success-icon:    var(--brand-pulse-green-d50);
  --color-success-dot:     var(--brand-pulse-green);
  --color-success-solid:   var(--brand-pulse-green);
  --color-on-success-solid: var(--brand-midnight-green);

  --color-warning-bg:      var(--brand-saffron-l80);
  --color-warning-accent:  var(--brand-saffron-d50);
  --color-warning-accent-soft: var(--brand-saffron-d25);
  --color-warning-text:    var(--brand-midnight-green);
  --color-warning-icon:    var(--brand-midnight-green);
  --color-warning-dot:     var(--brand-saffron-d25);
  --color-warning-solid:   var(--brand-saffron);
  --color-on-warning-solid: var(--brand-midnight-green);

  /* Error: the brand palette has no red, so the red scale is the one exception. */
  --color-error-bg:        var(--red-20);
  --color-error-bg-strong: var(--red-30);
  --color-error-accent:    var(--red-70);
  --color-error-border:    var(--red-80);
  --color-error-text:      var(--red-90);
  --color-error-text-strong: var(--red-100);
  --color-error-icon:      var(--red-60);
  --color-error-fg:        var(--red-70);   /* error text and borders on a surface */
  --color-error-solid:     var(--red-60);
  --color-on-error-solid:  var(--brand-ivory);

  --color-note-bg:         var(--brand-neutral);
  --color-note-accent:     var(--ink-64);
  --color-note-border:     var(--ink-48);
  --color-note-icon:       var(--ink-64);
  --color-note-text:       var(--ink-88);
  --color-note-text-strong: var(--brand-midnight-green);

  /* ---- Rating, categories -------------------------------------------- */
  --color-rating: var(--brand-saffron);

  --color-category-violet-bg:    var(--brand-violet-blue-l80);
  --color-category-violet-fg:    var(--brand-violet-blue);
  --color-category-tangerine-bg: var(--brand-tangerine-l80);
  --color-category-tangerine-fg: var(--brand-midnight-green);
  --color-category-neutral-bg:   var(--brand-neutral);
  --color-category-neutral-fg:   var(--ink-72);

  /* ---- Gradients (semantic uses of the brand gradients) --------------- */
  --gradient-hero:   var(--brand-gradient-triad-2);
  --gradient-accent: var(--brand-gradient-dyad-1);
  --gradient-soft:   var(--brand-gradient-dyad-3);

  /* ---- Type roles ----------------------------------------------------- */
  /* Serif for display and titles, sans for UI and body. Flip a role here. */
  --font-family-display: var(--font-family-serif);
  --font-family-ui:      var(--font-family-sans);
  --font-family-brand:   var(--font-family-sans);   /* v1 name, kept as an alias */
  --font-weight-display: var(--font-weight-regular); /* the serif ships Regular only */

  --type-title-1-size: var(--font-size-22);
  --type-title-2-size: var(--font-size-20);
  --type-title-3-size: var(--font-size-18);
  --type-small-title-1-size: var(--font-size-16);
  --type-small-title-2-size: var(--font-size-14);
  --type-small-title-2-leading: var(--line-height-114);
  --type-para-16-size: var(--font-size-16);
  --type-para-14-size: var(--font-size-14);
  --type-para-14-leading: var(--line-height-114);
  --type-para-13-size: var(--font-size-13);
  --type-para-12-size: var(--font-size-12);
  --type-para-11-size: var(--font-size-11);
  --type-label-12-size: var(--font-size-12);
  --type-label-10-size: var(--font-size-10);
  --type-display-size: var(--font-size-28);

  /* ---- Elevation roles ------------------------------------------------ */
  --elevation-raised:   var(--shadow-sm);
  --elevation-card:     var(--shadow-md);
  --elevation-card-lg:  var(--shadow-lg);
  --elevation-overlay:  var(--shadow-xl);
}

/*@@dark*/
/* ==========================================================================
   2b. SEMANTIC, DARK MODE
   Built from the toolkit: Logo Green page, Ivory-tinted raised surfaces,
   Ivory text, Pulse and Fresh Green actions. Every semantic colour token that
   exists in light mode is redefined here (lint rule R9). The OS-preference copy
   below must stay identical to this block (lint rule R9 checks it).
   ========================================================================== */

[data-mode="dark"] {
  color-scheme: dark;
  /* Action */
  --color-action: var(--brand-fresh-green);
  --color-action-pressed: var(--brand-green-50);
  --color-action-deep: var(--brand-green-20);
  --color-action-tint: var(--brand-midnight-green);
  --color-action-subtle: var(--brand-pulse-green-d50);
  --color-action-subtle-pressed: var(--brand-pulse-green);
  --color-on-action: var(--brand-midnight-green);
  --color-on-action-pressed: var(--brand-midnight-green);
  --color-control: var(--brand-fresh-green);
  --color-control-pressed: var(--brand-green-50);
  --color-on-control: var(--brand-midnight-green);
  --color-on-control-pressed: var(--brand-midnight-green);
  --color-on-action-subtle: var(--brand-ivory);
  --color-on-action-subtle-pressed: var(--brand-midnight-green);
  --color-action-text: var(--brand-fresh-green);
  --color-action-text-strong: var(--brand-fresh-green);
  --color-action-border: var(--brand-fresh-green);
  --color-action-border-pressed: var(--brand-ivory);
  --color-action-accent: var(--brand-pulse-green);
  --color-action-focus: var(--brand-fresh-green);
  --color-border-focus: var(--brand-fresh-green);
  /* Surfaces */
  --color-surface: var(--brand-logo-green);
  --color-surface-subtle: color-mix(in srgb, var(--brand-ivory) 6%, var(--brand-logo-green));
  --color-surface-muted: color-mix(in srgb, var(--brand-ivory) 10%, var(--brand-logo-green));
  --color-surface-raised: color-mix(in srgb, var(--brand-ivory) 14%, var(--brand-logo-green));
  --color-surface-hover: var(--paper-8);
  --color-surface-inverse: var(--brand-ivory);
  --color-surface-brand: var(--brand-midnight-green);
  --color-scrim: var(--ink-88);
  --color-glass: var(--paper-32);
  /* Borders */
  --color-border-subtle: var(--paper-16);
  --color-border-default: var(--paper-32);
  --color-border-strong: var(--paper-48);
  --color-border-inverse: var(--brand-ivory);
  --color-border-control: var(--paper-64);
  --color-border-control-strong: var(--paper-88);
  /* Text */
  --color-text-strong: var(--brand-ivory);
  --color-text-primary: var(--brand-ivory);
  --color-text-value: var(--brand-ivory);
  --color-text-body: var(--paper-88);
  --color-text-secondary: var(--paper-72);
  --color-text-tertiary: var(--paper-64);
  --color-text-placeholder: var(--paper-64);
  --color-text-disabled: var(--paper-48);
  --color-text-link: var(--brand-aquamarine);
  --color-text-inverse: var(--brand-midnight-green);
  --color-text-on-dark: var(--brand-ivory);
  --color-text-on-light: var(--brand-midnight-green);
  --color-knob: var(--brand-ivory);
  /* Disabled */
  --color-disabled-fill: var(--paper-16);
  --color-disabled-fill-subtle: var(--paper-8);
  --color-disabled-on-fill: var(--paper-48);
  --color-disabled-border: var(--paper-24);
  /* Feedback */
  --color-success-bg: color-mix(in srgb, var(--brand-pulse-green) 20%, var(--brand-midnight-green));
  --color-success-accent: var(--brand-pulse-green);
  --color-success-text: var(--brand-ivory);
  --color-success-icon: var(--brand-fresh-green);
  --color-success-dot: var(--brand-pulse-green);
  --color-success-solid: var(--brand-pulse-green);
  --color-on-success-solid: var(--brand-midnight-green);
  --color-warning-bg: color-mix(in srgb, var(--brand-saffron) 22%, var(--brand-midnight-green));
  --color-warning-accent: var(--brand-saffron);
  --color-warning-accent-soft: var(--brand-saffron-l40);
  --color-warning-text: var(--brand-ivory);
  --color-warning-icon: var(--brand-saffron-l60);
  --color-warning-dot: var(--brand-saffron);
  --color-warning-solid: var(--brand-saffron);
  --color-on-warning-solid: var(--brand-midnight-green);
  --color-error-bg: color-mix(in srgb, var(--red-60) 22%, var(--brand-midnight-green));
  --color-error-bg-strong: color-mix(in srgb, var(--red-60) 40%, var(--brand-midnight-green));
  --color-error-accent: var(--red-40);
  --color-error-border: var(--red-40);
  --color-error-text: var(--red-30);
  --color-error-text-strong: var(--red-20);
  --color-error-icon: var(--red-40);
  --color-error-fg: var(--red-40);
  --color-error-solid: var(--red-60);
  --color-on-error-solid: var(--brand-ivory);
  --color-note-bg: color-mix(in srgb, var(--brand-ivory) 8%, var(--brand-midnight-green));
  --color-note-accent: var(--paper-64);
  --color-note-border: var(--paper-48);
  --color-note-icon: var(--paper-64);
  --color-note-text: var(--paper-88);
  --color-note-text-strong: var(--brand-ivory);
  /* Rating and categories */
  --color-rating: var(--brand-saffron);
  --color-category-violet-bg: color-mix(in srgb, var(--brand-violet-blue) 45%, var(--brand-midnight-green));
  --color-category-violet-fg: var(--brand-ivory);
  --color-category-tangerine-bg: color-mix(in srgb, var(--brand-tangerine) 40%, var(--brand-midnight-green));
  --color-category-tangerine-fg: var(--brand-ivory);
  --color-category-neutral-bg: color-mix(in srgb, var(--brand-ivory) 12%, var(--brand-midnight-green));
  --color-category-neutral-fg: var(--paper-72);
  /* Elevation (stronger in dark, where surfaces carry less contrast) */
  --elevation-raised: var(--shadow-md);
  --elevation-card: var(--shadow-lg);
  --elevation-card-lg: var(--shadow-xl);
  --elevation-overlay: var(--shadow-2xl);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-mode]) {
    color-scheme: dark;
    /* Action */
    --color-action: var(--brand-fresh-green);
    --color-action-pressed: var(--brand-green-50);
    --color-action-deep: var(--brand-green-20);
    --color-action-tint: var(--brand-midnight-green);
    --color-action-subtle: var(--brand-pulse-green-d50);
    --color-action-subtle-pressed: var(--brand-pulse-green);
    --color-on-action: var(--brand-midnight-green);
    --color-on-action-pressed: var(--brand-midnight-green);
    --color-control: var(--brand-fresh-green);
    --color-control-pressed: var(--brand-green-50);
    --color-on-control: var(--brand-midnight-green);
    --color-on-control-pressed: var(--brand-midnight-green);
    --color-on-action-subtle: var(--brand-ivory);
    --color-on-action-subtle-pressed: var(--brand-midnight-green);
    --color-action-text: var(--brand-fresh-green);
    --color-action-text-strong: var(--brand-fresh-green);
    --color-action-border: var(--brand-fresh-green);
    --color-action-border-pressed: var(--brand-ivory);
    --color-action-accent: var(--brand-pulse-green);
    --color-action-focus: var(--brand-fresh-green);
    --color-border-focus: var(--brand-fresh-green);
    /* Surfaces */
    --color-surface: var(--brand-logo-green);
    --color-surface-subtle: color-mix(in srgb, var(--brand-ivory) 6%, var(--brand-logo-green));
    --color-surface-muted: color-mix(in srgb, var(--brand-ivory) 10%, var(--brand-logo-green));
    --color-surface-raised: color-mix(in srgb, var(--brand-ivory) 14%, var(--brand-logo-green));
    --color-surface-hover: var(--paper-8);
    --color-surface-inverse: var(--brand-ivory);
    --color-surface-brand: var(--brand-midnight-green);
    --color-scrim: var(--ink-88);
    --color-glass: var(--paper-32);
    /* Borders */
    --color-border-subtle: var(--paper-16);
    --color-border-default: var(--paper-32);
    --color-border-strong: var(--paper-48);
    --color-border-inverse: var(--brand-ivory);
    --color-border-control: var(--paper-64);
    --color-border-control-strong: var(--paper-88);
    /* Text */
    --color-text-strong: var(--brand-ivory);
    --color-text-primary: var(--brand-ivory);
    --color-text-value: var(--brand-ivory);
    --color-text-body: var(--paper-88);
    --color-text-secondary: var(--paper-72);
    --color-text-tertiary: var(--paper-64);
    --color-text-placeholder: var(--paper-64);
    --color-text-disabled: var(--paper-48);
    --color-text-link: var(--brand-aquamarine);
    --color-text-inverse: var(--brand-midnight-green);
    --color-text-on-dark: var(--brand-ivory);
    --color-text-on-light: var(--brand-midnight-green);
    --color-knob: var(--brand-ivory);
    /* Disabled */
    --color-disabled-fill: var(--paper-16);
    --color-disabled-fill-subtle: var(--paper-8);
    --color-disabled-on-fill: var(--paper-48);
    --color-disabled-border: var(--paper-24);
    /* Feedback */
    --color-success-bg: color-mix(in srgb, var(--brand-pulse-green) 20%, var(--brand-midnight-green));
    --color-success-accent: var(--brand-pulse-green);
    --color-success-text: var(--brand-ivory);
    --color-success-icon: var(--brand-fresh-green);
    --color-success-dot: var(--brand-pulse-green);
    --color-success-solid: var(--brand-pulse-green);
    --color-on-success-solid: var(--brand-midnight-green);
    --color-warning-bg: color-mix(in srgb, var(--brand-saffron) 22%, var(--brand-midnight-green));
    --color-warning-accent: var(--brand-saffron);
    --color-warning-accent-soft: var(--brand-saffron-l40);
    --color-warning-text: var(--brand-ivory);
    --color-warning-icon: var(--brand-saffron-l60);
    --color-warning-dot: var(--brand-saffron);
    --color-warning-solid: var(--brand-saffron);
    --color-on-warning-solid: var(--brand-midnight-green);
    --color-error-bg: color-mix(in srgb, var(--red-60) 22%, var(--brand-midnight-green));
    --color-error-bg-strong: color-mix(in srgb, var(--red-60) 40%, var(--brand-midnight-green));
    --color-error-accent: var(--red-40);
    --color-error-border: var(--red-40);
    --color-error-text: var(--red-30);
    --color-error-text-strong: var(--red-20);
    --color-error-icon: var(--red-40);
    --color-error-fg: var(--red-40);
    --color-error-solid: var(--red-60);
    --color-on-error-solid: var(--brand-ivory);
    --color-note-bg: color-mix(in srgb, var(--brand-ivory) 8%, var(--brand-midnight-green));
    --color-note-accent: var(--paper-64);
    --color-note-border: var(--paper-48);
    --color-note-icon: var(--paper-64);
    --color-note-text: var(--paper-88);
    --color-note-text-strong: var(--brand-ivory);
    /* Rating and categories */
    --color-rating: var(--brand-saffron);
    --color-category-violet-bg: color-mix(in srgb, var(--brand-violet-blue) 45%, var(--brand-midnight-green));
    --color-category-violet-fg: var(--brand-ivory);
    --color-category-tangerine-bg: color-mix(in srgb, var(--brand-tangerine) 40%, var(--brand-midnight-green));
    --color-category-tangerine-fg: var(--brand-ivory);
    --color-category-neutral-bg: color-mix(in srgb, var(--brand-ivory) 12%, var(--brand-midnight-green));
    --color-category-neutral-fg: var(--paper-72);
    /* Elevation (stronger in dark, where surfaces carry less contrast) */
    --elevation-raised: var(--shadow-md);
    --elevation-card: var(--shadow-lg);
    --elevation-card-lg: var(--shadow-xl);
    --elevation-overlay: var(--shadow-2xl);
  }
}
/*@@dark-end*/

/*@@accent-themes*/
/* --------------------------------------------------------------------------
   Accent themes: Moonstone, Violet Blue, Saffron and Tangerine. They re-point
   only the action group at --palette-*. Surfaces, text and feedback stay on
   the brand. Pulse Green (the default) is not in this list.

   Unlike the default theme, the accents are held to WCAG AA, so each one is
   paired with whichever text colour clears 4.5:1 on it rather than following a
   single rule. Moonstone and Saffron fill with their base step and press to a
   lighter one, both carrying Midnight Green. Violet Blue is dark enough at its
   base step that Midnight Green on it falls to 2.2:1, so that fill carries
   Ivory while its lighter pressed step goes back to Midnight Green. Tangerine
   fills with a deep step and carries Ivory throughout.
   Step 80 of a warm accent is never a fill: it lands in the dead zone where
   neither Midnight Green (3.9:1) nor Ivory (3.7:1) reaches AA.
   Every rule here must cover the same tokens as the dark overrides below
   (lint rule R10).
   -------------------------------------------------------------------------- */
[data-theme="moonstone"],
[data-theme="saffron"] {
  --color-action:                var(--palette-60);
  --color-action-pressed:        var(--palette-40);
  --color-action-deep:           var(--palette-100);
  --color-action-tint:           var(--palette-10);
  --color-action-subtle:         var(--palette-20);
  --color-action-subtle-pressed: var(--palette-40);
  --color-on-action:             var(--brand-midnight-green);
  --color-on-action-pressed:     var(--brand-midnight-green);
  --color-control:               var(--palette-60);
  --color-control-pressed:       var(--palette-40);
  --color-on-control:            var(--brand-midnight-green);
  --color-on-control-pressed:    var(--brand-midnight-green);
  --color-on-action-subtle:      var(--palette-100);
  --color-on-action-subtle-pressed: var(--brand-midnight-green);
  --color-action-text:           var(--palette-100);
  --color-action-text-strong:    var(--palette-90);
  --color-action-border:         var(--palette-80);
  --color-action-border-pressed: var(--palette-90);
  --color-action-accent:         var(--palette-60);
  --color-action-focus:          var(--palette-100);
  --color-border-focus:          var(--palette-80);
}
[data-theme="violet-blue"] {
  --color-action:                var(--palette-60);
  --color-action-pressed:        var(--palette-40);
  --color-action-deep:           var(--palette-100);
  --color-action-tint:           var(--palette-10);
  --color-action-subtle:         var(--palette-20);
  --color-action-subtle-pressed: var(--palette-40);
  --color-on-action:             var(--brand-ivory);
  --color-on-action-pressed:     var(--brand-midnight-green);
  --color-control:               var(--palette-60);
  --color-control-pressed:       var(--palette-40);
  --color-on-control:            var(--brand-ivory);
  --color-on-control-pressed:    var(--brand-midnight-green);
  --color-on-action-subtle:      var(--palette-100);
  --color-on-action-subtle-pressed: var(--brand-midnight-green);
  --color-action-text:           var(--palette-100);
  --color-action-text-strong:    var(--palette-90);
  --color-action-border:         var(--palette-80);
  --color-action-border-pressed: var(--palette-90);
  --color-action-accent:         var(--palette-60);
  --color-action-focus:          var(--palette-100);
  --color-border-focus:          var(--palette-80);
}
[data-theme="tangerine"] {
  --color-action:                var(--palette-90);
  --color-action-pressed:        var(--palette-100);
  --color-action-deep:           var(--palette-100);
  --color-action-tint:           var(--palette-10);
  --color-action-subtle:         var(--palette-20);
  --color-action-subtle-pressed: var(--palette-40);
  --color-on-action:             var(--brand-ivory);
  --color-on-action-pressed:     var(--brand-ivory);
  --color-control:               var(--palette-90);
  --color-control-pressed:       var(--palette-100);
  --color-on-control:            var(--brand-ivory);
  --color-on-control-pressed:    var(--brand-ivory);
  --color-on-action-subtle:      var(--palette-100);
  --color-on-action-subtle-pressed: var(--brand-midnight-green);
  --color-action-text:           var(--palette-100);
  --color-action-text-strong:    var(--palette-90);
  --color-action-border:         var(--palette-80);
  --color-action-border-pressed: var(--palette-90);
  --color-action-accent:         var(--palette-60);
  --color-action-focus:          var(--palette-100);
  --color-border-focus:          var(--palette-80);
}


/*@@accent-dark*/
/* --------------------------------------------------------------------------
   Accent themes in dark mode. The action group keeps the same base fill and
   lighter pressed step as light mode, so the text pairing holds in both modes;
   what changes is the tint, the subtle fill and the borders, which flip to the
   dark end of the ramp. Must cover the same tokens as the light overrides
   (lint rule R10).
   -------------------------------------------------------------------------- */
[data-mode="dark"][data-theme="moonstone"],
[data-mode="dark"] [data-theme="moonstone"],
[data-mode="dark"][data-theme="saffron"],
[data-mode="dark"] [data-theme="saffron"],
[data-mode="dark"][data-theme="tangerine"],
[data-mode="dark"] [data-theme="tangerine"] {
  --color-action: var(--palette-60);
  --color-action-pressed: var(--palette-40);
  --color-action-deep: var(--palette-20);
  --color-action-tint: var(--brand-midnight-green);
  --color-action-subtle: var(--palette-100);
  --color-action-subtle-pressed: var(--palette-40);
  --color-on-action: var(--brand-midnight-green);
  --color-on-action-pressed: var(--brand-midnight-green);
  --color-control: var(--palette-60);
  --color-control-pressed: var(--palette-40);
  --color-on-control: var(--brand-midnight-green);
  --color-on-control-pressed: var(--brand-midnight-green);
  --color-on-action-subtle: var(--palette-10);
  --color-on-action-subtle-pressed: var(--brand-midnight-green);
  --color-action-text: var(--palette-20);
  --color-action-text-strong: var(--palette-10);
  --color-action-border: var(--palette-30);
  --color-action-border-pressed: var(--palette-20);
  --color-action-accent: var(--palette-40);
  --color-action-focus: var(--palette-30);
  --color-border-focus: var(--palette-30);
}
[data-mode="dark"][data-theme="violet-blue"],
[data-mode="dark"] [data-theme="violet-blue"] {
  --color-action: var(--palette-60);
  --color-action-pressed: var(--palette-40);
  --color-action-deep: var(--palette-20);
  --color-action-tint: var(--brand-midnight-green);
  --color-action-subtle: var(--palette-100);
  --color-action-subtle-pressed: var(--palette-40);
  --color-on-action: var(--brand-ivory);
  --color-on-action-pressed: var(--brand-midnight-green);
  --color-control: var(--palette-60);
  --color-control-pressed: var(--palette-40);
  --color-on-control: var(--brand-ivory);
  --color-on-control-pressed: var(--brand-midnight-green);
  --color-on-action-subtle: var(--palette-10);
  --color-on-action-subtle-pressed: var(--brand-midnight-green);
  --color-action-text: var(--palette-20);
  --color-action-text-strong: var(--palette-10);
  --color-action-border: var(--palette-30);
  --color-action-border-pressed: var(--palette-20);
  --color-action-accent: var(--palette-40);
  --color-action-focus: var(--palette-30);
  --color-border-focus: var(--palette-30);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-mode])[data-theme="moonstone"],
  :root:not([data-mode])[data-theme="saffron"],
  :root:not([data-mode])[data-theme="tangerine"] {
    --color-action: var(--palette-60);
    --color-action-pressed: var(--palette-40);
    --color-action-deep: var(--palette-20);
    --color-action-tint: var(--brand-midnight-green);
    --color-action-subtle: var(--palette-100);
    --color-action-subtle-pressed: var(--palette-40);
    --color-on-action: var(--brand-midnight-green);
    --color-on-action-pressed: var(--brand-midnight-green);
    --color-control: var(--palette-60);
    --color-control-pressed: var(--palette-40);
    --color-on-control: var(--brand-midnight-green);
    --color-on-control-pressed: var(--brand-midnight-green);
    --color-on-action-subtle: var(--palette-10);
    --color-on-action-subtle-pressed: var(--brand-midnight-green);
    --color-action-text: var(--palette-20);
    --color-action-text-strong: var(--palette-10);
    --color-action-border: var(--palette-30);
    --color-action-border-pressed: var(--palette-20);
    --color-action-accent: var(--palette-40);
    --color-action-focus: var(--palette-30);
    --color-border-focus: var(--palette-30);
  }
  :root:not([data-mode])[data-theme="violet-blue"] {
    --color-action: var(--palette-60);
    --color-action-pressed: var(--palette-40);
    --color-action-deep: var(--palette-20);
    --color-action-tint: var(--brand-midnight-green);
    --color-action-subtle: var(--palette-100);
    --color-action-subtle-pressed: var(--palette-40);
    --color-on-action: var(--brand-ivory);
    --color-on-action-pressed: var(--brand-midnight-green);
    --color-control: var(--palette-60);
    --color-control-pressed: var(--palette-40);
    --color-on-control: var(--brand-ivory);
    --color-on-control-pressed: var(--brand-midnight-green);
    --color-on-action-subtle: var(--palette-10);
    --color-on-action-subtle-pressed: var(--brand-midnight-green);
    --color-action-text: var(--palette-20);
    --color-action-text-strong: var(--palette-10);
    --color-action-border: var(--palette-30);
    --color-action-border-pressed: var(--palette-20);
    --color-action-accent: var(--palette-40);
    --color-action-focus: var(--palette-30);
    --color-border-focus: var(--palette-30);
  }
}
/*@@accent-dark-end*/

/*@@tier-3*/
/* ==========================================================================
   3. COMPONENT  (colours come from semantic tokens only; mode-blind)
   Declared on every [data-mode] and [data-theme] scope as well as :root, so a
   wrapper with its own mode or theme recomputes these from its own semantics.
   ========================================================================== */

:root,
[data-mode],
[data-theme] {
  /* ---- Icon sizes ----------------------------------------------------- */
  --icon-size-xs: 10px;
  --icon-size-sm: 16px;
  --icon-size-md: 20px;
  --icon-size-lg: 24px;
  --icon-size-xl: 28px;
  --icon-stroke-width: 1.5;

  /* ---- Button --------------------------------------------------------- */
  --button-font-family: var(--font-family-ui);
  --button-radius: var(--radius-s);
  --button-gap: var(--space-4);
  --button-border-width: var(--border-width-1);

  --button-xl-height: 49px;  --button-xl-padding-x: var(--space-12);
  --button-xl-font-size: var(--font-size-17);  --button-xl-icon: var(--icon-size-lg);
  --button-lg-height: 41px;  --button-lg-padding-x: var(--space-8);
  --button-lg-font-size: var(--font-size-17);  --button-lg-icon: var(--icon-size-lg);
  --button-md-height: 30px;  --button-md-padding-x: var(--space-12);
  --button-md-font-size: var(--font-size-14);  --button-md-icon: var(--icon-size-md);
  --button-sm-height: 20px;  --button-sm-padding-x: var(--space-12);
  --button-sm-font-size: var(--font-size-12);  --button-sm-icon: var(--icon-size-sm);

  /* primary */
  --button-primary-bg: var(--color-action);
  --button-primary-bg-pressed: var(--color-action-pressed);
  --button-primary-fg: var(--color-on-action);
  --button-primary-fg-pressed: var(--color-on-action-pressed);
  /* secondary */
  --button-secondary-bg: var(--color-action-subtle);
  --button-secondary-bg-pressed: var(--color-action-subtle-pressed);
  --button-secondary-fg: var(--color-on-action-subtle);
  --button-secondary-fg-pressed: var(--color-on-action-subtle-pressed);
  /* outline */
  --button-outline-bg: transparent;
  --button-outline-bg-pressed: var(--color-action-subtle);
  --button-outline-border: var(--color-action-border);
  --button-outline-border-pressed: var(--color-action-border-pressed);
  --button-outline-fg: var(--color-action-text);
  --button-outline-fg-pressed: var(--color-on-action-subtle);
  /* ghost */
  --button-ghost-bg: transparent;
  --button-ghost-bg-pressed: var(--color-action-subtle);
  --button-ghost-fg: var(--color-action-text);
  --button-ghost-fg-pressed: var(--color-on-action-subtle);
  /* disabled */
  --button-disabled-bg: var(--color-disabled-fill);
  --button-disabled-bg-subtle: var(--color-disabled-fill-subtle);
  --button-disabled-fg-on-fill: var(--color-disabled-on-fill);
  --button-disabled-fg: var(--color-text-disabled);
  --button-disabled-border: var(--color-disabled-border);

  --button-set-gap: var(--space-16);

  /* ---- Link ----------------------------------------------------------- */
  --link-color: var(--color-text-link);
  --link-color-disabled: var(--color-text-disabled);
  --link-sm-size: var(--font-size-12);
  --link-md-size: var(--font-size-14);
  --link-lg-size: var(--font-size-16);

  /* ---- Icon button / FAB / close ------------------------------------- */
  --icon-button-bg: var(--color-surface-muted);
  --icon-button-fg: var(--color-text-body);
  --icon-button-bg-selected: var(--color-action);
  --icon-button-fg-selected: var(--color-on-action);
  --icon-button-ghost-bg-selected: var(--color-action-subtle);
  --icon-button-ghost-fg-selected: var(--color-text-strong);
  --icon-button-lg: 40px;
  --icon-button-sm: 24px;
  --icon-button-padding-lg: var(--space-8);
  --icon-button-padding-sm: var(--space-4);

  --fab-size: 52px;
  --fab-radius: var(--radius-m);
  --fab-shadow: var(--elevation-raised);
  --fab-filled-bg: var(--color-action);
  --fab-filled-bg-pressed: var(--color-action-pressed);
  --fab-filled-fg: var(--color-on-action);
  --fab-tonal-bg: var(--color-action-subtle);
  --fab-tonal-bg-pressed: var(--color-action-subtle-pressed);
  --fab-tonal-fg: var(--color-on-action-subtle);
  --fab-tonal-fg-pressed: var(--color-on-action-subtle-pressed);

  --close-button-size: 24px;
  --close-button-fg: var(--color-text-secondary);
  --close-button-bg-pressed: var(--color-action-tint);

  /* ---- Text field ----------------------------------------------------- */
  --input-height: 40px;
  --input-radius: var(--radius-m);
  --input-padding-x: var(--space-16);
  --input-gap: var(--space-8);
  --input-font-size: var(--font-size-14);
  --input-width-full: 320px;
  --input-width-half: 152px;
  --input-bg: var(--color-surface);
  --input-fg: var(--color-text-value);
  --input-placeholder: var(--color-text-placeholder);
  --input-border: var(--color-border-control);
  --input-border-filled: var(--color-border-control-strong);
  --input-border-focus: var(--color-border-focus);
  --input-border-error: var(--color-error-fg);
  --input-icon-valid: var(--color-success-icon);
  --input-icon-error: var(--color-error-icon);
  --input-bg-disabled: var(--color-surface-muted);
  --input-fg-disabled: var(--color-text-placeholder);
  --input-border-disabled: var(--color-border-strong);
  --input-affix-fg: var(--color-text-placeholder);

  --field-label-size: var(--font-size-14);
  --field-label-fg: var(--color-text-value);
  --field-hint-fg: var(--color-text-body);
  --field-error-fg: var(--color-error-fg);
  --field-gap: var(--space-4);
  --textarea-min-height: 180px;

  /* ---- OTP digit boxes ------------------------------------------------ */
  --digit-size: 32px;
  --digit-gap: var(--space-8);
  --digit-font-size: var(--font-size-20);
  --digit-border: var(--color-border-control);
  --digit-border-active: var(--color-border-focus);
  --digit-border-error: var(--color-error-border);
  --digit-fg: var(--color-text-strong);

  /* ---- Checkbox / radio / switch ------------------------------------- */
  --check-size-lg: 24px;
  --check-size-sm: 16px;
  --check-radius: var(--radius-xs);
  --check-bg: var(--color-surface-subtle);
  --check-border: var(--color-border-control);
  --check-bg-checked: var(--color-control);
  --check-bg-indeterminate: var(--color-control);
  --check-bg-disabled-checked: var(--color-disabled-border);
  --check-fg-disabled: var(--color-text-strong);
  --check-fg: var(--color-on-control);
  --check-bg-disabled: var(--color-disabled-fill);
  --check-border-disabled: var(--color-disabled-fill);
  --radio-border-selected: var(--color-action-border);
  --radio-dot: var(--color-control);
  --radio-dot-ratio: 0.6667;

  --switch-width: 44px;
  --switch-width-label: 48px;
  --switch-height: 24px;
  --switch-thumb: 21px;
  --switch-inset: 1.5px;
  --switch-track-off: var(--color-border-control);
  --switch-track-on: var(--color-control);
  --switch-thumb-bg: var(--color-knob);
  --switch-label-off: var(--color-text-inverse);
  --switch-label-on: var(--color-on-control);
  --switch-track-disabled: var(--color-disabled-fill);
  --switch-thumb-disabled: var(--color-surface-muted);
  --switch-shadow: var(--shadow-sm);

  /* ---- Slider --------------------------------------------------------- */
  --slider-track-height: 4px;
  --slider-track-radius: 10px;
  --slider-track-fill: var(--color-control);
  --slider-track-rest: var(--color-border-subtle);
  --slider-thumb-size: 15px;
  --slider-thumb-bg: var(--color-knob);
  --slider-thumb-border: var(--color-border-control);
  --slider-thumb-border-active: var(--color-action-border);
  --slider-thumb-shadow: var(--shadow-sm);

  /* ---- Dropdown ------------------------------------------------------- */
  --dropdown-bg: var(--color-surface-raised);
  --dropdown-radius: var(--radius-4);
  --dropdown-shadow: var(--elevation-card);
  --dropdown-padding-y: var(--space-4);
  --dropdown-width: 288px;
  --dropdown-item-padding: var(--space-16);
  --dropdown-item-gap: var(--space-8);
  --dropdown-item-size: var(--font-size-16);
  --dropdown-item-fg: var(--color-text-strong);
  --dropdown-item-sub: var(--color-text-secondary);
  --dropdown-item-bg-hover: var(--color-surface-hover);
  --dropdown-item-fg-selected: var(--color-action-text);
  --dropdown-item-fg-disabled: var(--color-text-disabled);

  /* ---- Chips and tags ------------------------------------------------- */
  --chip-radius: var(--radius-s);
  --chip-lg-height: 32px;  --chip-lg-padding-x: var(--space-16);
  --chip-lg-font-size: var(--font-size-14);  --chip-lg-icon: var(--icon-size-lg);
  --chip-sm-height: 24px;  --chip-sm-padding-x: var(--space-12);
  --chip-sm-font-size: var(--font-size-10);  --chip-sm-icon: var(--icon-size-sm);
  --chip-gap: var(--space-4);

  --chip-primary-bg: var(--color-control);
  --chip-primary-bg-selected: var(--color-control-pressed);
  --chip-primary-fg: var(--color-on-control);
  --chip-primary-fg-selected: var(--color-on-control-pressed);
  --chip-primary-icon: var(--color-on-control);
  --chip-secondary-bg: var(--color-action-subtle);
  --chip-secondary-bg-selected: var(--color-action-subtle-pressed);
  --chip-secondary-fg: var(--color-on-action-subtle);
  --chip-secondary-fg-selected: var(--color-on-action-subtle-pressed);
  --chip-outline-bg: var(--color-surface);
  --chip-outline-bg-selected: var(--color-action-subtle);
  --chip-outline-border: var(--color-border-inverse);
  --chip-outline-border-selected: var(--color-action-border);
  --chip-outline-fg: var(--color-text-body);
  --chip-outline-fg-selected: var(--color-on-action-subtle);
  --chip-grey-bg: var(--color-surface-muted);
  --chip-grey-fg: var(--color-text-body);

  /* ---- Status badge (solid, with count) ------------------------------- */
  --badge-height: 20px;
  --badge-radius: var(--radius-s);
  --badge-padding: var(--space-2) var(--space-8) var(--space-2) var(--space-4);
  --badge-font-size: var(--font-size-10);
  --badge-green-bg: var(--color-success-solid);   --badge-green-fg: var(--color-on-success-solid);
  --badge-grey-bg: var(--color-surface-muted);    --badge-grey-fg: var(--color-text-secondary);
  --badge-yellow-bg: var(--color-warning-solid);  --badge-yellow-fg: var(--color-on-warning-solid);
  --badge-red-bg: var(--color-error-solid);       --badge-red-fg: var(--color-on-error-solid);

  /* ---- Status indicator (soft, with dot) ------------------------------ */
  --indicator-radius: var(--radius-pill);
  --indicator-padding: var(--space-2) var(--space-4);
  --indicator-gap: var(--space-2);
  --indicator-dot-sm: 8px;
  --indicator-dot-lg: 12px;
  --indicator-font-sm: var(--font-size-10);
  --indicator-font-lg: var(--font-size-12);
  --indicator-green-bg: var(--color-success-bg);   --indicator-green-dot: var(--color-success-dot);   --indicator-green-fg: var(--color-success-icon);
  --indicator-grey-bg: var(--color-surface-subtle); --indicator-grey-dot: var(--color-border-strong);  --indicator-grey-fg: var(--color-text-secondary);
  --indicator-yellow-bg: var(--color-warning-bg);  --indicator-yellow-dot: var(--color-warning-dot);  --indicator-yellow-fg: var(--color-warning-text);
  --indicator-red-bg: var(--color-error-bg-strong); --indicator-red-dot: var(--color-error-solid);    --indicator-red-fg: var(--color-error-border);

  /* ---- Avatar --------------------------------------------------------- */
  --avatar-sm: 24px;  --avatar-md: 40px;  --avatar-lg: 56px;
  --avatar-sm-font: var(--font-size-12);
  --avatar-md-font: var(--font-size-16);
  --avatar-lg-font: var(--font-size-28);
  --avatar-bg: var(--color-action-subtle);
  --avatar-fg: var(--color-action-text);
  --avatar-group-overlap: calc(var(--space-8) * -1);
  --avatar-group-shadow: var(--shadow-md);
  --avatar-violet-bg: var(--color-category-violet-bg);        --avatar-violet-fg: var(--color-category-violet-fg);
  --avatar-tangerine-bg: var(--color-category-tangerine-bg);  --avatar-tangerine-fg: var(--color-category-tangerine-fg);
  --avatar-neutral-bg: var(--color-category-neutral-bg);      --avatar-neutral-fg: var(--color-category-neutral-fg);
  --avatar-neutral-border: var(--color-border-default);

  /* ---- Rating --------------------------------------------------------- */
  --rating-star-size: 16px;
  --rating-star-overlap: calc(var(--space-2) * -1);
  --rating-star-empty: var(--color-border-default);

  /* ---- Cards ---------------------------------------------------------- */
  --card-radius: var(--radius-m);
  --card-bg: var(--color-surface-raised);
  --card-bg-tinted: var(--color-surface-subtle);
  --card-border: var(--color-border-subtle);
  --card-shadow-borderless: var(--elevation-card-lg);
  --card-shadow-bordered: var(--elevation-raised);
  --card-shadow-horizontal: var(--elevation-card);
  --card-title-size: var(--font-size-22);
  --card-title-fg: var(--color-text-primary);
  --card-subtitle-size: var(--font-size-16);
  --card-subtitle-fg: var(--color-text-secondary);
  --card-wide-width: 328px;
  --card-wide-height: 110px;
  --card-long-width: 160px;
  --card-long-height: 180px;
  --card-horizontal-height: 80px;
  --card-horizontal-media: 85px;
  --card-image-media-height: 97px;
  --card-doc-height: 56px;
  --card-padding: var(--space-12);
  --card-gap: var(--space-8);

  /* ---- Accordion ------------------------------------------------------ */
  --accordion-border: var(--color-border-subtle);
  --accordion-header-height: 40px;
  --accordion-header-padding: var(--space-8) var(--space-16);
  --accordion-header-bg: var(--color-surface-raised);
  --accordion-header-bg-open: var(--color-surface-subtle);
  --accordion-header-shadow-open: var(--elevation-card);
  --accordion-header-size: var(--font-size-14);
  --accordion-header-fg: var(--color-text-strong);
  --accordion-body-padding: var(--space-8) var(--space-16) var(--space-16);
  --accordion-body-size: var(--font-size-13);
  --accordion-body-fg: var(--color-text-secondary);
  --accordion-gap: var(--space-8);

  /* ---- List item ------------------------------------------------------ */
  --list-item-min-height: 64px;
  --list-item-padding-x: var(--space-12);
  --list-item-gap: var(--space-8);
  --list-item-text-padding-y: var(--space-12);
  --list-item-lead: 36px;
  --list-item-lead-radius: var(--radius-m);
  --avatar-radius: var(--radius-s);
  --alert-radius: var(--radius-m);
  --toast-radius: var(--radius-m);
  --list-item-lead-bg: var(--color-surface-muted);
  --list-item-title-size: var(--font-size-16);
  --list-item-title-fg: var(--color-text-strong);
  --list-item-sub-size: var(--font-size-13);
  --list-item-sub-fg: var(--color-text-secondary);
  --list-item-divider: var(--color-border-subtle);

  /* ---- Divider -------------------------------------------------------- */
  --divider-color: var(--color-border-subtle);
  --divider-width: var(--border-width-1);
  --divider-width-vertical: var(--border-width-field-focus);
  --divider-label-gap: var(--space-12);
  --divider-label-size: var(--font-size-13);
  --divider-label-fg: var(--color-text-tertiary);

  /* ---- Alerts --------------------------------------------------------- */
  --alert-width: 238px;
  --alert-padding: var(--space-8);
  --alert-gap: var(--space-8);
  --alert-title-size: var(--font-size-16);
  --alert-note-size: var(--font-size-13);
  --alert-accent-width: var(--border-width-4);
  --alert-link-padding: var(--space-16) var(--space-12) var(--space-12) var(--space-4);

  /* ---- Toast ---------------------------------------------------------- */
  --toast-width: 320px;
  --toast-padding: var(--space-4) var(--space-8) var(--space-4) var(--space-4);
  --toast-gap: var(--space-8);
  --toast-size: var(--font-size-12);
  --toast-border-width: var(--border-width-hairline);
  --toast-icon: var(--icon-size-md);

  /* ---- Tooltip -------------------------------------------------------- */
  --tooltip-padding: var(--space-8) var(--space-12) var(--space-8) var(--space-8);
  --tooltip-gap: var(--space-4);
  --tooltip-size: var(--font-size-14);
  --tooltip-radius: var(--radius-m);
  --tooltip-arrow: 16px;
  --tooltip-arrow-radius: var(--radius-xs);
  --tooltip-arrow-inset: var(--space-16);
  --tooltip-filled-bg: var(--color-surface-inverse);
  --tooltip-filled-fg: var(--color-text-inverse);
  --tooltip-tonal-bg: var(--color-surface-raised);
  --tooltip-tonal-fg: var(--color-text-body);
  --tooltip-tonal-shadow: var(--elevation-card);
  --tooltip-large-width: 327px;

  /* ---- Modal ---------------------------------------------------------- */
  --modal-bg: var(--color-surface-raised);
  --modal-shadow: var(--elevation-overlay);
  --modal-radius: var(--radius-none);
  --modal-padding: var(--space-20);
  --modal-gap: var(--space-8);
  --modal-width: 320px;
  --modal-title-size: var(--font-size-18);
  --modal-title-fg: var(--color-text-strong);
  --modal-body-size: var(--font-size-13);
  --modal-body-fg: var(--color-text-secondary);
  --modal-actions-gap: var(--space-16);

  /* ---- Banner --------------------------------------------------------- */
  --banner-bg: var(--color-surface-brand);
  --banner-bg-gradient: var(--gradient-hero);
  --banner-fg: var(--color-text-on-dark);
  --banner-fg-gradient: var(--color-text-on-light);
  --banner-padding-desktop: var(--space-16) 7rem;
  --banner-padding-mobile: var(--space-16) var(--space-32);
  --banner-title-size-desktop: var(--type-display-size);
  --banner-title-size-mobile: var(--font-size-16);
  --banner-title-weight-desktop: var(--font-weight-display);

  /* ---- Navigation ----------------------------------------------------- */
  --tab-size: var(--font-size-14);
  --tab-gap: var(--space-8);
  --tab-fg: var(--color-text-strong);
  --tab-fg-selected: var(--color-action-text);
  --tab-underline: var(--border-width-2);
  --tab-underline-color: var(--color-action-accent);
  --tab-padding: var(--space-8) var(--space-16);
  --tab-filled-fg: var(--color-text-primary);
  --tab-filled-bg-selected: var(--color-action-tint);
  --tab-rule: var(--color-border-default);
  --tab-gap-underlined: var(--space-24);

  --breadcrumb-size: var(--font-size-12);
  --breadcrumb-fg: var(--color-text-tertiary);
  --breadcrumb-fg-current: var(--color-text-primary);
  --breadcrumb-gap: var(--space-4);
  --breadcrumb-sep: var(--icon-size-xs);

  --topbar-height: 46px;
  --topbar-padding: var(--space-12) var(--space-12);
  --topbar-bg: var(--color-surface-subtle);

  --rail-item-height: 48px;
  --rail-item-radius: var(--radius-m);
  --rail-item-padding-x: var(--space-8);
  --rail-item-gap: var(--space-8);
  --rail-item-size: var(--font-size-14);
  --rail-item-fg: var(--color-text-secondary);
  --rail-item-icon: var(--color-text-tertiary);
  --rail-item-bg-selected: var(--color-action-tint);
  --rail-item-fg-selected: var(--color-action-text);

  --bottom-nav-size: var(--font-size-10);
  --bottom-nav-fg: var(--color-text-secondary);
  --bottom-nav-fg-selected: var(--color-action-text);

  --drawer-bg: var(--color-surface-raised);
  --drawer-border: var(--color-border-subtle);
  --drawer-shadow: var(--elevation-overlay);
  --drawer-radius: var(--radius-l);
  --drawer-handle-width: 84px;
  --drawer-handle-height: 4px;
  --drawer-handle-bg: var(--color-border-default);
  --drawer-width: 360px;

  --toggle-bar-bg: var(--color-surface-muted);
  --toggle-bar-padding: var(--space-4);
  --toggle-bar-gap: var(--space-8);
  --toggle-item-bg-selected: var(--color-surface);
  --toggle-item-shadow-selected: var(--elevation-card);
  --toggle-item-fg: var(--color-text-body);
  --toggle-item-size: var(--font-size-13);
  --toggle-item-height: 24px;

  --carousel-dot: 8px;
  --carousel-dot-bg: var(--color-border-default);
  --carousel-dot-selected-width: 20px;
  --carousel-dot-selected-bg: var(--color-border-strong);
  --carousel-gap: var(--space-8);

  /* ---- Overlay / media ------------------------------------------------ */
  --overlay-bg: var(--color-scrim);
  --play-button-bg: var(--color-glass);
  --play-button-border: var(--border-width-3);
  --play-button-blur: var(--blur-16);
  --play-button-fg: var(--color-text-on-dark);
  --play-button-xs: 48px;  --play-button-sm: 56px;  --play-button-md: 64px;
  --play-button-lg: 72px;  --play-button-xl: 80px;  --play-button-2xl: 88px;
}
/*@@end*/

/*@@fallback*/
/* ==========================================================================
   Fallbacks for browsers without color-mix() (Chrome < 111, Safari < 16.2,
   Firefox < 113). Static values computed from the brand colours, one block per
   mode. Lint rule R6 checks that every color-mix() token has an entry here.
   ========================================================================== */
@supports not (color: color-mix(in srgb, red, blue)) {
  /*@@fb-common*/
  :root {
    --ink-8: rgba(12, 43, 21, 0.08);
    --ink-16: rgba(12, 43, 21, 0.16);
    --ink-24: rgba(12, 43, 21, 0.24);
    --ink-32: rgba(12, 43, 21, 0.32);
    --ink-48: rgba(12, 43, 21, 0.48);
    --ink-64: rgba(12, 43, 21, 0.64);
    --ink-72: rgba(12, 43, 21, 0.72);
    --ink-88: rgba(12, 43, 21, 0.88);
    --paper-8: rgba(252, 251, 250, 0.08);
    --paper-16: rgba(252, 251, 250, 0.16);
    --paper-24: rgba(252, 251, 250, 0.24);
    --paper-32: rgba(252, 251, 250, 0.32);
    --paper-48: rgba(252, 251, 250, 0.48);
    --paper-64: rgba(252, 251, 250, 0.64);
    --paper-72: rgba(252, 251, 250, 0.72);
    --paper-88: rgba(252, 251, 250, 0.88);
    --brand-green-20: #cafbba;
    --brand-green-30: #b0fa9a;
    --brand-green-50: #5cdc6c;
    --brand-green-70: #1c8f48;
    --brand-green-80: #176432;
    --moonstone-20: #adf0f4;
    --moonstone-40: #76e7ec;
    --moonstone-70: #169399;
    --moonstone-90: #0f696e;
    --violet-blue-20: #c8ccec;
    --violet-blue-40: #a4a9de;
    --violet-blue-70: #3c43a8;
    --violet-blue-90: #2c3278;
    --saffron-20: #ffde82;
    --saffron-40: #ffd256;
    --saffron-70: #c39000;
    --saffron-90: #7a5a00;
    --tangerine-20: #ffd8c0;
    --tangerine-40: #febe95;
    --tangerine-70: #e46814;
    --tangerine-90: #b94801;
    --focus-ring-success: 0 0 0 2px rgba(33, 191, 97, 0.70), 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    --focus-ring-warning: 0 0 0 2px rgba(232, 171, 0, 0.80), 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    --focus-ring-highlight: 0 0 0 4px rgba(150, 248, 120, 0.60);
  }
  /*@@fb-light*/
  /* Light mode needs no fallbacks: every light semantic colour is now a flat
     token or a discrete step, so none of them uses color-mix(). */
  /*@@fb-dark*/
  [data-mode="dark"] {
    --color-surface-subtle: #22512f;
    --color-surface-muted: #2b5838;
    --color-surface-raised: #345f40;
    --color-success-bg: #104924;
    --color-warning-bg: #3c4710;
    --color-error-bg: #392915;
    --color-error-bg-strong: #5e2715;
    --color-note-bg: #1f3c27;
    --color-category-violet-bg: #263962;
    --color-category-tangerine-bg: #654b1c;
    --color-category-neutral-bg: #294430;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-mode]) {
      --color-surface-subtle: #22512f;
      --color-surface-muted: #2b5838;
      --color-surface-raised: #345f40;
      --color-success-bg: #104924;
      --color-warning-bg: #3c4710;
      --color-error-bg: #392915;
      --color-error-bg-strong: #5e2715;
      --color-note-bg: #1f3c27;
      --color-category-violet-bg: #263962;
      --color-category-tangerine-bg: #654b1c;
      --color-category-neutral-bg: #294430;
    }
  }
  /*@@fb-end*/
}
/*@@fallback-end*/


/* ==========================================================================
   Optional: self-hosting Henderson BCG (licensed). Uncomment and point the
   urls at your licensed files. Installed copies work without this.

   @font-face { font-family: "Henderson BCG Sans";  font-weight: 300; font-display: swap;
     src: local("Henderson BCG Sans Light"),   url("fonts/HendersonBCGSans-Light.woff2")   format("woff2"); }
   @font-face { font-family: "Henderson BCG Sans";  font-weight: 400; font-display: swap;
     src: local("Henderson BCG Sans Regular"), url("fonts/HendersonBCGSans-Regular.woff2") format("woff2"); }
   @font-face { font-family: "Henderson BCG Sans";  font-weight: 700; font-display: swap;
     src: local("Henderson BCG Sans Bold"),    url("fonts/HendersonBCGSans-Bold.woff2")    format("woff2"); }
   @font-face { font-family: "Henderson BCG Serif"; font-weight: 400; font-display: swap;
     src: local("Henderson BCG Serif Regular"),url("fonts/HendersonBCGSerif-Regular.woff2")format("woff2"); }
   ========================================================================== */