/* Matrix International (UK) Ltd website: design tokens. The ONE place the brand lives on the site.
   Fonts, every colour (and the text-safe variants that pass WCAG AA), type scale, spacing, radii, shadows and motion.
   site.css references these only (tools/tokens.test.mjs enforces it), so a new brand is a change to this file.
   One theme: DT-748's "Foundry Navy · Ice" (brand-refresh/brand/directions/d-ice/tokens.json), the owner's pick of
   2026-10-01, baked in on :root. The tokens are grouped by role so another theme (e.g. a proper all-light one) can be
   added later as a further block that overrides the roles; tools/themes.test.mjs checks every text pairing for AA. */

/* ---------- Fonts (self-hosted, SIL Open Font License, site/fonts) ---------- */
@font-face { font-family: 'Archivo'; font-weight: 100 900; font-stretch: 62% 125%; src: url('../fonts/Archivo-var.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'Plex Sans'; font-weight: 300; src: url('../fonts/IBMPlexSans-Light.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'Plex Sans'; font-weight: 400; src: url('../fonts/IBMPlexSans-Regular.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'Plex Sans'; font-weight: 400; font-style: italic; src: url('../fonts/IBMPlexSans-Italic.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'Plex Sans'; font-weight: 500; src: url('../fonts/IBMPlexSans-Medium.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'Plex Sans'; font-weight: 600; src: url('../fonts/IBMPlexSans-SemiBold.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'Plex Mono'; font-weight: 500; src: url('../fonts/IBMPlexMono-Medium.woff') format('woff'); font-display: swap; }

:root {
	/* ---------- Palette (Foundry Navy · Ice) ---------- */
	--navy: #17324F;          /* slate navy */
	--teal: #2B5680;          /* steel blue */
	--cyan: #8FB8DE;          /* ice: the accent on dark */
	--green: #3D6A92;
	--amber: #8FB8DE;
	--sky: #3D6A92;
	--coral: #2B5680;
	--ink: #0B1D2E;           /* ink navy */
	--white: #FFFFFF;
	--fire: #E8590C;          /* the logo's lit dot: decoration and the strapline accent (large text) only */

	/* ---------- Surfaces ---------- */
	--deep: #0B1D2E;          /* heroes, photo-fade sections, scrim solid */
	--card-dark: #17324F;     /* raised card on deep */
	--footer-bg: #0B1D2E;
	--footer-text: #D9D4CC;
	--footer-link: #F4EFE6;
	--paper: #F4EFE6;         /* bone */
	--soft: #FAF7F3;
	--mist: #FAF7F3;
	--line: #D9D4CC;
	--line-dark: rgba(255, 255, 255, .14);
	--on-dark-08: rgba(255, 255, 255, .08);
	--on-dark-28: rgba(255, 255, 255, .28);
	--on-dark-40: rgba(255, 255, 255, .40);
	--on-dark-55: rgba(255, 255, 255, .55);
	--card-bg: var(--white);  /* cards sit a step above the paper */

	/* ---------- Text ---------- */
	--text: var(--ink);
	--muted: #5A6672;
	--fog: #D9D4CC;           /* body text on deep */
	--on-dark: #F4EFE6;
	--heading: var(--ink);
	/* Accent text that passes 4.5:1 on paper, soft and cards */
	--teal-text: #2B5680;
	--amber-text: #2B5680;
	--green-text: #5A6672;
	--sky-text: #3D6A92;
	--coral-text: #2B5680;
	/* Accent text for dark surfaces */
	--green-light: #8FB8DE;
	--sky-light: #8FB8DE;
	--coral-light: #8FB8DE;

	/* ---------- Roles ---------- */
	--header-bg: var(--paper);         /* the header: positive logo on bone */
	--header-text: var(--heading);
	--header-muted: var(--muted);
	--header-line: var(--line);
	--menu-bg: var(--paper);           /* the mega menu */
	--menu-hover: var(--soft);
	--brand-mark: var(--cyan);
	--kicker: #2B5680;                 /* kickers and labels on light */
	--kicker-dark: #8FB8DE;            /* kickers and labels on dark */
	--link: #2B5680;
	--link-hover: var(--ink);
	--link-dark: #8FB8DE;
	--cta: #8FB8DE;                    /* the one call-to-action colour */
	--cta-hover: #A0C3E3;
	--on-cta: var(--ink);
	--focus: #8FB8DE;
	--focus-halo: var(--ink);
	--tick: #2B5680;
	--tick-dark: #8FB8DE;
	--problem: #2B5680;
	--dots: rgba(143, 184, 222, .45);  /* the dot-field motif */
	--strapline-accent: var(--fire);   /* the home strapline's second phrase; large text only (3:1 on --deep) */

	/* Scrim: solid --deep under text, fading to the photo. Only the solid part ever carries text. */
	--scrim: var(--deep);
	--scrim-60: rgba(11, 29, 46, .60);
	--scrim-55: rgba(11, 29, 46, .55);
	--scrim-25: rgba(11, 29, 46, .25);
	--scrim-12: rgba(11, 29, 46, .12);
	--scrim-05: rgba(11, 29, 46, .05);
	--scrim-0: rgba(11, 29, 46, 0);

	/* Accent cycle for numbered things: a1..a6 (fill, text on light, text on dark, text on the fill) */
	--a1: #8FB8DE; --a1-text: #2B5680; --a1-dark: #8FB8DE; --a1-on: #0B1D2E;
	--a2: #17324F; --a2-text: #17324F; --a2-dark: #8FB8DE; --a2-on: #FFFFFF;
	--a3: #5A6672; --a3-text: #5A6672; --a3-dark: #D9D4CC; --a3-on: #FFFFFF;
	--a4: #0B1D2E; --a4-text: #0B1D2E; --a4-dark: #F4EFE6; --a4-on: #FFFFFF;
	--a5: #2B5680; --a5-text: #2B5680; --a5-dark: #8FB8DE; --a5-on: #FFFFFF;
	--a6: #3D6A92; --a6-text: #3D6A92; --a6-dark: #8FB8DE; --a6-on: #FFFFFF;

	/* ---------- Type ---------- */
	--font-sans: 'Plex Sans', 'Segoe UI', Arial, sans-serif;
	--font-head: 'Archivo', Arial, sans-serif;
	--font-mono: 'Plex Mono', Consolas, monospace;
	--weight-head: 800;
	--stretch-head: 125%;
	--weight-lead: 300;
	--fs-display: clamp(2.75rem, 1rem + 5.4vw, 5.75rem);
	--fs-strapline: min(var(--fs-display), 9.4vw); /* display size, two lines (the owner's final round); scales down so "Systems you own." fits a 320 px phone */
	--fs-strapline-split: clamp(2.25rem, 1rem + 2.6vw, 3.75rem); /* the home hero's strapline beside the video (DT-781): smaller than display */
	--fs-h1: clamp(2.5rem, 1.4rem + 4.4vw, 4.75rem);
	--fs-h2: clamp(2rem, 1.2rem + 2.8vw, 3.5rem);
	--fs-h2-fade: clamp(2.25rem, 1.4rem + 3.4vw, 4.25rem);
	--fs-h3: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
	--fs-lead: clamp(1.125rem, 1rem + .55vw, 1.4375rem);
	--fs-body: 1.0625rem;
	--fs-small: .9375rem;
	--fs-label: .8125rem;
	--fs-tag: .75rem;
	--tracking-label: .05em;
	--tracking-btn: .08em;
	--tracking-head: -.02em;
	--tracking-display: -.025em;
	--leading-body: 1.6;
	--leading-head: 1;

	/* ---------- Space, radii, shadow, grid, motion ---------- */
	--s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
	--section: clamp(72px, 5rem + 4vw, 144px);
	--r-sm: 2px; --r: 4px; --r-lg: 6px; --r-pill: 4px;
	--shadow: 0 24px 48px -24px rgba(11, 29, 46, .45);
	--shadow-sm: 0 8px 20px -12px rgba(11, 29, 46, .35);
	--shadow-header: 0 10px 30px -10px rgba(0, 0, 0, .35);
	--shadow-menu: 0 30px 60px -20px rgba(0, 0, 0, .45);
	--wrap: 1280px; --wrap-wide: 1480px; --gutter: 24px;
	--ease: cubic-bezier(.2, .7, .2, 1);
	--t: 180ms;
	--t-slow: 600ms;
	--t-fade: 1500ms;          /* the industry hero crossfade */
	--logo-h: 54px;            /* the pixel logo's mark is half its height and 9 cells: 27 px = 3 px a cell; 159 px wide (min 120) */
}

/* ---------- Navy · Ice, dark: the site's look (the owner's final round, DT-72, 2026-10-01) ----------
   DT-748's d-ice-dark set (directions/d-ice-dark/tokens.json, through preview/make-themes.mjs) over the light roles
   above: navy and ice grounds, cream text. Remove this block for an all-light site. */
:root {
	--paper: #0B1D2E;
	--soft: #0D2338;
	--mist: #0D2338;
	--line: #2C3A48;
	--deep: #0B1D2E;
	--card-dark: #102A43;
	--footer-bg: #0D2338;
	--footer-text: #A9ACAB;
	--footer-link: #F4EFE6;
	--text: #C1C1BE;
	--muted: #A9ACAB;
	--fog: #C1C1BE;
	--on-dark: #F4EFE6;
	--heading: #F4EFE6;
	--teal-text: #8FB8DE;
	--amber-text: #8FB8DE;
	--green-text: #A9ACAB;
	--sky-text: #C1C1BE;
	--coral-text: #8FB8DE;
	--green-light: #C1C1BE;
	--sky-light: #C1C1BE;
	--coral-light: #C1C1BE;
	--brand-mark: #E8590C;
	--kicker: #8FB8DE;
	--kicker-dark: #8FB8DE;
	--link: #8FB8DE;
	--link-hover: #F4EFE6;
	--link-dark: #8FB8DE;
	--cta: #8FB8DE;
	--cta-hover: #A0C3E3;
	--on-cta: #0B1D2E;
	--focus: #8FB8DE;
	--focus-halo: #0B1D2E;
	--tick: #8FB8DE;
	--tick-dark: #8FB8DE;
	--problem: #8FB8DE;
	--dots: rgba(143, 184, 222, 0.3);
	--scrim: #0B1D2E;
	--scrim-60: rgba(11, 29, 46, 0.6);
	--scrim-55: rgba(11, 29, 46, 0.55);
	--scrim-25: rgba(11, 29, 46, 0.25);
	--scrim-12: rgba(11, 29, 46, 0.12);
	--scrim-05: rgba(11, 29, 46, 0.05);
	--scrim-0: rgba(11, 29, 46, 0);
	--a1: #8FB8DE;
	--a1-text: #8FB8DE;
	--a1-dark: #8FB8DE;
	--a1-on: #0B1D2E;
	--a2: #102A43;
	--a2-text: #F4EFE6;
	--a2-dark: #F4EFE6;
	--a2-on: #F4EFE6;
	--a3: #13324F;
	--a3-text: #8FB8DE;
	--a3-dark: #8FB8DE;
	--a3-on: #0B1D2E;
	--a4: #0D2338;
	--a4-text: #F4EFE6;
	--a4-dark: #F4EFE6;
	--a4-on: #0B1D2E;
	--a5: #8FB8DE;
	--a5-text: #C1C1BE;
	--a5-dark: #C1C1BE;
	--a5-on: #0B1D2E;
	--a6: #F4EFE6;
	--a6-text: #F4EFE6;
	--a6-dark: #F4EFE6;
	--a6-on: #0B1D2E;
	--glow: radial-gradient(closest-side, #39536C, transparent);
	--fire: #E8590C;
	--r-sm: 8px;
	--r: 16px;
	--r-lg: 24px;
	--r-pill: 999px;
	--card-bg: var(--soft);         /* cards a step above the navy page */
	--header-bg: var(--deep);
	--menu-bg: var(--card-dark);
}