/**
 * Tokens: short aliases for the theme.json presets,
 * colour shades, and the light and dark scheme colours.
 */
@layer tokens {
	:root {
		color-scheme: light dark;

		/* Brand colours (set in theme.json). A site lists only the colours it
		   uses in its own theme.json, and its palette then replaces Base's
		   whole palette. So every colour has a fallback: secondary, tertiary
		   and accent use primary, and the rest use Base's own values. */
		--primary: var(--wp--preset--color--primary, #1e5aa8);
		--secondary: var(--wp--preset--color--secondary, var(--primary));
		--tertiary: var(--wp--preset--color--tertiary, var(--primary));
		--accent: var(--wp--preset--color--accent, var(--primary));
		--base: var(--wp--preset--color--base, #1f2937);
		--neutral: var(--wp--preset--color--neutral, #6b7280);
		--white: var(--wp--preset--color--white, #ffffff);
		--black: var(--wp--preset--color--black, #000000);

		/* Primary shades: l-1 and d-1 sit closest to the base colour */
		--primary-l-1: color-mix(in oklch, var(--primary), white 15%);
		--primary-l-2: color-mix(in oklch, var(--primary), white 35%);
		--primary-l-3: color-mix(in oklch, var(--primary), white 55%);
		--primary-l-4: color-mix(in oklch, var(--primary), white 75%);
		--primary-l-5: color-mix(in oklch, var(--primary), white 90%);
		--primary-d-1: color-mix(in oklch, var(--primary), black 15%);
		--primary-d-2: color-mix(in oklch, var(--primary), black 30%);
		--primary-d-3: color-mix(in oklch, var(--primary), black 45%);
		--primary-d-4: color-mix(in oklch, var(--primary), black 60%);
		--primary-d-5: color-mix(in oklch, var(--primary), black 75%);
		--primary-hover: var(--primary-d-1);

		/* Secondary shades: l-1 and d-1 sit closest to the base colour */
		--secondary-l-1: color-mix(in oklch, var(--secondary), white 15%);
		--secondary-l-2: color-mix(in oklch, var(--secondary), white 35%);
		--secondary-l-3: color-mix(in oklch, var(--secondary), white 55%);
		--secondary-l-4: color-mix(in oklch, var(--secondary), white 75%);
		--secondary-l-5: color-mix(in oklch, var(--secondary), white 90%);
		--secondary-d-1: color-mix(in oklch, var(--secondary), black 15%);
		--secondary-d-2: color-mix(in oklch, var(--secondary), black 30%);
		--secondary-d-3: color-mix(in oklch, var(--secondary), black 45%);
		--secondary-d-4: color-mix(in oklch, var(--secondary), black 60%);
		--secondary-d-5: color-mix(in oklch, var(--secondary), black 75%);
		--secondary-hover: var(--secondary-d-1);

		/* Tertiary shades: l-1 and d-1 sit closest to the base colour */
		--tertiary-l-1: color-mix(in oklch, var(--tertiary), white 15%);
		--tertiary-l-2: color-mix(in oklch, var(--tertiary), white 35%);
		--tertiary-l-3: color-mix(in oklch, var(--tertiary), white 55%);
		--tertiary-l-4: color-mix(in oklch, var(--tertiary), white 75%);
		--tertiary-l-5: color-mix(in oklch, var(--tertiary), white 90%);
		--tertiary-d-1: color-mix(in oklch, var(--tertiary), black 15%);
		--tertiary-d-2: color-mix(in oklch, var(--tertiary), black 30%);
		--tertiary-d-3: color-mix(in oklch, var(--tertiary), black 45%);
		--tertiary-d-4: color-mix(in oklch, var(--tertiary), black 60%);
		--tertiary-d-5: color-mix(in oklch, var(--tertiary), black 75%);
		--tertiary-hover: var(--tertiary-d-1);

		/* Accent shades: l-1 and d-1 sit closest to the base colour */
		--accent-l-1: color-mix(in oklch, var(--accent), white 15%);
		--accent-l-2: color-mix(in oklch, var(--accent), white 35%);
		--accent-l-3: color-mix(in oklch, var(--accent), white 55%);
		--accent-l-4: color-mix(in oklch, var(--accent), white 75%);
		--accent-l-5: color-mix(in oklch, var(--accent), white 90%);
		--accent-d-1: color-mix(in oklch, var(--accent), black 15%);
		--accent-d-2: color-mix(in oklch, var(--accent), black 30%);
		--accent-d-3: color-mix(in oklch, var(--accent), black 45%);
		--accent-d-4: color-mix(in oklch, var(--accent), black 60%);
		--accent-d-5: color-mix(in oklch, var(--accent), black 75%);
		--accent-hover: var(--accent-d-1);

		/* Base shades: l-1 and d-1 sit closest to the base colour */
		--base-l-1: color-mix(in oklch, var(--base), white 15%);
		--base-l-2: color-mix(in oklch, var(--base), white 35%);
		--base-l-3: color-mix(in oklch, var(--base), white 55%);
		--base-l-4: color-mix(in oklch, var(--base), white 75%);
		--base-l-5: color-mix(in oklch, var(--base), white 90%);
		--base-d-1: color-mix(in oklch, var(--base), black 15%);
		--base-d-2: color-mix(in oklch, var(--base), black 30%);
		--base-d-3: color-mix(in oklch, var(--base), black 45%);
		--base-d-4: color-mix(in oklch, var(--base), black 60%);
		--base-d-5: color-mix(in oklch, var(--base), black 75%);
		--base-hover: var(--base-d-1);

		/* Neutral shades: l-1 and d-1 sit closest to the base colour */
		--neutral-l-1: color-mix(in oklch, var(--neutral), white 15%);
		--neutral-l-2: color-mix(in oklch, var(--neutral), white 35%);
		--neutral-l-3: color-mix(in oklch, var(--neutral), white 55%);
		--neutral-l-4: color-mix(in oklch, var(--neutral), white 75%);
		--neutral-l-5: color-mix(in oklch, var(--neutral), white 90%);
		--neutral-d-1: color-mix(in oklch, var(--neutral), black 15%);
		--neutral-d-2: color-mix(in oklch, var(--neutral), black 30%);
		--neutral-d-3: color-mix(in oklch, var(--neutral), black 45%);
		--neutral-d-4: color-mix(in oklch, var(--neutral), black 60%);
		--neutral-d-5: color-mix(in oklch, var(--neutral), black 75%);
		--neutral-hover: var(--neutral-d-1);

		/* Text colours (fixed, for use on known backgrounds) */
		--text-dark: var(--base);
		--text-dark-muted: var(--neutral-d-2);
		--text-light: var(--white);
		--text-light-muted: var(--neutral-l-3);

		/* Optional off-whites for the light scheme. A concept often wants a
		   neutral page colour (a "paper" or "stone") that no shade of a tinted
		   brand colour can make. Set these here in a build; leave them unset
		   to use white and neutral-l-5. */
		/* --bg-light: #fafaf9; */
		/* --bg-light-alt: #f2f3f1; */

		/* Scheme colours: these flip between light and dark */
		--bg-body: light-dark(var(--bg-light, var(--white)), var(--base-d-4));
		--bg-surface: light-dark(var(--base-l-5), var(--base-d-3));
		--bg-surface-alt: light-dark(var(--bg-light-alt, var(--neutral-l-5)), var(--base-d-2));
		--bg-brand: var(--primary-d-3); /* the Brand section style; always a dark shade, so its text stays light */
		--text-color: light-dark(var(--text-dark), var(--base-l-5));
		--text-muted: light-dark(var(--text-dark-muted), var(--neutral-l-3));
		--heading-color: light-dark(var(--base-d-2), var(--white));
		--link-color: light-dark(var(--primary), var(--primary-l-3));
		--link-color-hover: light-dark(var(--primary-d-2), var(--primary-l-4));
		--border-color: light-dark(var(--neutral-l-4), var(--base-l-1));
		--border-color-strong: light-dark(var(--neutral-l-2), var(--base-l-2)); /* form fields, pills and dividers that need to show */

		/* Status colours, for form messages and notices. Fixed hues, not the
		   brand: an error should read as an error on any site. Each passes
		   4.5:1 as text on the light and dark page and surface colours
		   (measured 4 November 2026). The -bg colours are soft panels for a
		   notice; the status colour reads as text on them. */
		--success: light-dark(#1d7a46, #5fd38d);
		--warning: light-dark(#8a5300, #f2c14e);
		--error: light-dark(#b42318, #ff8a7a);
		--info: light-dark(#1d5fa8, #86b8f0);
		--success-bg: light-dark(#e9f6ee, color-mix(in oklch, #5fd38d 14%, transparent));
		--warning-bg: light-dark(#fdf3e1, color-mix(in oklch, #f2c14e 14%, transparent));
		--error-bg: light-dark(#fdecea, color-mix(in oklch, #ff8a7a 14%, transparent));
		--info-bg: light-dark(#e8f0fb, color-mix(in oklch, #86b8f0 14%, transparent));

		/* Typography */
		--font-body: var(--wp--preset--font-family--body);
		--font-heading: var(--wp--preset--font-family--heading);
		--text-xs: var(--wp--preset--font-size--xs);
		--text-s: var(--wp--preset--font-size--s);
		--text-m: var(--wp--preset--font-size--m);
		--text-l: var(--wp--preset--font-size--l);
		--text-xl: var(--wp--preset--font-size--xl);
		--text-xxl: var(--wp--preset--font-size--xxl);
		--h1: clamp(2.25rem, 1.6667rem + 2.5926vw, 4rem);
		--h2: clamp(1.875rem, 1.5000rem + 1.6667vw, 3rem);
		--h3: clamp(1.5rem, 1.2500rem + 1.1111vw, 2.25rem);
		--h4: clamp(1.25rem, 1.0833rem + 0.7407vw, 1.75rem);
		--h5: clamp(1.125rem, 1.0417rem + 0.3704vw, 1.375rem);
		--h6: clamp(1rem, 0.9583rem + 0.1852vw, 1.125rem);
		--text-m-line-height: 1.6;
		--heading-line-height: 1.2;
		--heading-weight: 700;
		--heading-tracking: normal;
		--text-m-max-width: 65ch;

		/* Spacing */
		--space-xs: var(--wp--preset--spacing--xs);
		--space-s: var(--wp--preset--spacing--s);
		--space-m: var(--wp--preset--spacing--m);
		--space-l: var(--wp--preset--spacing--l);
		--space-xl: var(--wp--preset--spacing--xl);
		--space-xxl: var(--wp--preset--spacing--xxl);
		--section-space-xs: clamp(2rem, 1.6667rem + 1.4815vw, 3rem);
		--section-space-s: clamp(3rem, 2.5000rem + 2.2222vw, 4.5rem);
		--section-space-m: clamp(4rem, 3.3333rem + 2.9630vw, 6rem);
		--section-space-l: clamp(5rem, 4.0000rem + 4.4444vw, 8rem);
		--section-space-xl: clamp(6rem, 4.6667rem + 5.9259vw, 10rem);
		--section-space-xxl: clamp(8rem, 6.6667rem + 5.9259vw, 12rem);

		/* Layout */
		--content-width: var(--wp--style--global--content-size, 1280px);
		--wide-width: var(--wp--style--global--wide-size, 1440px);
		--gutter: var(--space-m);
		--content-gap: var(--space-m);
		--container-gap: var(--space-xl);
		--grid-gap: var(--space-m);

		/* Radius, borders, shadows, focus */
		/* The site's one corner radius. The editor's radius presets (None,
		   Standard, Pill in theme.json) point at these tokens, so a site
		   changes --radius here or in its child's site.css, and the picker,
		   the buttons and every component follow. */
		--radius: 0.5rem;
		--radius-pill: 999px;
		--radius-circle: 50%;
		--border-color-light: var(--neutral-l-4);
		--border: 1px solid var(--border-color);
		--shadow-s: var(--wp--preset--shadow--s);
		--shadow-m: var(--wp--preset--shadow--m);
		--shadow-l: var(--wp--preset--shadow--l);
		--focus-color: var(--primary);
		--focus-width: 2px;
		--focus-offset: 2px;
		--ease: cubic-bezier(0.2, 0.8, 0.2, 1); /* the standard easing for hovers and reveals */
	}

	/* Force a scheme on the whole page (html) or on one section. The classes do
	   the same job as the attribute, for use in the editor. */
	[data-scheme="light"],
	.scheme--light {
		color-scheme: light;
	}

	[data-scheme="dark"],
	.scheme--dark {
		color-scheme: dark;
	}
}