/*
 * Semantic design tokens (docs/DESIGN_SYSTEM.md sections 2 to 6 and 11).
 *
 * Two tiers: the primitives (palette, sizes, radii, shadows, motion, z-index) live in theme.json, so
 * the block editor and the front end share them. WordPress prints them as --wp--preset--* and
 * --wp--custom--*. This file gives them the names components use. Components use ONLY the names
 * below; no raw colour, size, radius or shadow appears in component CSS (Stylelint checks this).
 *
 * The colours are the owner's palette of 1 Oct 2026 (decision D-07): primary #1D343F (blue-900, the smallest share:
 * filled actions and the footer), secondary #38667D (blue-600: links, accents, the deep band), background #F7FAFC
 * (blue-50, the largest share) and grey #DDDDE1 (slate-200, hairlines). The other steps are derived from them.
 *
 * Breakpoints, for reference (custom properties do not work inside @media): 600 / 768 / 1024 (the
 * navigation switches here) / 1280 / 1440 px, written as 37.5em / 48em / 64em / 80em / 90em.
 */

/* Layer order for every stylesheet. overrides.css is deliberately NOT in a layer (it must win over
   WordPress core and plugin CSS, which are unlayered). */
@layer reset, base, layout, components, utilities;

:root {
	/* Colour */
	--color-bg: var(--wp--preset--color--blue-50);
	--color-surface: var(--wp--preset--color--white);
	--color-surface-tint: var(--wp--preset--color--blue-100);
	--color-surface-tint-2: var(--wp--custom--color--blue-200);
	--color-surface-deep: var(--wp--preset--color--blue-600);
	--color-surface-footer: var(--wp--preset--color--blue-900);
	--color-text: var(--wp--preset--color--ink);
	--color-text-secondary: var(--wp--custom--color--slate-700);
	--color-text-muted: var(--wp--custom--color--slate-600);
	--color-text-inverse: var(--wp--preset--color--white);
	--color-text-inverse-muted: var(--wp--custom--color--blue-200);
	--color-line: var(--wp--preset--color--slate-200);
	--color-line-strong: var(--wp--custom--color--slate-500);
	--color-line-inverse: var(--wp--custom--color--blue-700);

	/* Filled actions (buttons, the WhatsApp button, a selected chip, a ticked box): the primary, used sparingly. */
	--color-primary: var(--wp--preset--color--blue-900);
	--color-primary-hover: var(--wp--custom--color--blue-700);
	--color-primary-active: var(--wp--custom--color--blue-950);

	/* Text links and link-like controls (text buttons, card arrows, the current menu item): the secondary. */
	--color-link: var(--wp--preset--color--blue-600);
	--color-link-hover: var(--wp--preset--color--blue-900);
	--color-link-active: var(--wp--custom--color--blue-950);

	/* Accents: eyebrows, and the short rules above pillars, steps and facts. */
	--color-accent: var(--wp--preset--color--blue-600);
	--color-accent-text: var(--wp--preset--color--blue-600);
	--color-focus: var(--wp--preset--color--blue-600);
	--color-focus-on-dark: var(--wp--custom--color--blue-200);
	--color-disabled-bg: var(--wp--custom--color--slate-100);
	--color-success: var(--wp--custom--color--success);
	--color-error: var(--wp--custom--color--error);
	--color-warning: var(--wp--custom--color--warning);

	/* Type */
	--font-body: var(--wp--preset--font-family--body);
	--font-display: var(--wp--preset--font-family--display);
	--fs-display: var(--wp--custom--font-size--display);
	--fs-h1: var(--wp--custom--font-size--heading-one);
	--fs-h2: var(--wp--custom--font-size--heading-two);
	--fs-h3: var(--wp--custom--font-size--heading-three);
	--fs-h4: var(--wp--custom--font-size--heading-four);
	--fs-lead: var(--wp--preset--font-size--lead);
	--fs-body: var(--wp--preset--font-size--body);
	--fs-small: var(--wp--preset--font-size--small);
	--fs-caption: var(--wp--custom--font-size--caption);
	--lh-display: var(--wp--custom--line-height--display);
	--lh-h1: var(--wp--custom--line-height--heading-one);
	--lh-h2: var(--wp--custom--line-height--heading-two);
	--lh-h3: var(--wp--custom--line-height--heading-three);
	--lh-h4: var(--wp--custom--line-height--heading-four);
	--lh-lead: var(--wp--custom--line-height--lead);
	--lh-body: var(--wp--custom--line-height--body);
	--lh-small: var(--wp--custom--line-height--small);
	--lh-caption: var(--wp--custom--line-height--caption);
	--tracking-eyebrow: var(--wp--custom--letter-spacing--eyebrow);

	/* Spacing (4 px base) */
	--space-1: var(--wp--preset--spacing--1);
	--space-2: var(--wp--preset--spacing--2);
	--space-3: var(--wp--preset--spacing--3);
	--space-4: var(--wp--preset--spacing--4);
	--space-5: var(--wp--preset--spacing--5);
	--space-6: var(--wp--preset--spacing--6);
	--space-7: var(--wp--preset--spacing--7);
	--space-8: var(--wp--preset--spacing--8);
	--space-9: var(--wp--preset--spacing--9);
	--space-10: var(--wp--preset--spacing--10);
	--space-section: var(--wp--custom--layout--section);
	--gutter: var(--wp--custom--layout--gutter);

	/* Containers */
	--container: var(--wp--custom--layout--container);
	--container-wide: var(--wp--custom--layout--container-wide);
	--container-narrow: var(--wp--custom--layout--container-narrow);
	--measure: var(--wp--custom--layout--measure);

	/* Shape and elevation */
	--radius-xs: var(--wp--custom--radius--xs);
	--radius-sm: var(--wp--custom--radius--sm);
	--radius-md: var(--wp--custom--radius--md);
	--radius-lg: var(--wp--custom--radius--lg);
	--radius-xl: var(--wp--custom--radius--xl);
	--radius-pill: var(--wp--custom--radius--pill);
	--border-hairline: 1px solid var(--color-line);
	--shadow-hairline-bottom: inset 0 -1px 0 var(--color-line);
	--shadow-sm: var(--wp--custom--shadow--sm);
	--shadow-md: var(--wp--custom--shadow--md);
	--shadow-lg: var(--wp--custom--shadow--lg);

	/* Layers */
	--z-base: var(--wp--custom--z--base);
	--z-sticky: var(--wp--custom--z--sticky);
	--z-dropdown: var(--wp--custom--z--dropdown);
	--z-float: var(--wp--custom--z--float);
	--z-overlay: var(--wp--custom--z--overlay);
	--z-modal: var(--wp--custom--z--modal);
	--z-skip: var(--wp--custom--z--skip);

	/* Component sizes */
	--size-control-sm: var(--wp--custom--size--control-sm);
	--size-control-md: var(--wp--custom--size--control-md);
	--size-control-lg: var(--wp--custom--size--control-lg);
	--size-icon-button: var(--wp--custom--size--icon-button);
	--size-logo: var(--wp--custom--size--logo);
	--size-chip: var(--wp--custom--size--chip);
	--size-check: var(--wp--custom--size--check);
	--size-textarea-min: var(--wp--custom--size--textarea-min);
	--dropdown-min: var(--wp--custom--size--dropdown-min);
	--float-height: var(--wp--custom--size--float-height);
	--float-circle: var(--wp--custom--size--float-circle);
	--bar-h: var(--wp--custom--size--bar);
	--header-h: var(--wp--custom--size--header-mobile);

	/* Motion */
	--dur-fast: var(--wp--custom--motion--dur-fast);
	--dur-base: var(--wp--custom--motion--dur-base);
	--dur-slow: var(--wp--custom--motion--dur-slow);
	--ease-out: var(--wp--custom--motion--ease-out);
	--ease-in-out: var(--wp--custom--motion--ease-in-out);

	/* Focus ring (docs/DESIGN_SYSTEM.md section 10): 2 px, 2 px offset, colour changes on dark surfaces */
	--focus-ring-width: 2px;
	--focus-ring-offset: 2px;
}

/* The header is taller on desktop, where the navigation is a bar. */
@media (min-width: 64em) {
	:root {
		--header-h: var(--wp--custom--size--header-desktop);
	}
}

/* Reduced motion: every transition and animation reads these durations, so switching them to zero
   turns motion off everywhere without !important. */
@media (prefers-reduced-motion: reduce) {
	:root {
		--dur-fast: 0s;
		--dur-base: 0s;
		--dur-slow: 0s;
	}
}

/*
 * Stand-ins for the display font while it loads (spike S-4, docs/DESIGN_SYSTEM.md section 3.2). The display stack of
 * theme.json lists them after "Playfair Display": each is a system serif re-sized to the display font's width, with
 * its ascent, descent and line gap, so the swap moves nothing. A browser skips a face whose local() fonts it does not
 * have. Written by tools/font-fallback-metrics.py; run it again whenever the font file changes.
 */
@font-face {
	font-family: "Nayumi Fallback Georgia";
	src: local("Georgia"), local("Gelasio"), local("Gelasio Regular"), local("Gelasio-Regular");
	size-adjust: 101.32%;
	ascent-override: 106.79%;
	descent-override: 24.77%;
	line-gap-override: 0.00%;
}

@font-face {
	font-family: "Nayumi Fallback Noto Serif";
	src: local("Noto Serif"), local("Noto Serif Regular"), local("NotoSerif-Regular");
	size-adjust: 93.91%;
	ascent-override: 115.22%;
	descent-override: 26.73%;
	line-gap-override: 0.00%;
}

@font-face {
	font-family: "Nayumi Fallback Times";
	src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Liberation Serif"), local("LiberationSerif"), local("Tinos"), local("Tinos-Regular");
	size-adjust: 111.19%;
	ascent-override: 97.31%;
	descent-override: 22.57%;
	line-gap-override: 0.00%;
}