/*
 * Alias layer: the static mockups' custom-property names (--color-accent,
 * --space-16, etc. — see css/variables.css) pointed at this theme's
 * generated tokens. Exists so components.css can be reused verbatim
 * (copied unmodified from the static project) instead of hand-transcribing
 * 4500+ lines of var() references — same source of truth, far less risk
 * of a transcription error silently breaking a rule. Dark mode still
 * works correctly here since these all resolve through the already
 * dark-mode-aware --wp--custom--color--* variables set in global.css.
 */

:root {
	/* The design system's own names (docs/design-system.md) — use these in
	   new CSS. They resolve through theme.json's custom colors, so the
	   light variant (global.css) switches them all at once. */
	--ink: var( --wp--custom--color--ink );
	--surface: var( --wp--custom--color--surface );
	--surface-2: var( --wp--custom--color--surface-2 );
	--line: var( --wp--custom--color--line );
	--line-strong: var( --wp--custom--color--line-strong );
	--paper: var( --wp--custom--color--paper );
	--muted: var( --wp--custom--color--muted );
	--crimson: var( --wp--custom--color--crimson );
	--crimson-deep: var( --wp--custom--color--crimson-deep );
	--crimson-text: var( --wp--custom--color--crimson-text ); /* crimson for small text/links (4.5:1) */
	--crimson-fill: var( --wp--custom--color--crimson-fill ); /* primary button fill (paper label 5.3:1) */
	--crimson-tint: rgba( 225, 29, 60, 0.12 );
	--crimson-tint-strong: rgba( 225, 29, 60, 0.16 );
	--positive: var( --wp--custom--color--positive );
	--positive-text: var( --wp--custom--color--positive-text );
	--gold: var( --wp--custom--color--gold );
	--on-gold: #0E0F11; /* fixed: gold badges always carry dark ink, in both variants */
	--font-body: var( --wp--preset--font-family--sans );
	--font-display: var( --wp--preset--font-family--display );
	--radius-card: var( --wp--custom--radius--card );
	--radius-pill: var( --wp--custom--radius--pill );
	--radius-badge: var( --wp--custom--radius--badge );

	/* Legacy names from the static mockups, now aliases of the above. */
	--color-white: var( --wp--preset--color--base );
	--color-gray-50: var( --wp--preset--color--gray-50 );
	--color-gray-100: var( --wp--preset--color--gray-100 );
	--color-gray-200: var( --wp--preset--color--gray-200 );
	--color-gray-300: var( --wp--preset--color--gray-300 );
	--color-gray-400: var( --wp--preset--color--gray-400 );
	--color-gray-500: var( --wp--preset--color--gray-500 );
	--color-gray-600: var( --wp--preset--color--gray-600 );
	--color-gray-700: var( --wp--preset--color--gray-700 );
	--color-gray-800: var( --wp--preset--color--gray-800 );
	--color-gray-900: var( --wp--preset--color--gray-900 );
	--color-black: var( --wp--preset--color--black );
	--color-accent: var( --wp--preset--color--accent );
	--color-positive: var( --wp--custom--color--positive-text );

	--color-grass: var( --wp--custom--color--grass );
	--color-grass-alt: var( --wp--custom--color--grass-alt );
	--color-pitch-strip: var( --wp--custom--color--pitch-strip );

	--color-background: var( --wp--custom--color--background );
	--color-surface: var( --wp--custom--color--surface );
	--color-border: var( --wp--custom--color--border );
	--color-text-primary: var( --wp--custom--color--text-primary );
	--color-text-secondary: var( --wp--custom--color--text-secondary );
	--color-neutral-fill: var( --wp--custom--color--neutral-fill );

	--font-family-sans: var( --wp--preset--font-family--sans );
	--font-family-mono: var( --wp--preset--font-family--display ); /* every "number" rule → Space Grotesk */

	--font-weight-body: 400;
	--font-weight-label: 500;
	--font-weight-subheading: 600;
	--font-weight-heading: 700;

	--font-size-xs: var( --wp--preset--font-size--xs );
	--font-size-sm: var( --wp--preset--font-size--sm );
	--font-size-base: var( --wp--preset--font-size--base );
	--font-size-md: var( --wp--preset--font-size--md );
	--font-size-lg: var( --wp--preset--font-size--lg );
	--font-size-xl: var( --wp--preset--font-size--xl );
	--font-size-2xl: var( --wp--preset--font-size--2xl );
	--font-size-3xl: var( --wp--preset--font-size--3xl );
	--font-size-4xl: var( --wp--preset--font-size--4xl );
	--font-size-5xl: var( --wp--preset--font-size--5xl );

	--line-height-heading: 1.15;
	--line-height-body: 1.6;
	--line-height-dense: 1.35;

	--space-8: var( --wp--preset--spacing--spacing-8 );
	--space-16: var( --wp--preset--spacing--spacing-16 );
	--space-24: var( --wp--preset--spacing--spacing-24 );
	--space-32: var( --wp--preset--spacing--spacing-32 );
	--space-48: var( --wp--preset--spacing--spacing-48 );
	--space-64: var( --wp--preset--spacing--spacing-64 );

	--radius-sm: var( --wp--custom--radius--sm );
	--radius-md: var( --wp--custom--radius--md );
	--radius-lg: var( --wp--custom--radius--lg );
	--radius-full: var( --wp--custom--radius--full );

	--shadow-elevation: var( --wp--custom--shadow--elevation );

	/* Reference only — native CSS can't read a custom property inside an
	   @media condition, so components.css repeats these as literal px. */
	--bp-tablet: 768px;
	--bp-laptop: 1024px;
	--bp-desktop: 1440px;

	--topbar-height: var( --wp--custom--topbar-height );
	--tabbar-height: var( --wp--custom--tabbar-height );
	--sidebar-width: var( --wp--custom--sidebar-width );
	--container-laptop: var( --wp--custom--container-laptop );
	--container-desktop: var( --wp--custom--container-desktop );
}