/*  ============================================================================
    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 four palettes — 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 — 156 pairs, tabulated in `10 Foundations`.

    This file and `components.css` are the whole stylesheet.  `theme.css`, the legacy
    sheet they were drafted to replace, is deleted, and the `.sp-next` scoping that
    let the two coexist came off with it.
    ============================================================================  */

: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.  */
	/*  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.  */
	/*  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.  */
	--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;
	--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;
}

/*  ----------------------------------------------------------------------------
    Tier 2 — the four palettes.
    ----------------------------------------------------------------------------  */
/*  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);
}

/*  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);
}

/*  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);
}

/*  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);
}
/*  ----------------------------------------------------------------------------
    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.
    ----------------------------------------------------------------------------  */
.light {
	--lift-1: 0 1px 2px rgba(25, 26, 56, .06), 0 1px 3px rgba(25, 26, 56, .04);
	--lift-2: 0 4px 12px rgba(25, 26, 56, .07), 0 1px 3px rgba(25, 26, 56, .05);
	--lift-3: 0 18px 40px rgba(25, 26, 56, .13), 0 4px 12px rgba(25, 26, 56, .07);
	--scrim:  rgba(18, 19, 42, .46);
	--focus-ring: 0 0 0 3px color-mix(in srgb, var(--focus-line) 28%, transparent);
}
.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) 28%, transparent);
}

/*  The focus ring is declared beside --scrim 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.  */

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