/*
 * Design tokens — derived from DESIGN-META.md (Meta commerce system).
 * Cobalt is repurposed for primary CTAs; black pills carry nav.
 */
:root {
	/* Brand & accent */
	--color-primary: #0064e0;
	--color-primary-deep: #0457cb;
	--color-on-primary: #ffffff;
	--color-ink-button: #000000;
	--color-on-ink-button: #ffffff;
	--color-success: #31a24c;
	--color-warning: #f7b928;
	--color-critical: #e41e3f;

	/* Surface */
	--color-canvas: #ffffff;
	--color-surface-soft: #f1f4f7;
	--color-ink-deep: #0a1317;
	--color-ink: #1c1e21;
	--color-charcoal: #444950;
	--color-slate: #4b4c4f;
	--color-steel: #5d6c7b;
	--color-stone: #8595a4;
	--color-hairline: #ced0d4;
	--color-hairline-soft: #dee3e9;

	/* Type */
	--font-display: "Hanken Grotesk", "Optimistic VF", "Montserrat", Helvetica, Arial, sans-serif;
	--font-body: "Hanken Grotesk", "Optimistic VF", Helvetica, Arial, sans-serif;

	--text-hero: clamp(2.25rem, 1.4rem + 3.8vw, 4rem);   /* up to 64px */
	--text-display: clamp(1.9rem, 1.3rem + 2.6vw, 3rem); /* up to 48px */
	--text-h2: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem);   /* up to 36px */
	--text-h3: 1.5rem;                                   /* 24px */
	--text-subtitle: 1.125rem;                           /* 18px */
	--text-body: 1rem;                                   /* 16px */
	--text-sm: 0.875rem;                                 /* 14px */
	--text-caption: 0.75rem;                             /* 12px */

	/* Radius */
	--r-lg: 8px;
	--r-xl: 16px;
	--r-xxl: 24px;
	--r-xxxl: 32px;
	--r-full: 100px;

	/* Spacing */
	--s-xs: 8px;
	--s-sm: 10px;
	--s-md: 12px;
	--s-base: 16px;
	--s-lg: 20px;
	--s-xl: 24px;
	--s-xxl: 32px;
	--s-xxxl: 40px;
	--s-section: 64px;
	--s-section-lg: 80px;

	/* Layout */
	--container: 1280px;
	--container-narrow: 760px;
	--header-h: 64px;

	/* Motion */
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--dur: 200ms;

	/* Elevation */
	--shadow-1: rgba(20, 22, 26, 0.16) 0px 1px 4px 0px;
	--shadow-2: rgba(20, 22, 26, 0.22) 0px 8px 28px -8px;
}