/* ==========================================================================
Site Support Group — BRAND TOKENS
--------------------------------------------------------------------------
THE single source of truth for colour, type, radii, elevation and rhythm.
Every page loads this FIRST, before styles.css and any page stylesheet:
(service pages only)
These values were lifted verbatim from the original styles.css :root block,
which now defers to this file — do not redeclare them anywhere else. When a
new page needs a colour or a size, use a token from here or add one here.
Nothing in this file selects anything but :root, so load order beyond
"before the stylesheets that consume it" does not matter.
Design intent, for anyone extending the site:
Light, editorial, precise. Porcelain surfaces, brand-navy ink, ONE cobalt
accent. Dark blocks are used sparingly and deliberately (the Hub section
on the homepage, the repair process band on service pages) so they read
as "the product world" rather than as decoration.
Radius system: panels 14px, inputs 10px, buttons pill. No exceptions.
========================================================================== */
:root {
color-scheme: light;
/* ---------- Surfaces ----------------------------------------------------
--bg page ground (porcelain, never pure white)
--bg-alt recessed band / alternating section
--surface cards and panels that sit ON the ground
--line hairline dividers and card borders
--line-strong borders that need to be seen (ghost buttons)
--input-border >= 3:1 against white, required by WCAG 1.4.11 */
--bg: #FAFBFD;
--bg-alt: #F2F5F9;
--surface: #FFFFFF;
--line: rgba(10, 37, 64, 0.1);
--line-strong: rgba(10, 37, 64, 0.18);
--input-border: rgba(10, 37, 64, 0.5);
/* ---------- Ink ---------------------------------------------------------
--ink headings and body copy
--ink-soft supporting copy, nav links, list text (>= 4.5:1 on --bg) */
--ink: #0A2540;
--ink-soft: #4A6076;
/* ---------- Type --------------------------------------------------------
Deliberately a system stack: nothing is fetched from a third party, so
the site sets no cookies, needs no font-src beyond 'self', and paints
text on the first frame. Display and body are the same stack; hierarchy
comes from weight, size and letter-spacing, not from a second family.
If a licensed display face is ever added, change --font-display ONLY. */
--font-display: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
--font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
--font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;
/* Fluid type scale — the sizes used by .h2/.h3/.h4/.lede in styles.css.
Exposed as tokens so service pages can reach for the same steps without
having to reuse the homepage's class names. */
--fs-h1: clamp(2.4rem, 5.4vw, 4.1rem);
--fs-h2: clamp(2.1rem, 4.2vw, 3.4rem);
--fs-h3: clamp(1.35rem, 2.4vw, 1.8rem);
--fs-h4: clamp(1.05rem, 1.5vw, 1.2rem);
--fs-lede: clamp(1.05rem, 1.5vw, 1.2rem);
--fs-body: 1rem;
--fs-small: 0.92rem;
--fs-micro: 0.8rem;
--lh-tight: 1.04;
--lh-heading: 1.14;
--lh-body: 1.6;
--lh-lede: 1.65;
--tracking-tight: -0.022em;
--tracking-eyebrow: 0.2em;
/* ---------- Accent ------------------------------------------------------
One accent, used identically everywhere. --accent-deep is the hover/
pressed state; --accent-wash is the 6-7% tint used behind soft panels. */
--accent: #0862F4;
--accent-deep: #0550CE;
--accent-wash: rgba(8, 98, 244, 0.07);
--accent-glow: rgba(8, 98, 244, 0.55);
/* ---------- Status ------------------------------------------------------ */
--danger: #C6273B;
--ok: #0B7A6B;
--warn: #B4690E;
/* ---------- Brand mark segment colours, as printed ----------------------
The six segments of the mark map 1:1 onto the six service lines. Each
service page sets --svc to its own colour and everything accent-tinted
on that page follows. Keep this mapping stable — it is how a visitor
learns which segment means which discipline.
tr --c-teal Stores & Inventory
r --c-sky Part Repair & Sourcing
br --c-blue Maintenance Strategy & Consultancy
bl --c-royal Training & Development
l --c-steel Compliance & Safety
tl --c-navy Resourcing & Recruitment */
--c-navy: #0A2540;
--c-teal: #02B2A5;
--c-sky: #1B82C3;
--c-blue: #0862F4;
--c-royal: #075FF4;
--c-steel: #0E2D4C;
/* Matching 5-6% washes, for soft panels tinted to a service colour. */
--c-teal-soft: rgba(2, 178, 165, 0.06);
--c-sky-soft: rgba(27, 130, 195, 0.06);
--c-blue-soft: rgba(8, 98, 244, 0.06);
--c-royal-soft: rgba(7, 95, 244, 0.06);
--c-steel-soft: rgba(14, 45, 76, 0.05);
--c-navy-soft: rgba(10, 37, 64, 0.05);
/* ---------- Mark defaults, sampled from assets/logo-master.png ---------- */
--seg-tl: #021D43;
--seg-tr: #08C8CA;
--seg-r: #039DEA;
--seg-br: #005EFC;
--seg-bl: #0041BF;
--seg-l: #023E7C;
--mark-pin: #021D43;
--mark-pin-dot: #005AFC;
/* ---------- Dark block tokens ------------------------------------------
Scoped to .hub on the homepage and .darkband on service pages. The page
never goes dark globally; these are for deliberate contrast blocks. */
--hub-bg: #071120;
--hub-text: #EAF1FA;
--hub-dim: #A7BBD3;
/* ---------- Geometry ---------------------------------------------------- */
--nav-h: 72px;
--r-panel: 14px;
--r-input: 10px;
--r-pill: 999px;
--r-chip: 8px;
/* Layout */
--wrap-max: 1240px;
--wrap-pad: clamp(20px, 4vw, 48px);
--measure: 60ch;
/* Vertical rhythm — the section padding used site-wide. */
--section-pad: clamp(96px, 13vh, 170px);
--section-pad-tight: clamp(64px, 8vh, 104px);
/* Spacing steps, for new components. */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 24px;
--sp-6: 32px;
--sp-7: 48px;
--sp-8: 64px;
--sp-9: 96px;
/* ---------- Elevation ---------------------------------------------------
One panel shadow, used everywhere a card lifts off the ground. The
second, wider layer is what makes it read as light rather than a border. */
--shadow-panel: 0 1px 2px rgba(10, 37, 64, 0.04), 0 24px 60px -18px rgba(10, 37, 64, 0.16);
--shadow-card: 0 1px 2px rgba(10, 37, 64, 0.04), 0 12px 28px -14px rgba(10, 37, 64, 0.14);
--shadow-btn: 0 10px 24px -10px var(--accent-glow);
/* ---------- Motion ------------------------------------------------------
Every transition on the site uses one of these. The cubic-bezier is the
"settle" curve used for anything that moves position. ALL motion must be
gated behind prefers-reduced-motion. */
--ease-settle: cubic-bezier(0.16, 1, 0.3, 1);
--t-fast: 0.15s;
--t-base: 0.18s;
--t-slow: 0.25s;
}