/*  ============================================================================
    Starting Point — 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 — Starting Point 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 — the light palettes’ paper, and their warm boundaries  */
	--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 — Starting Point’s type, and the whole of its dark palette  */
	--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;
	/*  Orange — the Starting Point hue, ending in the ink that sits on it  */
	--or-0: #FFA347;
	--or-1: #FF8F1F;
	--or-2: #FF8001;
	--or-3: #E87200;
	--or-4: #C25E00;
	--or-5: #A34B00;
	--or-6: #8F4200;
	--or-7: #22132B;
	/*  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  */
	--gr-0: #8E0362;
	--gr-1: #82027E;
	--gr-2: #6E0369;
	--gr-3: #1A1170;
	--gr-4: #110B79;
	/*  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  */
	--bd-0: #E5484D;
	--bd-1: #D92D20;
	/*  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 Nunito
	    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.  */
	--font: 'Nunito', ui-sans-serif, system-ui, sans-serif;
	/*  The second family, and the only one that is not Nunito.  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:     800 28px/32px var(--font);
	--t-h1:          800 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 Nunito, 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.
    ----------------------------------------------------------------------------  */
/*  Starting Point, light — the default. Brand fill carries ink.  */
.brand-sp.light {
	--surface-canvas: var(--n-1);
	--surface-raised: var(--n-0);
	--surface-sunken: var(--n-3);
	--surface-hair: var(--n-5);
	--text-1: var(--i-15);
	--text-2: var(--i-8);
	--text-3: var(--i-6);
	--text-placeholder: var(--i-7);
	--brand: var(--or-2);
	--action-fill: var(--or-2);
	--action-fill-hover: var(--or-3);
	--action-ink: var(--or-7);
	--brand-text: var(--or-5);
	--brand-text-hover: var(--or-6);
	--bound: var(--n-7);
	--bound-hover: var(--n-9);
	--focus-line: var(--or-4);
	--fill: var(--n-4);
	--fill-hover: var(--n-6);
	--disabled-fill: var(--n-2);
	--disabled-text: var(--n-8);
	--grad-a: var(--gr-4);
	--grad-b: var(--gr-1);
	--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);
}

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

/*  Starting Point, dark.  */
.brand-sp.dark {
	--surface-canvas: var(--i-16);
	--surface-raised: var(--i-14);
	--surface-sunken: var(--i-12);
	--surface-hair: var(--i-10);
	--text-1: var(--i-0);
	--text-2: var(--i-1);
	--text-3: var(--i-2);
	--text-placeholder: var(--i-2);
	--brand: var(--or-1);
	--action-fill: var(--or-1);
	--action-fill-hover: var(--or-0);
	--action-ink: var(--or-7);
	--brand-text: var(--or-1);
	--brand-text-hover: var(--or-0);
	--bound: var(--i-4);
	--bound-hover: var(--i-3);
	--focus-line: var(--or-1);
	--fill: var(--i-11);
	--fill-hover: var(--i-9);
	--disabled-fill: var(--i-13);
	--disabled-text: var(--i-5);
	--grad-a: var(--gr-3);
	--grad-b: var(--gr-2);
	--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(--i-11);
	--bar-ink: var(--i-0);
}

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