/* ============================================================================
   MusicWire Portal — Design Tokens (SOURCE OF TRUTH)
   ----------------------------------------------------------------------------
   Phase 0 rebuild (2026-07-06): every value below is extracted VERBATIM from the
   live cascade (musicwire-popfiltr.webflow.css :root/.u-theme-* + webflow-runtime.css,
   last-wins order) and verified value-identical by scripts — loading this file
   after webflow-runtime.css changes nothing visually, it only makes THIS file
   the one place where a token edit wins.

   Rules:
   - Change values HERE. Do not add hex/px in feature CSS (docs/ui/STYLEGUIDE.md §5).
   - Components consume --_theme---* (never raw --swatch--*), so .u-theme-light /
     .u-theme-dark inversion stays automatic.
   - The Webflow export still declares older copies of these earlier in the
     cascade; they lose to this file and get deleted in the Phase 4 harvest.
   - Excluded on purpose: the export's leaked "<deleted|variable-...>" names and
     the unused --_ambient-colors---* / --flowui-* palettes (still provided by
     the export for its own 8 internal references until harvest).
   - KNOWN NAMING DEBT (do not "fix" blind): --_typography---line-height--1-6 is 1,
     and u-text-style-display/h1/h2 + press-release headings consume it — both the
     portal AND the Webflow marketing site render tight headings from this value.
     Correcting it means re-pointing those text styles (visual QA), not editing here.
   ============================================================================ */

:root {

  /* ---- Site, containers & grid ---- */
  --breakout-end: [content-end] minmax(0, 1fr) [full-end];
  --breakout-start: [full-start] minmax(0, 1fr) [content-start];
  --column-margin--0: 0px;
  --column-margin--1: calc(var(--column-width--plus-gutter) * 1);
  --column-margin--1-3: 1px;
  --column-margin--2: calc(var(--column-width--plus-gutter) * 2);
  --column-margin--3: calc(var(--column-width--plus-gutter) * 3);
  --column-margin--4: calc(var(--column-width--plus-gutter) * 4);
  --column-margin--5: calc(var(--column-width--plus-gutter) * 5);
  --column-margin--6: calc(var(--column-width--plus-gutter) * 6);
  --column-margin--7: calc(var(--column-width--plus-gutter) * 7);
  --column-margin--8: calc(var(--column-width--plus-gutter) * 8);
  --column-margin--9: calc(var(--column-width--plus-gutter) * 9);
  --column-margin--10: calc(var(--column-width--plus-gutter) * 10);
  --column-margin--11: calc(var(--column-width--plus-gutter) * 11);
  --column-margin--12: calc(var(--column-width--plus-gutter) * 12);
  --column-width--1: calc((var(--container--main) - var(--site--gutter-total)) / var(--site--column-count));
  --column-width--1-3: 0px;
  --column-width--2: calc(var(--column-width--plus-gutter) * 2 - var(--site--gutter));
  --column-width--3: calc(var(--column-width--plus-gutter) * 3 - var(--site--gutter));
  --column-width--4: calc(var(--column-width--plus-gutter) * 4 - var(--site--gutter));
  --column-width--5: calc(var(--column-width--plus-gutter) * 5 - var(--site--gutter));
  --column-width--6: calc(var(--column-width--plus-gutter) * 6 - var(--site--gutter));
  --column-width--7: calc(var(--column-width--plus-gutter) * 7 - var(--site--gutter));
  --column-width--8: calc(var(--column-width--plus-gutter) * 8 - var(--site--gutter));
  --column-width--9: calc(var(--column-width--plus-gutter) * 9 - var(--site--gutter));
  --column-width--10: calc(var(--column-width--plus-gutter) * 10 - var(--site--gutter));
  --column-width--11: calc(var(--column-width--plus-gutter) * 11 - var(--site--gutter));
  --column-width--12: calc(var(--column-width--plus-gutter) * 12 - var(--site--gutter));
  --column-width--plus-gutter: calc(var(--column-width--1) + var(--site--gutter));
  --container--full: calc(100vw - var(--site--margin) * 2);
  --container--main: calc(var(--site--max-width) - var(--site--margin) * 2);
  --container--small: calc(var(--column-width--plus-gutter) * (var(--site--column-count) - 2) - var(--site--gutter));
  --container--x-small: calc(var(--column-width--plus-gutter) * (var(--site--column-count) - 4) - var(--site--gutter));
  --grid-1: repeat(1, minmax(0, 1fr));
  --grid-2: repeat(2, minmax(0, 1fr));
  --grid-3: repeat(3, minmax(0, 1fr));
  --grid-4: repeat(4, minmax(0, 1fr));
  --grid-5: repeat(5, minmax(0, 1fr));
  --grid-6: repeat(6, minmax(0, 1fr));
  --grid-7: repeat(7, minmax(0, 1fr));
  --grid-8: repeat(8, minmax(0, 1fr));
  --grid-9: repeat(9, minmax(0, 1fr));
  --grid-10: repeat(10, minmax(0, 1fr));
  --grid-11: repeat(11, minmax(0, 1fr));
  --grid-12: repeat(12, minmax(0, 1fr));
  --grid-breakout: var(--breakout-start) repeat(var(--site--column-count), minmax(0, var(--column-width--1))) var(--breakout-end);
  --grid-breakout-single: var(--breakout-start) minmax(0, var(--container--main)) var(--breakout-end);
  --grid-main: repeat(var(--site--column-count), minmax(0, 1fr));
  --site--column-count: 12;
  --site--gutter: 1rem;
  --site--gutter-total: calc(var(--site--gutter) * (var(--site--column-count) - 1));
  --site--margin: clamp(1rem, 0.42857142857142855rem + 2.857142857142857vw, 3rem);
  --site--max-width: min(var(--site--width), 100vw);
  --site--width: 90rem;
  /* Portal page-structure roles. Values intentionally alias the base scale so each role can
     evolve without changing unrelated consumers that happen to share today's measurement. */
  --page-content--space-top: var(--size--0-5rem);
  --page-content--space-bottom: var(--site--margin);

  /* ---- Color swatches ---- */
  --swatch--accent: #f93;
  --swatch--accent-faded: #fcb772;
  /* --swatch--accent-light (#ffce93) RETIRED 2026-07-09 — unused in app markup; its only CSS
     owners are dead Webflow-export classes (harvested later) and analytics icons hardcode the hex. */
  --swatch--box-shadow: #14142b0d;
  --swatch--brand: #160042;
  --swatch--brand-faded: #353263;
  --swatch--brand-text: var(--swatch--light);
  --swatch--dark: #160042;
  --swatch--dark-faded: color-mix(in srgb, var(--swatch--dark) 10%, transparent);
  --swatch--error: #a31212; /* promoted 2026-07-09 from #bb0202 — the contrast-corrected sem-error text becomes the identity */
  --swatch--light: white;
  --swatch--light-faded: color-mix(in srgb, var(--swatch--light) 10%, transparent);
  --swatch--secondary: #cbd9eb;
  --swatch--secondary-faded: #f3f5fb;
  --swatch--success: #15803d; /* promoted 2026-07-09 from #1aa52a — the contrast-corrected sem-success text becomes the identity */
  --swatch--success-text: #136e35;
  --swatch--transparent: transparent;

  /* ---- Semantic tone identities ----
     Warning is intentionally separate from the brand accent. Legacy info/neutral identities
     remain until DS-037 classifies and migrates their consumers. */
  --swatch--warning: #b45f0c;
  --swatch--warning-text: #9a5209;
  --swatch--info: #1e548f; /* v2 identity 2026-07-11 — follows the promotion pattern (identity = the tone's deep text, like success/error); secondary stays the surface family */
  --swatch--neutral: #776a92;

  /* ---- Status-pill surfaces per tone (fill / text / border) — LIGHT ----
     Chosen 2026-07-08: solid light tints with DARK, contrast-correct text (a single
     color-mix-from-one-tone formula washes out the light tones — info/neutral — so each
     tone carries explicit values). DARK overrides live in .u-theme-dark. */
  --sem-success--fill: #e7f5ec; --sem-success--text: #15803d; --sem-success--border: #bbe5c8;
  --sem-warning--fill: #fff3e3; --sem-warning--text: #b45f0c; --sem-warning--border: #ffd6a8;
  --sem-error--fill: #fbe8e8;   --sem-error--text: #a31212;   --sem-error--border: #f0c6c6;
  --sem-info--fill: #e9f0f9;    --sem-info--text: #1e548f;    --sem-info--border: #cbd9eb; /* v2 LOCKED 2026-07-11 — pattern-derived from the secondary hue (fill L94 / text L34 @6.7:1 / border = secondary); depth, not a new hue */
  --sem-neutral--fill: #f0eef4; --sem-neutral--text: var(--swatch--brand-faded); --sem-neutral--border: #d6d1e0; /* text = brand-faded (Option B, 2026-07-09); border deepened to pattern parity L≈85 (was #e0dce8, locked 2026-07-11) */

  /* ---- Theme defaults (light values; .u-theme-* reassigns below) ---- */
  --_theme---background: var(--swatch--light);
  --_theme---background-secondary: var(--swatch--secondary-faded);
  --mw-menu-surface: var(--_theme---background); /* raised popover/menu surface — the elevated tier; re-declared per theme block (light = background/white, dark = background-secondary/lifted) so it bakes the theme-correct value */
  --mw-row-h: 2rem; /* list-row height — ONE fixed height (32px) for every clickable list row (nav / sub-nav / settings / dropdown menus); flat, indent carries nesting. Literal rem per the existing 2.5rem row convention, NOT the fluid --size--2rem clamp */
  --control-height--compact: 2rem; /* fixed compact action/control height; do not use fluid --size--2rem */
  --icon-size--main: 1rem;
  --_theme---border: var(--swatch--dark-faded);
  --_theme---button-ghost--background: var(--swatch--transparent);
  --_theme---button-ghost--background-hover: var(--swatch--transparent);
  --_theme---button-ghost--border: var(--swatch--dark-faded);
  --_theme---button-ghost--border-hover: var(--swatch--dark-faded);
  --_theme---button-ghost--text: var(--swatch--dark);
  --_theme---button-ghost--text-hover: var(--swatch--brand-faded);
  --_theme---button-primary--background: var(--swatch--brand);
  --_theme---button-primary--background-hover: var(--swatch--brand-faded);
  --_theme---button-primary--border: var(--swatch--brand);
  --_theme---button-primary--border-hover: var(--swatch--brand-faded);
  --_theme---button-primary--text: var(--swatch--brand-text);
  --_theme---button-primary--text-hover: var(--swatch--light);
  --_theme---button-secondary--background: var(--swatch--light);
  --_theme---button-secondary--background-hover: var(--swatch--secondary-faded);
  --_theme---button-secondary--border: var(--swatch--dark-faded);
  --_theme---button-secondary--border-hover: var(--swatch--dark-faded);
  --_theme---button-secondary--text: var(--swatch--dark);
  --_theme---button-secondary--text-hover: var(--swatch--dark);
  --_theme---button-transparent--background: var(--swatch--transparent);
  --_theme---button-transparent--background-hover: var(--swatch--transparent);
  --_theme---button-transparent--border: var(--swatch--transparent);
  --_theme---button-transparent--border-hover: var(--swatch--transparent);
  --_theme---button-transparent--text: var(--swatch--brand);
  --_theme---button-transparent--text-hover: var(--swatch--brand-faded);
  --_theme---link--text: white;
  --_theme---link--text-active: white;
  --_theme---link--text-hover: white;
  --_theme---text: var(--swatch--dark);

  /* ---- Typography ---- */
  --_typography---font--primary-bold: 700;
  --_typography---font--primary-family: Georgia, Times, "Times New Roman", serif;
  --_typography---font--primary-medium: 500;
  --_typography---font--primary-regular: 400;
  --_typography---font--primary-trim-bottom: .36em;
  --_typography---font--primary-trim-top: .39em;
  --_typography---font--secondary-family: Montserrat, sans-serif;
  --_typography---font--secondary-medium: 500;
  --_typography---font--secondary-regular: 400;
  --_typography---font--secondary-trim-bottom: .35em;
  --_typography---font--secondary-trim-top: .38em;
  --_typography---font-size--display: var(--size--5rem);
  --_typography---font-size--h1: var(--size--4rem);
  --_typography---font-size--h2: var(--size--3rem);
  --_typography---font-size--h3: var(--size--2-5rem);
  --_typography---font-size--h4: var(--size--2rem);
  --_typography---font-size--h5: var(--size--1-5rem);
  --_typography---font-size--h6: var(--size--1-25rem);
  --_typography---font-size--text-large: var(--size--1-25rem);
  --_typography---font-size--text-main: 1.15rem;
  --_typography---font-size--text-small: var(--size--1rem);
  --_typography---letter-spacing--0-03em: -.03em;
  --_typography---letter-spacing--0em: 0em;
  --_typography---line-height--1-1: 1.1;
  --_typography---line-height--1-3: 1.3;
  --_typography---line-height--1-5: 1.5;
  --_typography---line-height--1-6: 1;
  --_typography---text-transform--capitalize: 0px;
  --_typography---text-transform--captialize: capitalize;
  --_typography---text-transform--lowercase: lowercase;
  --_typography---text-transform--none: none;
  --_typography---text-transform--uppercase: uppercase;

  /* ---- Text-style defaults (consumed by u-text-style-*) ---- */
  --_text-style---font-family: var(--_typography---font--primary-family);
  --_text-style---font-size: var(--_typography---font-size--text-main);
  --_text-style---font-weight: var(--_typography---font--primary-regular);
  --_text-style---letter-spacing: var(--_typography---letter-spacing--0em);
  --_text-style---line-height: var(--_typography---line-height--1-5);
  --_text-style---margin-bottom: var(--_spacing---space--4);
  --_text-style---margin-top: var(--_spacing---space--4);
  --_text-style---text-transform: var(--_typography---text-transform--none);
  --_text-style---trim-bottom: var(--_typography---font--primary-trim-bottom);
  --_text-style---trim-top: var(--_typography---font--primary-trim-top);

  /* ---- Button-style bindings ---- */
  --_button-style---background: var(--_theme---button-primary--background);
  --_button-style---background-hover: var(--_theme---button-primary--background-hover);
  --_button-style---border: var(--_theme---button-primary--border);
  --_button-style---border-hover: var(--_theme---button-primary--border-hover);
  --_button-style---text: var(--_theme---button-primary--text);
  --_button-style---text-hover: var(--_theme---button-primary--text-hover);

  /* ---- Size scale (fluid >= 2rem via clamp) ---- */
  --size--0-5rem: .5rem;
  --size--0-625rem: .625rem;
  --size--0-25rem: .25rem;
  --size--0-75rem: .75rem;
  --size--0-125rem: .125rem;
  --size--0-375rem: .375rem;
  --size--0rem: 0rem;
  --size--1-5rem: 1.5rem;
  --size--1-25rem: 1.25rem;
  --size--1rem: 1rem;
  --size--2-5rem: clamp(2rem, 1.8571428571428572rem + 0.7142857142857143vw, 2.5rem);
  --size--2rem: clamp(1.75rem, 1.6785714285714286rem + 0.35714285714285715vw, 2rem);
  --size--3-5rem: clamp(2.375rem, 2.0535714285714284rem + 1.607142857142857vw, 3.5rem);
  --size--3rem: clamp(2.25rem, 2.0357142857142856rem + 1.0714285714285714vw, 3rem);
  --size--4-5rem: clamp(2.75rem, 2.25rem + 2.5vw, 4.5rem);
  --size--4rem: clamp(2.5rem, 2.0714285714285716rem + 2.142857142857143vw, 4rem);
  --size--5-5rem: clamp(3.25rem, 2.607142857142857rem + 3.214285714285714vw, 5.5rem);
  --size--5rem: clamp(3rem, 2.4285714285714284rem + 2.857142857142857vw, 5rem);
  --size--6-5rem: clamp(3.75rem, 2.9642857142857144rem + 3.9285714285714284vw, 6.5rem);
  --size--6rem: clamp(3.5rem, 2.7857142857142856rem + 3.571428571428571vw, 6rem);
  --size--7-5rem: clamp(4.25rem, 3.3214285714285716rem + 4.642857142857143vw, 7.5rem);
  --size--7rem: clamp(4rem, 3.142857142857143rem + 4.285714285714286vw, 7rem);
  --size--8-5rem: clamp(4.75rem, 3.6785714285714284rem + 5.357142857142857vw, 8.5rem);
  --size--8rem: clamp(4.5rem, 3.5rem + 5vw, 8rem);
  --size--9-5rem: clamp(5.25rem, 4.035714285714286rem + 6.071428571428571vw, 9.5rem);
  --size--9rem: clamp(5rem, 3.857142857142857rem + 5.714285714285714vw, 9rem);
  --size--10rem: clamp(5.5rem, 4.214285714285714rem + 6.428571428571428vw, 10rem);
  --size--11rem: clamp(5.75rem, 4.25rem + 7.5vw, 11rem);
  --size--12rem: clamp(6rem, 4.285714285714286rem + 8.571428571428571vw, 12rem);
  --size--13rem: clamp(6.5rem, 4.642857142857143rem + 9.285714285714286vw, 13rem);
  --size--14rem: clamp(7rem, 5rem + 10vw, 14rem);
  --size--15rem: clamp(7.5rem, 5.357142857142857rem + 10.714285714285714vw, 15rem);
  --size--16rem: clamp(8rem, 5.714285714285714rem + 11.428571428571429vw, 16rem);

  /* ---- Spacing & section rhythm ---- */
  --_spacing---section-space--large: var(--size--10rem);
  --_spacing---section-space--main: var(--size--7rem);
  --_spacing---section-space--none: var(--size--0rem);
  --_spacing---section-space--page-top: var(--size--14rem);
  --_spacing---section-space--small: var(--size--5rem);
  --_spacing---space--1: var(--size--0-5rem);
  --_spacing---space--2: var(--size--0-75rem);
  --_spacing---space--3: var(--size--1rem);
  --_spacing---space--4: var(--size--1-5rem);
  --_spacing---space--5: var(--size--2rem);
  --_spacing---space--6: var(--size--2-5rem);
  --_spacing---space--7: var(--size--3rem);
  --_spacing---space--8: var(--size--4rem);

  /* ---- Radii & borders ---- */
  --border-width--main: .094rem;
  --border-width--bar: .1875rem;
  --radius--main: 1rem;
  --radius--round: 100vw;
  --radius--small: .5rem;
  --radius--x-small: .25rem; /* locked 2026-07-09 — 4th hierarchy step: micro-controls (checkboxes, mini-badges) */

  /* ---- Elevation (locked 2026-07-09): one ink #14142b, three intensities.
     Ad-hoc shadows migrate to these tiers as routes get touched (docket §7). ---- */
  --shadow--1: 0 2px 5px 0 var(--swatch--box-shadow);      /* rest — cards, rows, inputs */
  --shadow--2: 0 8px 24px rgba(20, 20, 43, 0.1);           /* raised — dropdowns, popovers */
  --shadow--3: 0 20px 48px rgba(20, 20, 43, 0.16);         /* overlay — modals, dialogs */

  /* ---- Layering ---- */
  --z-index--dialog: 9999;

  /* ---- Focus ---- */
  --focus--offset-inner: -.125rem;
  --focus--offset-outer: .1875rem;
  --focus--width: .125rem;
  /* Flush control ring (docket §9): hugging box-shadow color for choice controls.
     Dark override lives in .u-theme-dark (accent-faded family). */
  --focus--ring: color-mix(in srgb, var(--swatch--brand-faded) 30%, transparent);

  /* ---- Alignment & keyword maps ---- */
  --align--flex-center: center;
  --align--flex-end: flex-end;
  --align--flex-start: flex-start;
  --align--text-center: center;
  --align--text-left: left;
  --align--text-right: right;

  /* ---- Other ---- */
  --_alignment---flex: var(--align--flex-start);
  --_alignment---text: var(--align--text-left);
}

.u-theme-light {
  /* Theme-derived text tints must be RE-DECLARED per theme block: a custom property bakes its
     inner var()s where it's declared, so a :root-only declaration freezes the light value
     (the dark-mode disappearing-placeholder bug, fixed 2026-07-11). Source declarations live
     in app-overrides :root — single-source here at harvest. */
  --mw-placeholder-text: color-mix(in srgb, var(--_theme---text) 45%, transparent);
  --mw-rte-faded-text: color-mix(in srgb, var(--_theme---text) 75%, transparent);
  --field-rest-border: var(--_theme---control-border);
  --field-hover-border: color-mix(in srgb, var(--_theme---text) 40%, transparent);
  --field-focus-border: color-mix(in srgb, var(--_theme---text) 70%, transparent);
  --field-disabled-text: color-mix(in srgb, var(--_theme---text) 45%, transparent);
  --field-readonly-text: color-mix(in srgb, var(--_theme---text) 75%, transparent);
  --_theme---background: var(--swatch--light);
  --_theme---background-secondary: var(--swatch--secondary-faded);
  --mw-menu-surface: var(--_theme---background); /* elevated surface = white — brighter than the tinted ground */
  --_theme---border: var(--swatch--dark-faded);
  --_theme---control-border: var(--_theme---border);
  --_theme---surface-hover: color-mix(in srgb, var(--_theme---text) 8%, transparent);

  /* Canonical LIGHT semantic tones (DS-035). Keep the full bundle in this resolved context so
     theme-dependent mixes cannot leak light sources into the dormant dark theme. */
  --sem-primary--fill: color-mix(in srgb, var(--swatch--brand) 16%, var(--_theme---background));
  --sem-primary--text: var(--swatch--brand);
  --sem-primary--border: color-mix(in srgb, var(--swatch--brand) 22%, var(--_theme---background));
  --sem-secondary--fill: color-mix(in srgb, var(--swatch--secondary) 30%, var(--_theme---background));
  --sem-secondary--text: var(--_theme---text);
  --sem-secondary--border: var(--_theme---border);
  --sem-success--fill: color-mix(in srgb, var(--swatch--success) 12%, var(--_theme---background));
  --sem-success--text: var(--swatch--success-text);
  --sem-success--border: color-mix(in srgb, var(--swatch--success) 32%, var(--_theme---background));
  --sem-warning--fill: color-mix(in srgb, var(--swatch--warning) 14%, var(--_theme---background));
  --sem-warning--text: var(--swatch--warning-text);
  --sem-warning--border: color-mix(in srgb, var(--swatch--warning) 32%, var(--_theme---background));
  --sem-error--fill: color-mix(in srgb, var(--swatch--error) 12%, var(--_theme---background));
  --sem-error--text: var(--swatch--error);
  --sem-error--border: color-mix(in srgb, var(--swatch--error) 32%, var(--_theme---background));

  --_theme---button-ghost--background: var(--swatch--transparent);
  --_theme---button-ghost--background-hover: var(--swatch--transparent);
  --_theme---button-ghost--border: var(--swatch--dark-faded);
  --_theme---button-ghost--border-hover: var(--swatch--dark-faded);
  --_theme---button-ghost--text: var(--swatch--dark);
  --_theme---button-ghost--text-hover: var(--swatch--brand-faded);
  --_theme---button-primary--background: var(--swatch--brand);
  --_theme---button-primary--background-hover: var(--swatch--brand-faded);
  --_theme---button-primary--border: var(--swatch--brand);
  --_theme---button-primary--border-hover: var(--swatch--brand-faded);
  --_theme---button-primary--text: var(--swatch--brand-text);
  --_theme---button-primary--text-hover: var(--swatch--light);
  --_theme---button-secondary--background: var(--swatch--light);
  --_theme---button-secondary--background-hover: var(--swatch--secondary-faded);
  --_theme---button-secondary--border: var(--swatch--dark-faded);
  --_theme---button-secondary--border-hover: var(--swatch--dark-faded);
  --_theme---button-secondary--text: var(--swatch--dark);
  --_theme---button-secondary--text-hover: var(--swatch--dark);
  --_theme---button-transparent--background: var(--swatch--transparent);
  --_theme---button-transparent--background-hover: var(--swatch--transparent);
  --_theme---button-transparent--border: var(--swatch--transparent);
  --_theme---button-transparent--border-hover: var(--swatch--transparent);
  --_theme---button-transparent--text: var(--swatch--brand);
  --_theme---button-transparent--text-hover: var(--swatch--brand-faded);
  --_theme---link--text: white;
  --_theme---link--text-active: white;
  --_theme---link--text-hover: white;
  --_theme---text: var(--swatch--dark);
}

.u-theme-dark {
  /* §6 bg-swap executed 2026-07-10 (invisible in prod — the app is light-only, no toggle):
     base = the DEEP ground, elevated surface = brand-faded. Binding rule (docket §9/§6):
     background rides the light↔dark swatch pair — NOT brand — even though dark == brand in
     value today; grounds and ink invert as a pair. */
  --_theme---background: var(--swatch--dark);
  --_theme---background-secondary: var(--swatch--brand-faded);
  --mw-menu-surface: var(--_theme---background-secondary); /* elevated surface = brand-faded — lifts above the deep ground (per §6 "elevated surface = brand-faded"); dark pass may retune */
  --_theme---border: var(--swatch--light-faded);
  --_theme---control-border: var(--_theme---border);
  --focus--ring: color-mix(in srgb, var(--swatch--accent-faded) 40%, transparent); /* docket §9 */
  /* Re-derive theme-text tints with the DARK text (see .u-theme-light note) — fixes
     placeholders/faded RTE text disappearing on dark. */
  --mw-placeholder-text: color-mix(in srgb, var(--_theme---text) 45%, transparent);
  --mw-rte-faded-text: color-mix(in srgb, var(--_theme---text) 75%, transparent);
  --field-rest-border: var(--sem-secondary--border);
  --field-hover-border: color-mix(in srgb, var(--_theme---text) 40%, transparent);
  --field-focus-border: color-mix(in srgb, var(--_theme---text) 70%, transparent);
  --field-disabled-text: color-mix(in srgb, var(--_theme---text) 45%, transparent);
  --field-readonly-text: color-mix(in srgb, var(--_theme---text) 75%, transparent);

  /* Semantic surfaces — DARK (subtle tint over the theme background; LIGHT text so they
     read on the dark ground — the chosen "neutral dark = light-faded" etc.). */
  --sem-primary--fill: color-mix(in srgb, var(--swatch--accent) 16%, var(--_theme---background));
  --sem-primary--text: var(--swatch--accent);
  --sem-primary--border: color-mix(in srgb, var(--swatch--accent) 32%, var(--_theme---background));
  --sem-success--fill: color-mix(in srgb, #4ecb5f 12%, var(--_theme---background)); --sem-success--text: #4ecb5f; --sem-success--border: color-mix(in srgb, #4ecb5f 32%, var(--_theme---background));
  --sem-warning--fill: color-mix(in srgb, #ff9933 12%, var(--_theme---background)); --sem-warning--text: #ff9933; --sem-warning--border: color-mix(in srgb, #ff9933 32%, var(--_theme---background));
  --sem-error--fill: color-mix(in srgb, #ff6b6b 12%, var(--_theme---background)); --sem-error--text: #ff6b6b; --sem-error--border: color-mix(in srgb, #ff6b6b 32%, var(--_theme---background)); /* text = mix base (was #ff8f8f) — dark formula standardized 2026-07-11; 5.9:1 on fill */
  --sem-info--fill: color-mix(in srgb, #cbd9eb 12%, var(--_theme---background)); --sem-info--text: #cbd9eb; --sem-info--border: color-mix(in srgb, #cbd9eb 32%, var(--_theme---background));
  --sem-neutral--fill: color-mix(in srgb, #ffffff 8%, var(--_theme---background)); --sem-neutral--text: #c9c8d8; --sem-neutral--border: color-mix(in srgb, #ffffff 22%, var(--_theme---background));
  /* DS-037 folds neutral into secondary without inventing a new dark palette. */
  --sem-secondary--fill: var(--sem-neutral--fill);
  --sem-secondary--text: var(--sem-neutral--text);
  --sem-secondary--border: var(--sem-neutral--border);
  --_theme---button-ghost--background: var(--swatch--transparent);
  --_theme---button-ghost--background-hover: var(--swatch--transparent);
  --_theme---button-ghost--border: var(--swatch--dark-faded);
  --_theme---button-ghost--border-hover: var(--swatch--dark-faded);
  --_theme---button-ghost--text: var(--swatch--light);
  --_theme---button-ghost--text-hover: var(--swatch--light);
  --_theme---button-primary--background: var(--swatch--accent);
  --_theme---button-primary--background-hover: var(--swatch--accent-faded);
  --_theme---button-primary--border: var(--swatch--accent);
  --_theme---button-primary--border-hover: var(--swatch--accent-faded);
  --_theme---button-primary--text: var(--swatch--dark);
  --_theme---button-primary--text-hover: var(--swatch--brand-faded);
  --_theme---button-secondary--background: var(--swatch--light);
  --_theme---button-secondary--background-hover: var(--swatch--secondary-faded);
  --_theme---button-secondary--border: var(--swatch--dark-faded);
  --_theme---button-secondary--border-hover: var(--swatch--secondary-faded);
  --_theme---button-secondary--text: var(--swatch--dark);
  --_theme---button-secondary--text-hover: var(--swatch--dark);
  --_theme---button-transparent--background: var(--swatch--transparent);
  --_theme---button-transparent--background-hover: var(--swatch--transparent);
  --_theme---button-transparent--border: var(--swatch--transparent);
  --_theme---button-transparent--border-hover: var(--swatch--transparent);
  --_theme---button-transparent--text: var(--swatch--light);
  --_theme---button-transparent--text-hover: var(--swatch--light);
  --_theme---link--text: white;
  --_theme---link--text-active: white;
  --_theme---link--text-hover: white;
  --_theme---text: var(--swatch--light);
}