/*  ============================================================================
    startingpoint — design modernisation: the token layer
    ============================================================================

    Three tiers.  Tier 1 is raw ramps, named for where a step sits and never for
    what it is for.  Tier 2 is one palette block per brand and appearance — the
    platform and EmployabilityUK, light and dark — each binding every semantic
    name to a tier 1 step; it is the only place in the system where a hex is
    chosen.  Tier 3 is the semantic names themselves, and it is the ONLY tier a
    component may reference.

    Brand and mode are two class names on the root element:

        <div class="sp-reset sp-root brand-sp light">

    so no component contains a conditional for either.  Every pair used as type
    clears 4.5:1 and every pair used as a boundary clears 3:1, in all four
    palettes.

    EVERYTHING BELOW THE MARKER IS GENERATED.  `design/tokens.toml`, at the
    repository root, is the source; `crates/design-tokens`'s `generate` bin
    writes this block, `design/generated/Tokens.swift` and
    `design/generated/Tokens.kt` from it, and
    `crates/design-tokens/tests/regeneration.rs` fails if anyone edits one of
    the three by hand or edits the source without regenerating.  This header,
    and `components.css` beside it, are the hand-written halves.

    Beneath the tiers the generated block carries the COMPONENT CONTRACT as
    `--<treatment>-<part>` custom properties, which `components.css` consumes
    for its colours, borders and radii.  The colour properties are inside each
    palette block rather than on `:root`, and that is load-bearing: a var()
    inside a custom property is substituted where THAT property is computed, and
    the semantic tokens do not exist on `:root` — the palette classes sit on the
    app's root div.  The same trap is why `--focus-ring` is declared beside
    `--scrim` rather than at the top.
    ============================================================================  */

/*  GENERATED TOKENS BEGIN — do not hand-edit; regenerate with `cargo run -p design-tokens --bin generate` from `design/tokens.toml`.  */
:root {
	/*  Tier 1 — raw ramps.  A step is named for where it sits, never for what it is for.
	    Every ramp runs light to dark: index 0 is the lightest step.  NO component may
	    name a token from this tier, and no shell carries one: the ramps are the web's
	    own vocabulary, and a component that could name a step would.  */
	/*  Warm neutral — EmployabilityUK's paper and boundaries, and the white every palette
	    shares.  The platform's paper is neutral since the 2026 rebrand: `--ch-*`.  */
	--n-0: #FFFFFF;
	--n-1: #FBFAF8;
	--n-2: #F7F5F1;
	--n-3: #F5F2EC;
	--n-4: #EDE8DE;
	--n-5: #E7E4DE;
	--n-6: #E6E0D4;
	--n-7: #98917F;
	--n-8: #8E8779;
	--n-9: #7E7768;
	/*  Indigo ink — EmployabilityUK's light-mode type.  It was the platform's ink and the
	    whole of its dark palette until the 2026 rebrand moved the platform to charcoal.  */
	--i-0: #F3F2F8;
	--i-1: #B6B5CD;
	--i-2: #9694AE;
	--i-3: #8B8FCB;
	--i-4: #6E72B4;
	--i-5: #6B6D8C;
	--i-6: #666881;
	--i-7: #5A5C73;
	--i-8: #4A4C6B;
	--i-9: #343764;
	--i-10: #30325A;
	--i-11: #2B2D4C;
	--i-12: #232541;
	--i-13: #1F2138;
	--i-14: #1B1D36;
	--i-15: #191A38;
	--i-16: #12132A;
	/*  Plum neutral — EmployabilityUK's light surfaces and boundaries  */
	--p-0: #F8F4F6;
	--p-1: #F6EEF3;
	--p-2: #F1E6EC;
	--p-3: #E9DFE6;
	--p-4: #E9DAE3;
	--p-5: #9C8794;
	--p-6: #93818C;
	--p-7: #826B79;
	/*  Plum violet — the whole of EmployabilityUK's dark palette  */
	--v-0: #F5F1F6;
	--v-1: #C6BCCB;
	--v-2: #B79AC2;
	--v-3: #A79CAE;
	--v-4: #9B7BA8;
	--v-5: #7A6E85;
	--v-6: #33224A;
	--v-7: #301F49;
	--v-8: #26193C;
	--v-9: #1A1730;
	--v-10: #1A1030;
	--v-11: #141131;
	--v-12: #0F0E24;
	/*  Purple — the platform hue since the 2026 rebrand.  The guide offers five colours
	    and one gradient; purple is the only one of the five that clears 4.5:1 on white
	    (5.95 — coral is 2.85, pink 3.50, magenta 4.31), so it is the one that can be
	    type, a button under white ink, and a focus ring.  Steps 0-4 are the guide's five
	    tints, read from its swatches as mixes toward white; 6 and 7 are shades for hover.  */
	--pu-0: #F2DEF4;
	--pu-1: #E4BCEA;
	--pu-2: #D290DC;
	--pu-3: #C163CE;
	--pu-4: #B341C4;
	--pu-5: #A620B9;
	--pu-6: #8D1B9D;
	--pu-7: #741682;
	/*  Charcoal — the platform's ink and the whole of its dark palette.  #393939 is the
	    guide's fifth colour; everything else here is a neutral step towards white or black
	    from it, with no hue, because the guide's own neutrals have none.  */
	--ch-0: #F7F7F8;
	--ch-1: #F4F4F5;
	--ch-2: #F1F1F3;
	--ch-3: #EBEBED;
	--ch-4: #E6E6E9;
	--ch-5: #DCDCE0;
	--ch-6: #C9C9CE;
	--ch-7: #A3A3A9;
	--ch-8: #9A9A9F;
	--ch-9: #8B8B90;
	--ch-10: #7C7C82;
	--ch-11: #6E6E73;
	--ch-12: #5B5B60;
	--ch-13: #4A4A4E;
	--ch-14: #424246;
	--ch-15: #3B3B3F;
	--ch-16: #393939;
	--ch-17: #333336;
	--ch-18: #2C2C2F;
	--ch-19: #26262A;
	--ch-20: #212124;
	/*  Magenta — the EmployabilityUK hue, ending in the ink that sits on it  */
	--mg-0: #FF85CB;
	--mg-1: #FF66BC;
	--mg-2: #EC008C;
	--mg-3: #C7007A;
	--mg-4: #B00069;
	--mg-5: #AE006B;
	--mg-6: #96005A;
	--mg-7: #17091A;
	/*  Gradient stops — the hero's two ends, in both modes.  0-4 are EmployabilityUK's
	    navy-to-plum.  5 is the platform's: the guide's signature gradient runs coral ->
	    pink -> magenta -> purple, and white type on coral is 2.85:1, so the hero — which
	    CARRIES type — starts from a pink deepened until white clears 4.5 on it (4.98)
	    and ends on the purple itself.  The full-strength coral end lives where the guide
	    puts the gradient "as an accent": in the mark, on every screen.  */
	--gr-0: #8E0362;
	--gr-1: #82027E;
	--gr-2: #6E0369;
	--gr-3: #1A1170;
	--gr-4: #110B79;
	--gr-5: #CF3059;
	/*  Settled  */
	--ok-0: #DCFCE7;
	--ok-1: #6EE7B7;
	--ok-2: #047857;
	--ok-3: #123D2E;
	/*  Pending  */
	--wt-0: #FEF0C7;
	--wt-1: #FCD34D;
	--wt-2: #92400E;
	--wt-3: #3E3012;
	/*  Rejected or inactive  */
	--of-0: #FEE4E2;
	--of-1: #FCA5A5;
	--of-2: #B42318;
	--of-3: #54232A;
	/*  Danger marks — light and dark.  2 is the platform's dark-mode danger FILL: on the
	    charcoal card (#2C2C2F) the light fill is 2.88:1, under the 3:1 a control's edge owes
	    the surface it sits on, and the dark mark cannot carry white ink (4.10:1).  One step
	    between them clears both — 4.61:1 under white, 3.02:1 on the card.  The navy card it
	    replaced was darker and never needed it.  */
	--bd-0: #E5484D;
	--bd-1: #D92D20;
	--bd-2: #DC332B;

	/*  Type — size and line-height as ONE token, because splitting them is the
	    legacy capture's most repeated defect: `text-sm` ships 14px against a 20px
	    line box, and buttons are left at `line-height: normal`, so a 12px button
	    measures 34px rather than the 30 its padding predicts.  No size here
	    is ever declared without its line-height.

	    A control's HEIGHT is never a consequence of the line box.  It comes from
	    `height` plus `box-sizing: border-box`, with flex centring on anything that
	    is not an input — which is what lets a 46px button and a 38px button share
	    one type token.

	    The letter-spacing each rung wants is declared here as `tracking`, in em,
	    and reaches the shells — but NOT the CSS custom property, because the
	    `font` shorthand cannot carry it.  On the web each rule that wants tracking
	    sets it itself, which is what it has always done.  */
	/*  Inter, since the 2026 rebrand; Nunito before it.  The guide's weights are Bold and
	    Semibold for headings and Light for body.  Body is 400 here, not 300: Inter Light at
	    16px on a low-density screen has strokes thin enough to undo the 4.5:1 the palette
	    pays for, and the guide is a print document.  Light is admissible at display sizes
	    (22px and up) once a screen wants it — no token for it until one does.  Nothing is
	    heavier than 700; the guide names no weight above Bold.  */
	--font: 'Inter', ui-sans-serif, system-ui, sans-serif;
	/*  The second family, and the only one that is not Inter.  It exists for strings
	    that are LITERALS rather than prose — a reference slug an administrator copies
	    into a configuration file — where the point is that every character is
	    distinguishable and the width is uniform.  System mono throughout, so it costs no
	    font load.  */
	--font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
	--t-display: 700 28px/32px var(--font);
	--t-h1: 700 22px/28px var(--font);
	--t-h2: 700 17px/24px var(--font);
	--t-h3: 700 15px/22px var(--font);
	--t-body: 400 16px/24px var(--font);
	--t-body-strong: 600 16px/24px var(--font);
	--t-small: 400 14.5px/21px var(--font);
	--t-label: 700 13px/18px var(--font);
	--t-hint: 400 12.5px/17px var(--font);
	--t-eyebrow: 700 11px/16px var(--font);
	--t-pill: 700 11.5px/16px var(--font);
	--t-control: 400 16px/24px var(--font);
	--t-button: 700 15px/20px var(--font);
	--t-nav: 700 14.5px/20px var(--font);
	--t-tab: 700 10.5px/14px var(--font);
	/*  13px against `--t-small`'s 14.5: mono runs wider per character than Inter, so a
	    slug set at the body size competes with the name beside it rather than reading as
	    the secondary literal it is.  */
	--t-mono: 400 13px/18px var(--font-mono);

	/*  Space.  A control's internal padding is NOT a step — the field's 15px and
	    the button's 22px belong to those components, and are declared beneath as
	    `--inset-*`.  */
	--s-1: 4px;
	--s-2: 8px;
	--s-3: 12px;
	--s-4: 16px;
	--s-5: 20px;
	--s-6: 24px;
	--s-7: 30px;
	--s-8: 40px;
	--s-9: 56px;

	/*  Radius.  --r-silhouette is the one value carried over from legacy on
	    purpose: its `borderRadius.3xl` was overridden to 2rem, and only a
	    measurement of the running app revealed it.  */
	--r-pill: 10px;
	--r-control: 12px;
	--r-tile: 16px;
	--r-card: 18px;
	/*  A check box's own corner, finer than a control's: a 12px radius on a 20px
	    square reads as a circle, which is what a radio button is.  */
	--r-check: 6px;
	--r-silhouette: 32px;
	--r-round: 9999px;

	/*  Motion.  Collapsed to 0ms under prefers-reduced-motion, at the foot.  */
	--m-fast: 120ms ease-out;
	--m-base: 180ms ease-out;
	--m-slow: 260ms ease-out;

	/*  Fixed dimensions that are neither spacing nor type: the tier the component
	    contract names for a control's height, an icon's square, and a pane's width,
	    so no surface carries the raw number.  Unlike the worked example this schema
	    comes from, the WEB consumes these too — this application's controls have
	    fixed heights of their own rather than sizing to their text.  */
	/*  The height of every button, and the touch target the platforms' own guidance
	    sets as the floor.  */
	--size-control-height: 46px;
	--size-control-height-small: 38px;
	/*  The height of a single-line text field.  Two pixels taller than a button,
	    which is exploration 3b's own measurement.  */
	--size-field-height: 48px;
	--size-check-box: 20px;
	--size-switch-width: 44px;
	--size-switch-height: 26px;
	--size-pill-height: 24px;
	--size-badge-height: 18px;
	--size-chip-height: 32px;
	--size-tag-height: 28px;
	/*  The square of a round avatar in a row.  The profile's 56 and the public
	    page's 96 are that page's own, and stay in `components.css`.  */
	--size-avatar: 32px;
	--size-row-height: 76px;
	--size-navpill-height: 36px;
	--size-tab-height: 52px;
	--size-menu-item-height: 40px;
	--size-bulkbar-height: 52px;
	--size-meter-height: 10px;
	/*  The detail rail beside a 6b list.  */
	--size-panel-width: 358px;

	/*  Insets — a control's own internal padding, which the spacing scale
	    deliberately does not carry.  One entry per treatment that declares padding
	    in the contract beneath, so a shell reads the same 22px a button has here.  */
	--inset-button-x: 22px;
	--inset-small-button-x: 16px;
	--inset-field-x: 15px;
	--inset-card-x: 24px;
	--inset-card-y: 22px;
	--inset-tile: 18px;
	--inset-chip-x: 13px;
	--inset-tag-x: 11px;
	--inset-pill-x: 10px;
	--inset-badge-x: 5px;
	--inset-flash-x: 18px;
	--inset-flash-y: 13px;
	--inset-row-x: 20px;
	--inset-navpill-x: 15px;
	--inset-menu-item-x: 12px;
	--inset-bulkbar-x: 16px;
	--inset-dropzone-x: 16px;
	--inset-dropzone-y: 20px;

	/*  Opacities.  This system dims with token PAIRS rather than with alpha — a
	    disabled control takes `--disabled-fill` and `--disabled-text`, not an
	    opacity — so every entry here is a MIX amount: the fraction of one token
	    blended into another by a `color-mix()` somewhere in `components.css`.
	    Declared as fractions, written as percentages, because that is what
	    `color-mix()` takes and what a shell's own blend takes.  */
	/*  How far the focus line is mixed toward transparent for the ring around it.  */
	--opacity-focus-ring: 28%;
	--opacity-invalid-ring: 26%;
	--opacity-hero-sub: 84%;
	--opacity-bar-bound: 46%;
	--opacity-bar-hover: 12%;
	--opacity-drag-tint: 10%;
	--opacity-drag-ring: 22%;
	/*  The chosen-value pill in a multi-select: a tint of the brand rather than the
	    brand itself, because a dozen saturated pills is a filter that shouts.  */
	--opacity-chip-tint: 16%;
	--opacity-chip-close: 14%;
	--opacity-chip-close-hover: 28%;

	/*  The component contract's brand-independent parts.  Its COLOURS are in the
	    palette blocks beneath, and its elevations in the mode blocks, because a
	    var() inside a custom property resolves where THAT property is computed.  */

	/*  The page every screen sits on (`.sp-root`): the canvas fill, the base type
	    colour, and the base type.  */
	--page-label: var(--t-body);

	/*  The `.h-display`, `.h-1`, `.h-2` and `.h-3` family: one colour, four sizes.
	    A treatment rather than four, because what they share is the whole of what a
	    shell needs and the sizes are already the type scale's.  */
	--heading-label: var(--t-h1);

	/*  The shared button geometry (`.btn`): 46px at the control radius, with the
	    button type.  The four variants beneath carry only what differs, which
	    mirrors the stylesheet's own class structure — a variant is its own
	    treatment, never a flag on this one.  */
	--button-radius: var(--r-control);
	--button-height: var(--size-control-height);
	--button-label: var(--t-button);
	--button-padding-horizontal: var(--inset-button-x);

	/*  The same button at 38px on the pill radius (`.btn-sm`) — a denser row
	    action.  The type token is unchanged, because the height is `height` and not
	    a line box.  */
	--small-button-radius: var(--r-pill);
	--small-button-height: var(--size-control-height-small);
	--small-button-label: var(--t-button);
	--small-button-padding-horizontal: var(--inset-small-button-x);

	/*  The principal action (`.btn-p`).  The fill and its type are ONE token pair —
	    `--action-fill` with `--action-ink` — because the polarity differs per
	    palette: the platform puts white on purple, EmployabilityUK puts white on a
	    deepened magenta and its dark palette puts near-black ink on a bright one.  A
	    treatment that reached for `--brand` and assumed a polarity would be
	    unreadable in one of the four.  */

	/*  The quiet action (`.btn-s`): no fill, a 1.5px boundary that clears 3:1 on the
	    surface it sits on, and ink type.  It sits on the CANVAS rather than on a
	    card, which is the tighter of the two grounds — `--bound` on the canvas is
	    the system's thinnest required pair at 3.01:1.  */
	--secondary-button-border-width: 1.5px;

	/*  A brand-coloured action with no frame (`.btn-g`).  `--brand-text`, never
	    `--brand`: the latter is a FILL and does not have to be legible as type.  */

	/*  A destructive action (`.btn-d`).  Its own treatment rather than a flag on the
	    primary one, so a safe default can never sit on a destructive action.  */

	/*  A single-line text field (`.fld`): the raised fill, a 1.5px boundary, 48px at
	    the control radius.  Every state that changes its boundary is named, because
	    a field's border is how a reader knows where the field IS — SC 1.4.11's own
	    example.  The error boundary is `--state-bad-mark`, which clears 3:1; the
	    message beneath it is `--state-bad-text`, which clears 4.5:1.  The two are
	    different tokens because they have different jobs.  */
	--field-border-width: 1.5px;
	--field-radius: var(--r-control);
	--field-height: var(--size-field-height);
	--field-label: var(--t-control);
	--field-padding-horizontal: var(--inset-field-x);

	/*  The label above a field (`.lbl`), and the required mark inside it.  Required
	    is a mark AND a word to the assistive layer — never colour alone.  */
	--field-label-label: var(--t-label);

	/*  The quiet line beneath a field (`.hint`).  */
	--field-hint-label: var(--t-hint);

	/*  A field's own error message (`.err`).  */
	--field-error-label: var(--t-hint);

	/*  A check box or radio beside its label (`.check`): an empty bordered square on
	    the raised fill, the action fill with the action ink as its tick once
	    checked.  The checked border equals the checked fill, so it is not declared —
	    a boundary the same colour as what it bounds is not a second thing.  */
	--check-border-width: 1.5px;
	--check-radius: var(--r-check);
	--check-height: var(--size-check-box);
	--check-width: var(--size-check-box);
	--check-label: var(--t-small);

	/*  A switch (`.switch`).  `text` is the KNOB — the part drawn on the fill, which
	    for a switch is its knob rather than a label — and it is per STATE rather
	    than fixed.  A single knob colour cannot serve both: the checked track is
	    `--action-fill`, whose matching ink is `--action-ink` by definition, and the
	    unchecked track is `--fill`, a SURFACE, whose matching ink is `--text-1`.
	    One knob colour for both shipped at 2.52:1 and 1.22:1, which is the defect
	    the contrast gate beneath this contract exists to make impossible.  */
	--switch-border-width: 1.5px;
	--switch-radius: var(--r-round);
	--switch-height: var(--size-switch-height);
	--switch-width: var(--size-switch-width);

	/*  The content panel a record renders inside (`.card`): the raised fill at the
	    card radius, lifted one step off the canvas.  */
	--card-radius: var(--r-card);
	--card-padding-horizontal: var(--inset-card-x);
	--card-padding-vertical: var(--inset-card-y);

	/*  How a card holds a group without drawing a second boundary (`.tile`): the
	    sunken fill, no frame, no shadow.  */
	--tile-radius: var(--r-tile);
	--tile-padding-horizontal: var(--inset-tile);
	--tile-padding-vertical: var(--inset-tile);

	/*  The detail rail beside a list (`.panel`): a fixed column, lifted two steps.
	    Its padding is asymmetric in the stylesheet (22/22/20) and so is not named
	    here; the contract carries one horizontal and one vertical inset.  */
	--panel-radius: var(--r-tile);
	--panel-width: var(--size-panel-width);

	/*  A dialog (`.modal`): the raised fill lifted three steps over the scrim.  Its
	    padding is asymmetric (24/26/22) and stays in the stylesheet.  */
	--modal-radius: var(--r-tile);

	/*  A message about what just happened (`.flash`).  Severity is a STATE of one
	    treatment rather than four treatments, because a flash is parameterised by
	    what it reports — unlike a destructive action, which is its own treatment so
	    that a forgotten argument cannot make it look safe.  */
	--flash-radius: var(--r-tile);
	--flash-label: var(--t-small);
	--flash-padding-horizontal: var(--inset-flash-x);
	--flash-padding-vertical: var(--inset-flash-y);

	/*  A status, as a dot AND a word on a fill-and-type pair (`.pill`).  Named
	    `status-pill` rather than `pill`, because `--r-pill` is a radius in this
	    system and the collision would be silent.  Its 1px boundary is the pill's own
	    type colour (`currentColor`), so it names no token of its own: the fill is
	    around 1.1:1 against the surface it sits on, and without the boundary the
	    pill has no discernible shape.  */
	--status-pill-radius: var(--r-round);
	--status-pill-height: var(--size-pill-height);
	--status-pill-label: var(--t-pill);
	--status-pill-padding-horizontal: var(--inset-pill-x);

	/*  An unread count on a control (`.badge`).  A number as well as a dot, so it
	    survives a palette a colour-blind reader cannot separate.  Its type is a
	    unitless-line-height literal in the stylesheet and so is not named here.  */
	--badge-radius: var(--r-round);
	--badge-height: var(--size-badge-height);
	--badge-padding-horizontal: var(--inset-badge-x);

	/*  A filter a reader clicks (`.chip`): no fill, a 1px inset boundary, the fill
	    token once chosen.  Distinct from `tag`, which is the same silhouette with
	    none of the affordances because it is read back rather than clicked.  */
	--chip-border-width: 1px;
	--chip-radius: var(--r-round);
	--chip-height: var(--size-chip-height);
	--chip-label: var(--t-small);
	--chip-padding-horizontal: var(--inset-chip-x);

	/*  A value read back rather than clicked (`.tag`): a chip's silhouette on the
	    sunken fill, with no pointer, no hover and no focus ring.  Reusing the chip
	    for one would promise an interaction that does not exist.  */
	--tag-radius: var(--r-round);
	--tag-height: var(--size-tag-height);
	--tag-label: var(--t-small);
	--tag-padding-horizontal: var(--inset-tag-x);

	/*  A person, as initials or a photograph in a circle (`.avatar`).  */
	--avatar-radius: var(--r-round);
	--avatar-height: var(--size-avatar);
	--avatar-width: var(--size-avatar);
	--avatar-label: var(--t-pill);

	/*  A proportion (`.meter`).  Its filled part is the one place `--brand` is drawn
	    as itself: a filled proportion is a MARK rather than type, so the brand hue is
	    allowed to be the brand hue.  `mark` is declared for the shells and yields no
	    contrast pair, because a mark sits on the treatment's own fill rather than on
	    a surface and the two grounds are not interchangeable.  */
	--meter-radius: var(--r-round);
	--meter-height: var(--size-meter-height);

	/*  The brand concentrated into one card (`.hero`): a gradient from `--grad-a` to
	    `--grad-b` under white type.  `fill` names the brand-coloured end, which is
	    the stop the contract can express; the fixed end's pair is hand-listed in
	    `crates/palette`, because a treatment names one fill and a gradient has two.  */
	--hero-radius: var(--r-card);

	/*  One row of a 6b list (`.lr`): 76px, a hairline beneath it, the sunken surface
	    on hover and the fill token once chosen.  Spelt out rather than carried as
	    `lr`, because two letters name nothing.  */
	--list-row-border-width: 1px;
	--list-row-height: var(--size-row-height);
	--list-row-label: var(--t-body-strong);
	--list-row-padding-horizontal: var(--inset-row-x);

	/*  One entry of the desktop navigation (`.navpill`).  The chip alone is NOT a
	    perceivable indicator — `--surface-sunken` on `--surface-raised` measures
	    1.12:1 — so the active entry carries a 2px mark as well, in `--brand-text`,
	    the only brand token that clears 3:1 as a non-text mark on a raised surface
	    in all four palettes.  State is then signalled three ways and none of them
	    alone.  */
	--navpill-radius: var(--r-pill);
	--navpill-height: var(--size-navpill-height);
	--navpill-label: var(--t-nav);
	--navpill-padding-horizontal: var(--inset-navpill-x);

	/*  One entry of the mobile tab bar (`.tab`).  Weight as well as colour, because
	    colour alone is the first of the legacy findings and knowing which of five
	    you are on is the whole point of a tab bar.  */
	--tab-radius: var(--r-pill);
	--tab-height: var(--size-tab-height);
	--tab-label: var(--t-tab);

	/*  One row of a dropdown (`.menu-item`).  The chosen row takes colour AND weight
	    AND a mark: a reader picking Light out of System / Light / Dark should not
	    have to be able to see the brand hue to know which is in force.  */
	--menu-item-radius: var(--r-pill);
	--menu-item-height: var(--size-menu-item-height);
	--menu-item-label: var(--t-small);
	--menu-item-padding-horizontal: var(--inset-menu-item-x);

	/*  The bar that appears when rows are selected (`.bulkbar`): the inverse
	    surface, so it reads as a mode rather than as more table.  */
	--bulkbar-height: var(--size-bulkbar-height);
	--bulkbar-label: var(--t-small);
	--bulkbar-padding-horizontal: var(--inset-bulkbar-x);

	/*  An inline text action (`.link`).  Its own treatment so a screen never reaches
	    for the platform's own text button and inherits the system tint.  */

	/*  The file drop target (`.dz`): a dashed boundary on the fill token.  Its DRAG
	    state warms toward `--brand` and is not named here — the brand hue is a fill
	    and need not clear a boundary ratio, which is the same reason `--brand` is
	    unlisted in the contrast contract.  The style change from dashed to solid is
	    what carries the state for a reader who cannot see the hue shift.  */
	--dropzone-border-width: 1.5px;
	--dropzone-radius: var(--r-tile);
	--dropzone-label: var(--t-hint);
	--dropzone-padding-horizontal: var(--inset-dropzone-x);
	--dropzone-padding-vertical: var(--inset-dropzone-y);
}

/*  ----------------------------------------------------------------------------
    Tier 2 — one block per brand and appearance, each binding every semantic
    name to a tier-1 step, and beneath them the component contract's own
    colour properties.
    ----------------------------------------------------------------------------  */
/*  The platform, light — the default.  Redrawn for the 2026 rebrand: purple carries
    white ink (5.95:1), where the orange it replaces carried dark ink; the paper is
    neutral rather than warm, because the guide's neutrals have no hue; and the ink is
    the guide's charcoal.  `--brand-text` IS `--brand` here — the first platform palette
    in which the brand colour is legible as type.  */
.brand-sp.light {
	--surface-canvas: var(--ch-0);
	--surface-raised: var(--n-0);
	--surface-sunken: var(--ch-2);
	--surface-hair: var(--ch-4);
	--text-1: var(--ch-16);
	--text-2: var(--ch-12);
	--text-3: var(--ch-11);
	--text-placeholder: var(--ch-11);
	--brand: var(--pu-5);
	--action-fill: var(--pu-5);
	--action-fill-hover: var(--pu-6);
	--action-ink: var(--n-0);
	--brand-text: var(--pu-5);
	--brand-text-hover: var(--pu-6);
	--bound: var(--ch-9);
	--bound-hover: var(--ch-11);
	--focus-line: var(--pu-5);
	--fill: var(--ch-3);
	--fill-hover: var(--ch-5);
	--disabled-fill: var(--ch-2);
	--disabled-text: var(--ch-9);
	--grad-a: var(--gr-5);
	--grad-b: var(--pu-5);
	--hero-ink: var(--n-0);
	--state-ok-fill: var(--ok-0);
	--state-ok-text: var(--ok-2);
	--state-wait-fill: var(--wt-0);
	--state-wait-text: var(--wt-2);
	--state-off-fill: var(--of-0);
	--state-off-text: var(--of-2);
	--danger-fill: var(--bd-1);
	--danger-ink: var(--n-0);
	--state-bad-mark: var(--bd-1);
	--state-bad-text: var(--of-2);
	--bar-fill: var(--ch-16);
	--bar-ink: var(--n-0);
	--page-fill: var(--surface-canvas);
	--page-text: var(--text-2);
	--heading-text: var(--text-1);
	--button-disabled-fill: var(--disabled-fill);
	--button-disabled-text: var(--disabled-text);
	--primary-button-fill: var(--action-fill);
	--primary-button-text: var(--action-ink);
	--primary-button-hover-fill: var(--action-fill-hover);
	--secondary-button-text: var(--text-1);
	--secondary-button-border: var(--bound);
	--secondary-button-hover-fill: var(--fill);
	--secondary-button-hover-border: var(--bound-hover);
	--secondary-button-active-fill: var(--fill-hover);
	--ghost-button-text: var(--brand-text);
	--ghost-button-hover-fill: var(--fill);
	--ghost-button-hover-text: var(--brand-text-hover);
	--destructive-button-fill: var(--danger-fill);
	--destructive-button-text: var(--danger-ink);
	--field-fill: var(--surface-raised);
	--field-text: var(--text-1);
	--field-muted: var(--text-placeholder);
	--field-border: var(--bound);
	--field-hover-border: var(--bound-hover);
	--field-focus-border: var(--focus-line);
	--field-invalid-border: var(--state-bad-mark);
	--field-disabled-fill: var(--disabled-fill);
	--field-disabled-text: var(--disabled-text);
	--field-disabled-border: var(--surface-hair);
	--field-label-text: var(--text-1);
	--field-label-required-text: var(--state-bad-text);
	--field-hint-text: var(--text-3);
	--field-error-text: var(--state-bad-text);
	--check-fill: var(--surface-raised);
	--check-text: var(--text-1);
	--check-border: var(--bound);
	--check-hover-border: var(--bound-hover);
	--check-on-fill: var(--action-fill);
	--check-on-text: var(--action-ink);
	--switch-fill: var(--fill);
	--switch-text: var(--text-1);
	--switch-border: var(--bound);
	--switch-on-fill: var(--action-fill);
	--switch-on-text: var(--action-ink);
	--card-fill: var(--surface-raised);
	--card-text: var(--text-2);
	--tile-fill: var(--surface-sunken);
	--tile-text: var(--text-2);
	--panel-fill: var(--surface-raised);
	--panel-text: var(--text-2);
	--modal-fill: var(--surface-raised);
	--modal-text: var(--text-1);
	--flash-ok-fill: var(--state-ok-fill);
	--flash-ok-text: var(--state-ok-text);
	--flash-wait-fill: var(--state-wait-fill);
	--flash-wait-text: var(--state-wait-text);
	--flash-bad-fill: var(--state-off-fill);
	--flash-bad-text: var(--state-bad-text);
	--flash-note-fill: var(--surface-sunken);
	--flash-note-text: var(--text-1);
	--status-pill-ok-fill: var(--state-ok-fill);
	--status-pill-ok-text: var(--state-ok-text);
	--status-pill-wait-fill: var(--state-wait-fill);
	--status-pill-wait-text: var(--state-wait-text);
	--status-pill-off-fill: var(--state-off-fill);
	--status-pill-off-text: var(--state-off-text);
	--badge-fill: var(--danger-fill);
	--badge-text: var(--danger-ink);
	--chip-text: var(--text-2);
	--chip-border: var(--bound);
	--chip-hover-fill: var(--fill);
	--chip-on-fill: var(--fill);
	--chip-on-text: var(--text-1);
	--chip-on-border: var(--bound-hover);
	--tag-fill: var(--surface-sunken);
	--tag-text: var(--text-2);
	--avatar-fill: var(--fill);
	--avatar-text: var(--text-2);
	--meter-mark: var(--brand);
	--meter-fill: var(--fill);
	--hero-fill: var(--grad-b);
	--hero-text: var(--hero-ink);
	--list-row-text: var(--text-1);
	--list-row-border: var(--surface-hair);
	--list-row-hover-fill: var(--surface-sunken);
	--list-row-on-fill: var(--fill);
	--navpill-mark: var(--brand-text);
	--navpill-text: var(--text-2);
	--navpill-hover-fill: var(--surface-sunken);
	--navpill-hover-text: var(--text-1);
	--navpill-on-fill: var(--surface-sunken);
	--navpill-on-text: var(--text-1);
	--tab-text: var(--text-3);
	--tab-on-text: var(--brand-text);
	--menu-item-text: var(--text-1);
	--menu-item-hover-fill: var(--surface-sunken);
	--menu-item-on-text: var(--brand-text);
	--bulkbar-fill: var(--bar-fill);
	--bulkbar-text: var(--bar-ink);
	--link-text: var(--brand-text);
	--link-hover-text: var(--brand-text-hover);
	--dropzone-fill: var(--fill);
	--dropzone-text: var(--text-2);
	--dropzone-border: var(--bound);
	--dropzone-hover-fill: var(--fill-hover);
}
/*  EmployabilityUK, light — the one palette whose action inverts to white,
    because no type of either polarity clears 4.5:1 on #EC008C.  */
.brand-euk.light {
	--surface-canvas: var(--n-1);
	--surface-raised: var(--n-0);
	--surface-sunken: var(--p-1);
	--surface-hair: var(--p-3);
	--text-1: var(--i-15);
	--text-2: var(--i-8);
	--text-3: var(--i-6);
	--text-placeholder: var(--i-7);
	--brand: var(--mg-2);
	--action-fill: var(--mg-3);
	--action-fill-hover: var(--mg-5);
	--action-ink: var(--n-0);
	--brand-text: var(--mg-4);
	--brand-text-hover: var(--mg-6);
	--bound: var(--p-5);
	--bound-hover: var(--p-7);
	--focus-line: var(--mg-3);
	--fill: var(--p-2);
	--fill-hover: var(--p-4);
	--disabled-fill: var(--p-0);
	--disabled-text: var(--p-6);
	--grad-a: var(--gr-4);
	--grad-b: var(--mg-3);
	--hero-ink: var(--n-0);
	--state-ok-fill: var(--ok-0);
	--state-ok-text: var(--ok-2);
	--state-wait-fill: var(--wt-0);
	--state-wait-text: var(--wt-2);
	--state-off-fill: var(--of-0);
	--state-off-text: var(--of-2);
	--danger-fill: var(--bd-1);
	--danger-ink: var(--n-0);
	--state-bad-mark: var(--bd-1);
	--state-bad-text: var(--of-2);
	--bar-fill: var(--i-15);
	--bar-ink: var(--n-0);
	--page-fill: var(--surface-canvas);
	--page-text: var(--text-2);
	--heading-text: var(--text-1);
	--button-disabled-fill: var(--disabled-fill);
	--button-disabled-text: var(--disabled-text);
	--primary-button-fill: var(--action-fill);
	--primary-button-text: var(--action-ink);
	--primary-button-hover-fill: var(--action-fill-hover);
	--secondary-button-text: var(--text-1);
	--secondary-button-border: var(--bound);
	--secondary-button-hover-fill: var(--fill);
	--secondary-button-hover-border: var(--bound-hover);
	--secondary-button-active-fill: var(--fill-hover);
	--ghost-button-text: var(--brand-text);
	--ghost-button-hover-fill: var(--fill);
	--ghost-button-hover-text: var(--brand-text-hover);
	--destructive-button-fill: var(--danger-fill);
	--destructive-button-text: var(--danger-ink);
	--field-fill: var(--surface-raised);
	--field-text: var(--text-1);
	--field-muted: var(--text-placeholder);
	--field-border: var(--bound);
	--field-hover-border: var(--bound-hover);
	--field-focus-border: var(--focus-line);
	--field-invalid-border: var(--state-bad-mark);
	--field-disabled-fill: var(--disabled-fill);
	--field-disabled-text: var(--disabled-text);
	--field-disabled-border: var(--surface-hair);
	--field-label-text: var(--text-1);
	--field-label-required-text: var(--state-bad-text);
	--field-hint-text: var(--text-3);
	--field-error-text: var(--state-bad-text);
	--check-fill: var(--surface-raised);
	--check-text: var(--text-1);
	--check-border: var(--bound);
	--check-hover-border: var(--bound-hover);
	--check-on-fill: var(--action-fill);
	--check-on-text: var(--action-ink);
	--switch-fill: var(--fill);
	--switch-text: var(--text-1);
	--switch-border: var(--bound);
	--switch-on-fill: var(--action-fill);
	--switch-on-text: var(--action-ink);
	--card-fill: var(--surface-raised);
	--card-text: var(--text-2);
	--tile-fill: var(--surface-sunken);
	--tile-text: var(--text-2);
	--panel-fill: var(--surface-raised);
	--panel-text: var(--text-2);
	--modal-fill: var(--surface-raised);
	--modal-text: var(--text-1);
	--flash-ok-fill: var(--state-ok-fill);
	--flash-ok-text: var(--state-ok-text);
	--flash-wait-fill: var(--state-wait-fill);
	--flash-wait-text: var(--state-wait-text);
	--flash-bad-fill: var(--state-off-fill);
	--flash-bad-text: var(--state-bad-text);
	--flash-note-fill: var(--surface-sunken);
	--flash-note-text: var(--text-1);
	--status-pill-ok-fill: var(--state-ok-fill);
	--status-pill-ok-text: var(--state-ok-text);
	--status-pill-wait-fill: var(--state-wait-fill);
	--status-pill-wait-text: var(--state-wait-text);
	--status-pill-off-fill: var(--state-off-fill);
	--status-pill-off-text: var(--state-off-text);
	--badge-fill: var(--danger-fill);
	--badge-text: var(--danger-ink);
	--chip-text: var(--text-2);
	--chip-border: var(--bound);
	--chip-hover-fill: var(--fill);
	--chip-on-fill: var(--fill);
	--chip-on-text: var(--text-1);
	--chip-on-border: var(--bound-hover);
	--tag-fill: var(--surface-sunken);
	--tag-text: var(--text-2);
	--avatar-fill: var(--fill);
	--avatar-text: var(--text-2);
	--meter-mark: var(--brand);
	--meter-fill: var(--fill);
	--hero-fill: var(--grad-b);
	--hero-text: var(--hero-ink);
	--list-row-text: var(--text-1);
	--list-row-border: var(--surface-hair);
	--list-row-hover-fill: var(--surface-sunken);
	--list-row-on-fill: var(--fill);
	--navpill-mark: var(--brand-text);
	--navpill-text: var(--text-2);
	--navpill-hover-fill: var(--surface-sunken);
	--navpill-hover-text: var(--text-1);
	--navpill-on-fill: var(--surface-sunken);
	--navpill-on-text: var(--text-1);
	--tab-text: var(--text-3);
	--tab-on-text: var(--brand-text);
	--menu-item-text: var(--text-1);
	--menu-item-hover-fill: var(--surface-sunken);
	--menu-item-on-text: var(--brand-text);
	--bulkbar-fill: var(--bar-fill);
	--bulkbar-text: var(--bar-ink);
	--link-text: var(--brand-text);
	--link-hover-text: var(--brand-text-hover);
	--dropzone-fill: var(--fill);
	--dropzone-text: var(--text-2);
	--dropzone-border: var(--bound);
	--dropzone-hover-fill: var(--fill-hover);
}
/*  The platform, dark — charcoal, as the guide's reverse logo and stationery draw it.
    The action stays the purple under white ink rather than lightening to carry dark
    ink, because every lighter purple that still reads as the brand puts white below
    4.5; brand TYPE lightens instead, two tints up, where it clears 4.5 on the card.  */
.brand-sp.dark {
	--surface-canvas: var(--ch-20);
	--surface-raised: var(--ch-18);
	--surface-sunken: var(--ch-17);
	--surface-hair: var(--ch-14);
	--text-1: var(--ch-1);
	--text-2: var(--ch-6);
	--text-3: var(--ch-7);
	--text-placeholder: var(--ch-7);
	--brand: var(--pu-3);
	--action-fill: var(--pu-5);
	--action-fill-hover: var(--pu-6);
	--action-ink: var(--n-0);
	--brand-text: var(--pu-2);
	--brand-text-hover: var(--pu-1);
	--bound: var(--ch-9);
	--bound-hover: var(--ch-7);
	--focus-line: var(--pu-2);
	--fill: var(--ch-15);
	--fill-hover: var(--ch-13);
	--disabled-fill: var(--ch-19);
	--disabled-text: var(--ch-10);
	--grad-a: var(--gr-5);
	--grad-b: var(--pu-5);
	--hero-ink: var(--n-0);
	--state-ok-fill: var(--ok-3);
	--state-ok-text: var(--ok-1);
	--state-wait-fill: var(--wt-3);
	--state-wait-text: var(--wt-1);
	--state-off-fill: var(--of-3);
	--state-off-text: var(--of-1);
	--danger-fill: var(--bd-2);
	--danger-ink: var(--n-0);
	--state-bad-mark: var(--bd-0);
	--state-bad-text: var(--of-1);
	--bar-fill: var(--ch-15);
	--bar-ink: var(--ch-1);
	--page-fill: var(--surface-canvas);
	--page-text: var(--text-2);
	--heading-text: var(--text-1);
	--button-disabled-fill: var(--disabled-fill);
	--button-disabled-text: var(--disabled-text);
	--primary-button-fill: var(--action-fill);
	--primary-button-text: var(--action-ink);
	--primary-button-hover-fill: var(--action-fill-hover);
	--secondary-button-text: var(--text-1);
	--secondary-button-border: var(--bound);
	--secondary-button-hover-fill: var(--fill);
	--secondary-button-hover-border: var(--bound-hover);
	--secondary-button-active-fill: var(--fill-hover);
	--ghost-button-text: var(--brand-text);
	--ghost-button-hover-fill: var(--fill);
	--ghost-button-hover-text: var(--brand-text-hover);
	--destructive-button-fill: var(--danger-fill);
	--destructive-button-text: var(--danger-ink);
	--field-fill: var(--surface-raised);
	--field-text: var(--text-1);
	--field-muted: var(--text-placeholder);
	--field-border: var(--bound);
	--field-hover-border: var(--bound-hover);
	--field-focus-border: var(--focus-line);
	--field-invalid-border: var(--state-bad-mark);
	--field-disabled-fill: var(--disabled-fill);
	--field-disabled-text: var(--disabled-text);
	--field-disabled-border: var(--surface-hair);
	--field-label-text: var(--text-1);
	--field-label-required-text: var(--state-bad-text);
	--field-hint-text: var(--text-3);
	--field-error-text: var(--state-bad-text);
	--check-fill: var(--surface-raised);
	--check-text: var(--text-1);
	--check-border: var(--bound);
	--check-hover-border: var(--bound-hover);
	--check-on-fill: var(--action-fill);
	--check-on-text: var(--action-ink);
	--switch-fill: var(--fill);
	--switch-text: var(--text-1);
	--switch-border: var(--bound);
	--switch-on-fill: var(--action-fill);
	--switch-on-text: var(--action-ink);
	--card-fill: var(--surface-raised);
	--card-text: var(--text-2);
	--tile-fill: var(--surface-sunken);
	--tile-text: var(--text-2);
	--panel-fill: var(--surface-raised);
	--panel-text: var(--text-2);
	--modal-fill: var(--surface-raised);
	--modal-text: var(--text-1);
	--flash-ok-fill: var(--state-ok-fill);
	--flash-ok-text: var(--state-ok-text);
	--flash-wait-fill: var(--state-wait-fill);
	--flash-wait-text: var(--state-wait-text);
	--flash-bad-fill: var(--state-off-fill);
	--flash-bad-text: var(--state-bad-text);
	--flash-note-fill: var(--surface-sunken);
	--flash-note-text: var(--text-1);
	--status-pill-ok-fill: var(--state-ok-fill);
	--status-pill-ok-text: var(--state-ok-text);
	--status-pill-wait-fill: var(--state-wait-fill);
	--status-pill-wait-text: var(--state-wait-text);
	--status-pill-off-fill: var(--state-off-fill);
	--status-pill-off-text: var(--state-off-text);
	--badge-fill: var(--danger-fill);
	--badge-text: var(--danger-ink);
	--chip-text: var(--text-2);
	--chip-border: var(--bound);
	--chip-hover-fill: var(--fill);
	--chip-on-fill: var(--fill);
	--chip-on-text: var(--text-1);
	--chip-on-border: var(--bound-hover);
	--tag-fill: var(--surface-sunken);
	--tag-text: var(--text-2);
	--avatar-fill: var(--fill);
	--avatar-text: var(--text-2);
	--meter-mark: var(--brand);
	--meter-fill: var(--fill);
	--hero-fill: var(--grad-b);
	--hero-text: var(--hero-ink);
	--list-row-text: var(--text-1);
	--list-row-border: var(--surface-hair);
	--list-row-hover-fill: var(--surface-sunken);
	--list-row-on-fill: var(--fill);
	--navpill-mark: var(--brand-text);
	--navpill-text: var(--text-2);
	--navpill-hover-fill: var(--surface-sunken);
	--navpill-hover-text: var(--text-1);
	--navpill-on-fill: var(--surface-sunken);
	--navpill-on-text: var(--text-1);
	--tab-text: var(--text-3);
	--tab-on-text: var(--brand-text);
	--menu-item-text: var(--text-1);
	--menu-item-hover-fill: var(--surface-sunken);
	--menu-item-on-text: var(--brand-text);
	--bulkbar-fill: var(--bar-fill);
	--bulkbar-text: var(--bar-ink);
	--link-text: var(--brand-text);
	--link-hover-text: var(--brand-text-hover);
	--dropzone-fill: var(--fill);
	--dropzone-text: var(--text-2);
	--dropzone-border: var(--bound);
	--dropzone-hover-fill: var(--fill-hover);
}
/*  EmployabilityUK, dark — derived rather than drawn; there was no EUK dark set.  */
.brand-euk.dark {
	--surface-canvas: var(--v-12);
	--surface-raised: var(--v-11);
	--surface-sunken: var(--v-10);
	--surface-hair: var(--v-6);
	--text-1: var(--v-0);
	--text-2: var(--v-1);
	--text-3: var(--v-3);
	--text-placeholder: var(--v-3);
	--brand: var(--mg-1);
	--action-fill: var(--mg-1);
	--action-fill-hover: var(--mg-0);
	--action-ink: var(--mg-7);
	--brand-text: var(--mg-1);
	--brand-text-hover: var(--mg-0);
	--bound: var(--v-4);
	--bound-hover: var(--v-2);
	--focus-line: var(--mg-1);
	--fill: var(--v-8);
	--fill-hover: var(--v-7);
	--disabled-fill: var(--v-9);
	--disabled-text: var(--v-5);
	--grad-a: var(--gr-3);
	--grad-b: var(--gr-0);
	--hero-ink: var(--n-0);
	--state-ok-fill: var(--ok-3);
	--state-ok-text: var(--ok-1);
	--state-wait-fill: var(--wt-3);
	--state-wait-text: var(--wt-1);
	--state-off-fill: var(--of-3);
	--state-off-text: var(--of-1);
	--danger-fill: var(--bd-1);
	--danger-ink: var(--n-0);
	--state-bad-mark: var(--bd-0);
	--state-bad-text: var(--of-1);
	--bar-fill: var(--v-8);
	--bar-ink: var(--v-0);
	--page-fill: var(--surface-canvas);
	--page-text: var(--text-2);
	--heading-text: var(--text-1);
	--button-disabled-fill: var(--disabled-fill);
	--button-disabled-text: var(--disabled-text);
	--primary-button-fill: var(--action-fill);
	--primary-button-text: var(--action-ink);
	--primary-button-hover-fill: var(--action-fill-hover);
	--secondary-button-text: var(--text-1);
	--secondary-button-border: var(--bound);
	--secondary-button-hover-fill: var(--fill);
	--secondary-button-hover-border: var(--bound-hover);
	--secondary-button-active-fill: var(--fill-hover);
	--ghost-button-text: var(--brand-text);
	--ghost-button-hover-fill: var(--fill);
	--ghost-button-hover-text: var(--brand-text-hover);
	--destructive-button-fill: var(--danger-fill);
	--destructive-button-text: var(--danger-ink);
	--field-fill: var(--surface-raised);
	--field-text: var(--text-1);
	--field-muted: var(--text-placeholder);
	--field-border: var(--bound);
	--field-hover-border: var(--bound-hover);
	--field-focus-border: var(--focus-line);
	--field-invalid-border: var(--state-bad-mark);
	--field-disabled-fill: var(--disabled-fill);
	--field-disabled-text: var(--disabled-text);
	--field-disabled-border: var(--surface-hair);
	--field-label-text: var(--text-1);
	--field-label-required-text: var(--state-bad-text);
	--field-hint-text: var(--text-3);
	--field-error-text: var(--state-bad-text);
	--check-fill: var(--surface-raised);
	--check-text: var(--text-1);
	--check-border: var(--bound);
	--check-hover-border: var(--bound-hover);
	--check-on-fill: var(--action-fill);
	--check-on-text: var(--action-ink);
	--switch-fill: var(--fill);
	--switch-text: var(--text-1);
	--switch-border: var(--bound);
	--switch-on-fill: var(--action-fill);
	--switch-on-text: var(--action-ink);
	--card-fill: var(--surface-raised);
	--card-text: var(--text-2);
	--tile-fill: var(--surface-sunken);
	--tile-text: var(--text-2);
	--panel-fill: var(--surface-raised);
	--panel-text: var(--text-2);
	--modal-fill: var(--surface-raised);
	--modal-text: var(--text-1);
	--flash-ok-fill: var(--state-ok-fill);
	--flash-ok-text: var(--state-ok-text);
	--flash-wait-fill: var(--state-wait-fill);
	--flash-wait-text: var(--state-wait-text);
	--flash-bad-fill: var(--state-off-fill);
	--flash-bad-text: var(--state-bad-text);
	--flash-note-fill: var(--surface-sunken);
	--flash-note-text: var(--text-1);
	--status-pill-ok-fill: var(--state-ok-fill);
	--status-pill-ok-text: var(--state-ok-text);
	--status-pill-wait-fill: var(--state-wait-fill);
	--status-pill-wait-text: var(--state-wait-text);
	--status-pill-off-fill: var(--state-off-fill);
	--status-pill-off-text: var(--state-off-text);
	--badge-fill: var(--danger-fill);
	--badge-text: var(--danger-ink);
	--chip-text: var(--text-2);
	--chip-border: var(--bound);
	--chip-hover-fill: var(--fill);
	--chip-on-fill: var(--fill);
	--chip-on-text: var(--text-1);
	--chip-on-border: var(--bound-hover);
	--tag-fill: var(--surface-sunken);
	--tag-text: var(--text-2);
	--avatar-fill: var(--fill);
	--avatar-text: var(--text-2);
	--meter-mark: var(--brand);
	--meter-fill: var(--fill);
	--hero-fill: var(--grad-b);
	--hero-text: var(--hero-ink);
	--list-row-text: var(--text-1);
	--list-row-border: var(--surface-hair);
	--list-row-hover-fill: var(--surface-sunken);
	--list-row-on-fill: var(--fill);
	--navpill-mark: var(--brand-text);
	--navpill-text: var(--text-2);
	--navpill-hover-fill: var(--surface-sunken);
	--navpill-hover-text: var(--text-1);
	--navpill-on-fill: var(--surface-sunken);
	--navpill-on-text: var(--text-1);
	--tab-text: var(--text-3);
	--tab-on-text: var(--brand-text);
	--menu-item-text: var(--text-1);
	--menu-item-hover-fill: var(--surface-sunken);
	--menu-item-on-text: var(--brand-text);
	--bulkbar-fill: var(--bar-fill);
	--bulkbar-text: var(--bar-ink);
	--link-text: var(--brand-text);
	--link-hover-text: var(--brand-text-hover);
	--dropzone-fill: var(--fill);
	--dropzone-text: var(--text-2);
	--dropzone-border: var(--bound);
	--dropzone-hover-fill: var(--fill-hover);
}
/*  ----------------------------------------------------------------------------
    Mode-only tokens.  Elevation is bound per mode rather than per palette: a
    shadow tinted with the ink hue is invisible on a dark canvas, so on dark the
    boundary carries the elevation and the shadow only deepens it.

    The focus ring is declared here rather than on :root, because a var() inside a
    custom property is substituted where THAT property is computed — and
    --focus-line does not exist on :root: the palette classes sit on the app's root
    div, not on <html>.  Declared here it resolves on the element that has it, so
    the ring is purple in one brand and magenta in the other with no component
    involved.  The component contract's own colour properties are in the palette
    blocks above for exactly the same reason.
    ----------------------------------------------------------------------------  */
.light {
	/*  A card at rest.  */
	--lift-1: 0 1px 2px rgba(25, 26, 56, .06), 0 1px 3px rgba(25, 26, 56, .04);
	/*  A raised surface: the detail rail, a hovered card.  */
	--lift-2: 0 4px 12px rgba(25, 26, 56, .07), 0 1px 3px rgba(25, 26, 56, .05);
	/*  A dialog, a menu, the mobile sheet.  */
	--lift-3: 0 18px 40px rgba(25, 26, 56, .13), 0 4px 12px rgba(25, 26, 56, .07);
	/*  The dim behind a dialog.  Alpha is part of the value: a dialog's dim is a
	    translucent sheet, not a colour.  */
	--scrim: rgba(18, 19, 42, .46);
	/*  Keyboard focus, in the brand's own focus line.  No shell form: a phone has
	    no focus ring, and the platforms draw their own selection affordance.  */
	--focus-ring: 0 0 0 3px color-mix(in srgb, var(--focus-line) var(--opacity-focus-ring), transparent);
	--card-elevation: var(--lift-1);
	--panel-elevation: var(--lift-2);
	--modal-elevation: var(--lift-3);
	--hero-elevation: var(--lift-2);
}
.dark {
	--lift-1: 0 0 0 1px var(--surface-hair), 0 1px 2px rgba(0, 0, 0, .40);
	--lift-2: 0 0 0 1px var(--surface-hair), 0 6px 16px rgba(0, 0, 0, .50);
	--lift-3: 0 0 0 1px var(--surface-hair), 0 20px 44px rgba(0, 0, 0, .60);
	--scrim: rgba(0, 0, 0, .62);
	--focus-ring: 0 0 0 3px color-mix(in srgb, var(--focus-line) var(--opacity-focus-ring), transparent);
	--card-elevation: var(--lift-1);
	--panel-elevation: var(--lift-2);
	--modal-elevation: var(--lift-3);
	--hero-elevation: var(--lift-2);
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--m-fast: 0ms;
		--m-base: 0ms;
		--m-slow: 0ms;
	}
}
/*  GENERATED TOKENS END  */