/*
 * Design tokens — sourced from /design-reference.html (Phase 1 design
 * system). This supersedes the colour/type/spacing specifics in
 * .claude/CLAUDE.md §5; CLAUDE.md's architecture, IA and content rules are
 * still authoritative. Variable NAMES are kept stable across the codebase
 * on purpose — every other stylesheet reads these by name, so retargeting
 * the whole site to a new palette/scale is a values-only change here.
 */
:root {
	--ink: #141418;
	--ink-deep: #0E0E11;
	--ink-soft: #1B1B20;
	--paper: #FFFFFF;
	--paper-soft: #F4F3F5;

	--accent: #EE4C7C;
	--accent-light: #FF8FB1;
	/* #D93F6C measured 4.31:1 for white .btn--primary:hover text — below the
	   4.5:1 body-text AA minimum. Darkened along the same hue to 4.63:1. */
	--accent-hover: #D23A66;
	--accent-deep: #C7345E;

	--line-light: #E4E2E6;
	--line-dark: #2E2E36;

	--text-body-light: #5C5862;
	--text-body-dark: #B8B4BF;
	/* #7E7A83 measured 4.20:1 on --paper and 3.80:1 on --paper-soft — both
	   below the 4.5:1 AA minimum for the small/meta text this token is used
	   for (case-study meta, breadcrumbs, footer, glance labels, etc.).
	   Darkened to pass 4.5:1 against both light backgrounds (5.48 / 4.95). */
	--muted-light: #6D6772;
	--muted-dark: #96929D;

	/* "… Fallback" faces are metric-matched local Arial (fonts.css, #053). */
	--font-display: "Space Grotesk", "Space Grotesk Fallback", "Helvetica Neue", Arial, sans-serif;
	--font-body: "Karla", "Karla Fallback", "Helvetica Neue", Arial, sans-serif;
	--font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

	--fs-h1: clamp(2.5rem, 1.85rem + 3vw, 4.5rem);
	--fs-h1-l2: clamp(2.25rem, 1.7rem + 2.5vw, 3.75rem);
	--fs-h2: clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem);
	--fs-h3: clamp(1.3125rem, 1.15rem + 0.7vw, 1.5625rem);
	--fs-lead: 1.1875rem;
	--fs-body: 1.0625rem;
	--fs-body-sm: 1rem;
	--fs-interface: 0.6875rem;
	--fs-eyebrow: 0.6875rem;

	--lh-display: 1.05;
	--lh-body: 1.7;
	--tracking-h1: -0.04em;
	--tracking-h2: -0.035em;
	--tracking-h3: -0.025em;
	--tracking-eyebrow: 0.2em;

	--measure: 62ch;

	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;
	--space-9: 88px;
	--space-10: 96px;
	--space-11: 128px;

	--container-max: 1440px;
	--gutter: 48px;
	--margin-desktop: 48px;
	--margin-tablet: 32px;
	--margin-mobile: 20px;

	--section-pad-light: 88px;
	--section-pad-dark: 96px;

	--card-gap: 24px;
	--card-pad: 32px 34px;

	--radius-card: 16px;
	--radius-inset: 12px;
	--radius-pill: 100px;
	--radius-sm: 10px;

	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--dur-fast: 140ms;
	--dur-base: 200ms;
	--dur-slow: 360ms;
	--dur-menu: 160ms;
	--menu-delay: 120ms;

	/*
	 * Back-compat aliases — earlier module stylesheets (l1-modules.css,
	 * modules-l2.css, product-l2.css, rich-text.css, single-templates.css)
	 * were authored against the old token names. Re-pointing those names
	 * here means every one of those files inherits the new palette/scale
	 * automatically. New CSS should use the canonical names above, not these.
	 */
	--fs-display-1: var(--fs-h1);
	--fs-display-2: var(--fs-h1-l2);
	--fs-display-3: var(--fs-h2);
	--fs-display-4: clamp(1.75rem, 1.35rem + 1.8vw, 2.875rem);
	--fs-display-5: var(--fs-h3);
	--fs-display-6: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
	--fs-small: 0.9375rem;
	--fs-body-lg: var(--fs-lead);
	--radius-lg: var(--radius-card);
	--radius-md: var(--radius-inset);
	--tracking-display: var(--tracking-h1);
	--tracking-interface: var(--tracking-eyebrow);
	--section-pad: var(--section-pad-light);
	--container-wide: var(--container-max);
}

@media (max-width: 1023px) {
	:root {
		--gutter: 32px;
		--margin-desktop: 32px;
	}
}

@media (max-width: 767px) {
	:root {
		--gutter: 20px;
		--margin-desktop: 20px;
		--section-pad-light: 56px;
		--section-pad-dark: 64px;
	}
}