/**
 * 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) */
		--primary: var(--wp--preset--color--primary);
		--secondary: var(--wp--preset--color--secondary);
		--tertiary: var(--wp--preset--color--tertiary);
		--accent: var(--wp--preset--color--accent);
		--base: var(--wp--preset--color--base);
		--neutral: var(--wp--preset--color--neutral);
		--white: var(--wp--preset--color--white);
		--black: var(--wp--preset--color--black);

		/* 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(--neutral-d-3);
		--text-dark-muted: var(--neutral);
		--text-light: var(--white);
		--text-light-muted: var(--tertiary);

		/* Scheme colours: these flip between light and dark */
		/* The two light backgrounds: Paper (the concept's neutral off-white) and
		   a very pale tan for alternate sections, changed from the concept's
		   grey Stone on 22 October 2026. Every shade of this palette carries a
		   blue tint, so color-mix() can't make either. */
		--bg-body: light-dark(#fafaf9, var(--base-d-2));
		--bg-surface: light-dark(var(--white), var(--base));
		--bg-surface-alt: light-dark(#f6f4ef, var(--base-d-1));
		--text-color: light-dark(var(--text-dark), var(--base-l-5));
		--text-muted: light-dark(var(--text-dark-muted), var(--tertiary));
		--heading-color: light-dark(var(--text-dark), var(--white));
		--link-color: light-dark(var(--primary), var(--secondary));
		--link-color-hover: light-dark(var(--primary-d-2), var(--tertiary));
		--border-color: light-dark(#e1e4e3, rgb(255 255 255 / 0.12));
		--border-color-strong: light-dark(var(--neutral-l-4), rgb(255 255 255 / 0.2));

		/* 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);
		/* Heading sizes from the concept's --step-1 to --step-4 */
		--h1: clamp(3.2rem, 1.2rem + 6.6vw, 7.6rem);
		--h2: clamp(2.7rem, 1.4rem + 4.4vw, 5.6rem);
		--h3: clamp(2rem, 1.4rem + 1.9vw, 2.9rem);
		--h4: clamp(1.55rem, 1.3rem + 0.8vw, 2rem);
		--h5: 1.25rem;
		--h6: 1.125rem;
		--text-m-line-height: 1.55;
		--heading-line-height: 1.04; /* 1.1 read as loose on big h2s (23 October 2026); smaller headings set their own in base.css */
		--heading-tracking: -0.02em; /* loosened from -0.035em */
		--body-weight: 300; /* Halyard Text Light: cleaner than Regular (400) for body copy, 22 October 2026 */
		--heading-weight: 500; /* Halyard Display Medium, raised from 400 on 22 October 2026. The weight must be in the Adobe Fonts kit. */
		--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-l is the concept's standard section (--section) */
		--section-space-xs: clamp(2rem, 1.6667rem + 1.4815vw, 2.6rem);
		--section-space-s: clamp(3rem, 2.5rem + 2.2222vw, 4.5rem);
		--section-space-m: clamp(4rem, 3rem + 5vw, 7rem);
		--section-space-l: clamp(6rem, 12vw, 11rem);
		--section-space-xl: clamp(7rem, 14vw, 13rem);
		--section-space-xxl: clamp(8rem, 16vw, 15rem);

		/* Layout */
		--content-width: var(--wp--style--global--content-size, 1280px);
		--wide-width: var(--wp--style--global--wide-size, 1440px);
		--gutter: clamp(1rem, 4vw, 3.5rem);
		--content-gap: var(--space-m);
		--container-gap: clamp(2rem, 6vw, 6rem);
		--grid-gap: var(--space-m);

		/* Radius, borders, shadows, focus */
		--radius: 6px;
		--radius-xs: 3px; /* added for this build: buttons, tiles, small corners */
		--radius-circle: 50%;
		--border-color-light: var(--neutral-l-4);
		--border: 1px solid var(--border-color);
		--shadow-xs: var(--wp--preset--shadow--xs); /* added 22 October 2026: a light card shadow */
		--shadow-s: var(--wp--preset--shadow--s);
		--shadow-m: var(--wp--preset--shadow--m);
		--shadow-l: var(--wp--preset--shadow--l);
		--focus-color: var(--secondary);
		--focus-width: 2px;
		--focus-offset: 3px;
		--ease: cubic-bezier(0.2, 0.8, 0.2, 1);
	}

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