/* =============================================================================
 * tokens.css · single source of truth for design tokens (variables)
 * ─────────────────────────────────────────────────────────────────────────────
 * This file owns:
 *   1. Colour tokens - dark (default) + light, shadcn-compatible
 *   2. System-driven theme preference fallback
 *   3. Typography - font families, size scale, line-heights, tracking
 *   4. Spacing scale (4px base)
 *   5. Radius scale
 *   6. Border widths
 *   7. Semantic focus rings
 *   8. Z-index layers
 *   9. Breakpoints (mirrored in foundations/breakpoints.ts)
 *  10. Container widths
 *  11. Motion - durations & easings
 *  12. Component spacing aliases (--ml-*)
 * ========================================================================== */

@custom-variant dark (&:is(.dark, [data-theme="dark"], .dark *, [data-theme="dark"] *));

/* =============================================================================
 * 1. COLOUR · DARK (default)
 * ========================================================================== */
:root,
.dark,
[data-theme="dark"] {
	/* ─── macOS window chrome ─── */
	--mac-red: #ff5f57;
	--mac-amber: #ffbd2e;
	--mac-green: #28c840;

	/* ─── shadcn-paired surfaces (keep your DropdownMenu et al. working) ─── */
	--background: oklch(0.145 0 0);
	--foreground: oklch(0.985 0 0);

	--card: oklch(0.205 0 0);
	--card-foreground: oklch(0.985 0 0);

	--popover: oklch(0.205 0 0);
	--popover-foreground: oklch(0.985 0 0);

	--primary: oklch(0.985 0 0);
	--primary-foreground: oklch(0.1 0 0);

	--secondary: oklch(0.22 0 0);
	--secondary-foreground: oklch(0.985 0 0);

	--muted: oklch(0.22 0 0);
	--muted-foreground: oklch(0.62 0 0);

	--accent: oklch(0.78 0.09 60);
	--accent-foreground: oklch(0.1 0 0);

	--destructive: oklch(0.704 0.191 22);
	--destructive-foreground: oklch(0.985 0 0);

	--border: rgba(255, 255, 255, 0.1);
	--input: rgba(255, 255, 255, 0.15);
	--ring: oklch(0.556 0 0);

	--radius: 0.625rem;

	/* ─── extended palette ─── */
	--accent-soft: oklch(0.78 0.09 60 / 0.14);
	--border-strong: rgba(255, 255, 255, 0.18);

	/* ─── semantic: live / stable state ─── */
	--ml-color-live: oklch(0.68 0.15 162);
	--ml-color-live-soft: oklch(0.68 0.15 162 / 0.1);
	--ml-color-live-border: oklch(0.68 0.15 162 / 0.18);

	/* Surface ladder (deeper than --card for nesting) */
	--surface: oklch(0.18 0 0);
	--surface-2: oklch(0.17 0 0);
	--surface-3: oklch(0.16 0 0);
	--surface-primary: var(--primary);
	--button: oklch(0.22 0 0);
	--button-hover: oklch(0.27 0 0);
	--code: oklch(0.12 0 0);

	/* Text ladder */
	--text: oklch(0.985 0 0);
	--text-primary: var(--text);
	--text-primary-foreground: var(--primary-foreground);
	--text-secondary: oklch(0.87 0 0);
	--text-muted: oklch(0.62 0 0);
	--text-body: oklch(0.91 0 0);
	--code-text: oklch(0.86 0 0);

	--btn-primary-hover: oklch(0.92 0 0);
	--navbar-bg: rgba(20, 20, 20, 0.85);
	--pill-bg: rgba(10, 10, 10, 0.7);

	/* Image placeholders */
	--placeholder-bg: oklch(0.27 0 0);
	--placeholder-stripe: oklch(0.3 0 0);
	--placeholder-text: oklch(0.65 0 0);
	--placeholder-fade: oklch(0.16 0 0);

	/* Avatar + portrait gradients */
	--avatar-from: oklch(0.4 0 0);
	--avatar-to: oklch(0.62 0 0);
	--portrait-from: oklch(0.32 0 0);
	--portrait-to: oklch(0.18 0 0);
	--portrait-stripe: oklch(0.36 0 0);

	/* Syntax highlighting */
	--code-comment: oklch(0.62 0 0);
	--code-keyword: oklch(0.72 0.16 305);
	--code-ident: oklch(0.85 0.11 215);
	--code-string: oklch(0.82 0.12 70);
	--code-number: oklch(0.78 0.14 30);

	/* Semantic - tip / warn / info */
	--callout-tip-text: oklch(0.85 0.13 150);
	--callout-tip-accent: oklch(0.72 0.15 150);
	--callout-warn-text: oklch(0.85 0.13 80);
	--callout-warn-accent: oklch(0.7 0.16 80);
	--callout-info-text: oklch(0.82 0.12 230);
	--callout-info-accent: oklch(0.65 0.16 230);

	/* Shadow scale (depth) */
	--ml-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
	--ml-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.25);
	--ml-shadow-md: 0 8px 20px rgba(0, 0, 0, 0.3);
	--ml-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.35);
	--ml-shadow-xl: 0 28px 64px rgba(0, 0, 0, 0.42);

	/* Charts */
	--chart-1: oklch(0.488 0.243 264.376);
	--chart-2: oklch(0.696 0.17 162.48);
	--chart-3: oklch(0.769 0.188 70.08);
	--chart-4: oklch(0.627 0.265 303.9);
	--chart-5: oklch(0.645 0.246 16.439);

	/* Sidebar (shadcn) */
	--sidebar: oklch(0.205 0 0);
	--sidebar-foreground: oklch(0.985 0 0);
	--sidebar-primary: oklch(0.488 0.243 264.376);
	--sidebar-primary-foreground: oklch(0.985 0 0);
	--sidebar-accent: oklch(0.269 0 0);
	--sidebar-accent-foreground: oklch(0.985 0 0);
	--sidebar-border: rgba(255, 255, 255, 0.1);
	--sidebar-ring: oklch(0.556 0 0);

	color-scheme: dark;
}

/* =============================================================================
 * 2. COLOUR · LIGHT
 * ========================================================================== */
.light,
[data-theme="light"] {
	--background: oklch(0.98 0.005 80);
	--foreground: oklch(0.18 0 0);

	--card: oklch(1 0 0);
	--card-foreground: oklch(0.18 0 0);

	--popover: oklch(1 0 0);
	--popover-foreground: oklch(0.18 0 0);

	--primary: oklch(0.18 0 0);
	--primary-foreground: oklch(1 0 0);

	--secondary: oklch(0.96 0 0);
	--secondary-foreground: oklch(0.18 0 0);

	--muted: oklch(0.96 0 0);
	--muted-foreground: oklch(0.5 0 0);

	--accent: oklch(0.52 0.13 40);
	--accent-foreground: oklch(1 0 0);

	--destructive: oklch(0.55 0.19 22);
	--destructive-foreground: oklch(1 0 0);

	--border: rgba(10, 10, 10, 0.08);
	--input: rgba(10, 10, 10, 0.15);
	--ring: oklch(0.65 0 0);

	--accent-soft: oklch(0.55 0.13 40 / 0.1);
	--border-strong: rgba(10, 10, 10, 0.18);

	/* ─── semantic: live / stable state ─── */
	--ml-color-live: oklch(0.5 0.14 162);
	--ml-color-live-soft: oklch(0.5 0.14 162 / 0.08);
	--ml-color-live-border: oklch(0.5 0.14 162 / 0.15);

	--surface: oklch(1 0 0);
	--surface-2: oklch(0.975 0.003 80);
	--surface-3: oklch(0.955 0.004 80);
	--button: oklch(0.96 0 0);
	--button-hover: oklch(0.92 0 0);
	--code: oklch(0.96 0 0);

	--text: oklch(0.18 0 0);
	--text-primary: var(--text);
	--text-primary-foreground: var(--primary-foreground);
	--text-secondary: oklch(0.32 0 0);
	--text-muted: oklch(0.5 0 0);
	--text-body: oklch(0.22 0 0);
	--code-text: oklch(0.28 0 0);

	--btn-primary-hover: oklch(0.28 0 0);
	--navbar-bg: rgba(255, 255, 255, 0.85);
	--pill-bg: rgba(255, 255, 255, 0.85);

	--placeholder-bg: oklch(0.92 0 0);
	--placeholder-stripe: oklch(0.88 0 0);
	--placeholder-text: oklch(0.38 0 0);
	--placeholder-fade: oklch(0.94 0 0);

	--avatar-from: oklch(0.78 0 0);
	--avatar-to: oklch(0.88 0 0);
	--portrait-from: oklch(0.88 0 0);
	--portrait-to: oklch(0.96 0 0);
	--portrait-stripe: oklch(0.82 0 0);

	--code-comment: oklch(0.5 0 0);
	--code-keyword: oklch(0.45 0.18 305);
	--code-ident: oklch(0.45 0.15 215);
	--code-string: oklch(0.5 0.14 70);
	--code-number: oklch(0.5 0.16 30);

	--callout-tip-text: oklch(0.4 0.13 150);
	--callout-tip-accent: oklch(0.55 0.14 150);
	--callout-warn-text: oklch(0.4 0.13 80);
	--callout-warn-accent: oklch(0.55 0.14 80);
	--callout-info-text: oklch(0.4 0.13 230);
	--callout-info-accent: oklch(0.5 0.16 230);

	--ml-shadow-xs: 0 1px 2px rgba(20, 15, 10, 0.05);
	--ml-shadow-sm: 0 2px 6px rgba(20, 15, 10, 0.07);
	--ml-shadow-md: 0 8px 20px rgba(20, 15, 10, 0.08);
	--ml-shadow-lg: 0 16px 40px rgba(20, 15, 10, 0.1);
	--ml-shadow-xl: 0 28px 64px rgba(20, 15, 10, 0.12);

	--sidebar: oklch(0.98 0.005 80);
	--sidebar-foreground: oklch(0.18 0 0);
	--sidebar-primary: oklch(0.205 0 0);
	--sidebar-primary-foreground: oklch(1 0 0);
	--sidebar-accent: oklch(0.95 0 0);
	--sidebar-accent-foreground: oklch(0.18 0 0);
	--sidebar-border: rgba(10, 10, 10, 0.1);
	--sidebar-ring: oklch(0.65 0 0);

	color-scheme: light;
}

/* =============================================================================
 * 3. SYSTEM-DRIVEN THEME (only when no explicit data-theme/class is set)
 * ========================================================================== */
@media (prefers-color-scheme: light) {
	:root:not([data-theme]):not(.dark):not(.light) {
		/* Keep this declaration set identical to the explicit light theme. */
		--background: oklch(0.98 0.005 80);
		--foreground: oklch(0.18 0 0);

		--card: oklch(1 0 0);
		--card-foreground: oklch(0.18 0 0);

		--popover: oklch(1 0 0);
		--popover-foreground: oklch(0.18 0 0);

		--primary: oklch(0.18 0 0);
		--primary-foreground: oklch(1 0 0);

		--secondary: oklch(0.96 0 0);
		--secondary-foreground: oklch(0.18 0 0);

		--muted: oklch(0.96 0 0);
		--muted-foreground: oklch(0.5 0 0);

		--accent: oklch(0.52 0.13 40);
		--accent-foreground: oklch(1 0 0);

		--destructive: oklch(0.55 0.19 22);
		--destructive-foreground: oklch(1 0 0);

		--border: rgba(10, 10, 10, 0.08);
		--input: rgba(10, 10, 10, 0.15);
		--ring: oklch(0.65 0 0);

		--accent-soft: oklch(0.55 0.13 40 / 0.1);
		--border-strong: rgba(10, 10, 10, 0.18);

		--ml-color-live: oklch(0.5 0.14 162);
		--ml-color-live-soft: oklch(0.5 0.14 162 / 0.08);
		--ml-color-live-border: oklch(0.5 0.14 162 / 0.15);

		--surface: oklch(1 0 0);
		--surface-2: oklch(0.975 0.003 80);
		--surface-3: oklch(0.955 0.004 80);
		--button: oklch(0.96 0 0);
		--button-hover: oklch(0.92 0 0);
		--code: oklch(0.96 0 0);

		--text: oklch(0.18 0 0);
		--text-primary: var(--text);
		--text-primary-foreground: var(--primary-foreground);
		--text-secondary: oklch(0.32 0 0);
		--text-muted: oklch(0.5 0 0);
		--text-body: oklch(0.22 0 0);
		--code-text: oklch(0.28 0 0);
		--btn-primary-hover: oklch(0.28 0 0);
		--navbar-bg: rgba(255, 255, 255, 0.85);
		--pill-bg: rgba(255, 255, 255, 0.85);
		--placeholder-bg: oklch(0.92 0 0);
		--placeholder-stripe: oklch(0.88 0 0);
		--placeholder-text: oklch(0.38 0 0);
		--placeholder-fade: oklch(0.94 0 0);

		--avatar-from: oklch(0.78 0 0);
		--avatar-to: oklch(0.88 0 0);
		--portrait-from: oklch(0.88 0 0);
		--portrait-to: oklch(0.96 0 0);
		--portrait-stripe: oklch(0.82 0 0);

		--code-comment: oklch(0.5 0 0);
		--code-keyword: oklch(0.45 0.18 305);
		--code-ident: oklch(0.45 0.15 215);
		--code-string: oklch(0.5 0.14 70);
		--code-number: oklch(0.5 0.16 30);

		--callout-tip-text: oklch(0.4 0.13 150);
		--callout-tip-accent: oklch(0.55 0.14 150);
		--callout-warn-text: oklch(0.4 0.13 80);
		--callout-warn-accent: oklch(0.55 0.14 80);
		--callout-info-text: oklch(0.4 0.13 230);
		--callout-info-accent: oklch(0.5 0.16 230);

		--ml-shadow-xs: 0 1px 2px rgba(20, 15, 10, 0.05);
		--ml-shadow-sm: 0 2px 6px rgba(20, 15, 10, 0.07);
		--ml-shadow-md: 0 8px 20px rgba(20, 15, 10, 0.08);
		--ml-shadow-lg: 0 16px 40px rgba(20, 15, 10, 0.1);
		--ml-shadow-xl: 0 28px 64px rgba(20, 15, 10, 0.12);

		--sidebar: oklch(0.98 0.005 80);
		--sidebar-foreground: oklch(0.18 0 0);
		--sidebar-primary: oklch(0.205 0 0);
		--sidebar-primary-foreground: oklch(1 0 0);
		--sidebar-accent: oklch(0.95 0 0);
		--sidebar-accent-foreground: oklch(0.18 0 0);
		--sidebar-border: rgba(10, 10, 10, 0.1);
		--sidebar-ring: oklch(0.65 0 0);

		color-scheme: light;
	}
}

/* =============================================================================
 * 4. NON-COLOUR TOKENS - applied everywhere, regardless of theme
 * ========================================================================== */
:root {
	/* ─── Theme-facing aliases ─── */
	--color-live: var(--ml-color-live);
	--color-live-soft: var(--ml-color-live-soft);
	--color-live-border: var(--ml-color-live-border);
	--shadow-xs: var(--ml-shadow-xs);
	--shadow-sm: var(--ml-shadow-sm);
	--shadow-md: var(--ml-shadow-md);
	--shadow-lg: var(--ml-shadow-lg);
	--shadow-xl: var(--ml-shadow-xl);

	/* ─── Typography families (wire to next/font CSS vars) ─── */
	--ml-font-sans:
		var(--font-monoline-sans, var(--font-inter-sans, "Inter")), ui-sans-serif,
		system-ui, sans-serif;
	--ml-font-mono:
		var(--font-monoline-mono, var(--font-plex-mono, "IBM Plex Mono")),
		ui-monospace, monospace;
	--ml-font-script:
		var(--font-monoline-script, var(--font-caveat-script, "Caveat")), cursive;
	--ml-font-headline:
		var(--font-monoline-headline, var(--font-manrope-headline, "Manrope")),
		var(--font-monoline-sans, var(--font-inter-sans, "Inter")), ui-sans-serif,
		system-ui, sans-serif;
	--font-sans: var(--ml-font-sans);
	--font-mono: var(--ml-font-mono);
	--font-script: var(--ml-font-script);
	--font-headline: var(--ml-font-headline);

	/* ─── Type scale (px-pinned for predictability -> rem) ─── */
	--ml-text-3xs: 0.625rem; /* eyebrow xs, badge xs */
	--ml-text-2xs: 0.6875rem; /* eyebrow sm, meta */
	--ml-text-xs: 0.75rem; /* badge md, mono small */
	--ml-text-sm: 0.875rem; /* Tailwind-compatible small text */
	--ml-text-base: 1rem; /* Tailwind-compatible body text */
	--ml-text-md: 1rem; /* role alias for lede and mobile body */
	--ml-text-lg: 1.125rem; /* Tailwind-compatible large text */
	--ml-text-xl: 1.25rem; /* card h3 */
	--ml-text-2xl: 1.5rem; /* pullquote */
	--ml-text-3xl: 1.875rem; /* H2 desktop */
	--ml-text-4xl: 2.25rem; /* H1 mobile / featured */
	--ml-text-5xl: 2.75rem; /* H1 desktop */
	--ml-text-6xl: 4rem; /* display */
	--ml-text-7xl: 5.5rem; /* page masthead */
	--text-3xs: var(--ml-text-3xs);
	--text-2xs: var(--ml-text-2xs);
	--text-xs: var(--ml-text-xs);
	--text-sm: var(--ml-text-sm);
	--text-base: var(--ml-text-base);
	--text-md: var(--ml-text-md);
	--text-lg: var(--ml-text-lg);
	--text-xl: var(--ml-text-xl);
	--text-2xl: var(--ml-text-2xl);
	--text-3xl: var(--ml-text-3xl);
	--text-4xl: var(--ml-text-4xl);
	--text-5xl: var(--ml-text-5xl);
	--text-6xl: var(--ml-text-6xl);
	--text-7xl: var(--ml-text-7xl);

	/* ─── Line heights ─── */
	--ml-leading-none: 1;
	--ml-leading-tight: 1.1;
	--ml-leading-snug: 1.25;
	--ml-leading-normal: 1.5;
	--ml-leading-relaxed: 1.65;
	--ml-leading-loose: 1.75;
	--leading-none: var(--ml-leading-none);
	--leading-tight: var(--ml-leading-tight);
	--leading-snug: var(--ml-leading-snug);
	--leading-normal: var(--ml-leading-normal);
	--leading-relaxed: var(--ml-leading-relaxed);
	--leading-loose: var(--ml-leading-loose);

	/* ─── Letter spacing ─── */
	--ml-tracking-display: -0.04em;
	--ml-tracking-heading: -0.025em;
	--ml-tracking-body: -0.005em;
	--ml-tracking-normal: 0;
	--tracking-mono: 0.04em;
	--tracking-wide: 0.08em;
	--ml-tracking-meta: 0.14em;
	--ml-tracking-eyebrow: 0.16em;
	--tracking-display: var(--ml-tracking-display);
	--tracking-heading: var(--ml-tracking-heading);
	--tracking-body: var(--ml-tracking-body);
	--tracking-normal: var(--ml-tracking-normal);
	--tracking-meta: var(--ml-tracking-meta);
	--tracking-eyebrow: var(--ml-tracking-eyebrow);

	/* ─── Typography roles ─── */
	--type-docs-title-size: 2.625rem;
	--type-docs-title-leading: 1.02;
	--type-docs-title-tracking: -0.03em;
	--type-hero-title-size: 3.625rem;
	--type-hero-title-leading: 1.02;
	--type-hero-title-tracking: -0.03em;
	--type-page-title-mobile-size: 2.4375rem;
	--type-docs-title-mobile-size: 2rem;
	--type-lede-size: var(--text-md);
	--type-lede-leading: 1.6;
	--type-subtitle-size: 1.125rem;
	--type-subtitle-tracking: -0.01em;
	--type-ui-label-size: 0.84375rem;
	--type-ui-label-leading: 1.2;

	/* ─── Spacing scale (4px base -> rem) ─── */
	--space-0: 0rem;
	--space-px: 1px;
	--space-0-5: 0.125rem;
	--space-1: 0.25rem;
	--space-1-5: 0.375rem;
	--space-2: 0.5rem;
	--space-2-5: 0.625rem;
	--space-3: 0.75rem;
	--space-3-5: 0.875rem;
	--space-4: 1rem;
	--space-5: 1.25rem;
	--space-6: 1.5rem;
	--space-7: 1.75rem;
	--space-8: 2rem;
	--space-9: 2.25rem;
	--space-10: 2.5rem;
	--space-11: 2.75rem;
	--space-12: 3rem;
	--space-14: 3.5rem;
	--space-16: 4rem;
	--space-20: 5rem;
	--space-24: 6rem;
	--space-28: 7rem;
	--space-32: 8rem;

	/* ─── Radius scale ─── */
	--radius-xs: 4px;
	--ml-radius-sm: calc(var(--radius) - 4px);
	--ml-radius-md: calc(var(--radius) - 2px);
	--ml-radius-lg: var(--radius);
	--ml-radius-xl: calc(var(--radius) + 4px);
	--ml-radius-2xl: calc(var(--radius) + 8px);
	--ml-radius-3xl: calc(var(--radius) + 12px);
	--ml-radius-pill: 999px;
	--radius-sm: var(--ml-radius-sm);
	--radius-md: var(--ml-radius-md);
	--radius-lg: var(--ml-radius-lg);
	--radius-xl: var(--ml-radius-xl);
	--radius-2xl: var(--ml-radius-2xl);
	--radius-3xl: var(--ml-radius-3xl);
	--radius-pill: var(--ml-radius-pill);

	/* ─── Border widths ─── */
	--border-thin: 1px;
	--border-medium: 2px;
	--border-thick: 4px;

	/* ─── Focus rings ─── */
	--focus-ring: 0 0 0 3px var(--accent-soft);
	--focus-ring-offset: 0 0 0 2px var(--surface);
	--focus-ring-layered: var(--focus-ring-offset), 0 0 0 4px var(--accent-soft);

	/* ─── Z-index layers ─── */
	--z-base: 0;
	--z-elevated: 10;
	--z-sticky: 20;
	--z-dropdown: 30;
	--z-overlay: 40;
	--z-modal: 50;
	--z-toast: 60;
	--z-tooltip: 70;
	--z-max: 999;

	/* ─── Breakpoints (mirror foundations/breakpoints.ts) ─── */
	--bp-mobile: 24.375rem;
	--bp-mobile-max: 47.9375rem;
	--bp-tablet: 52.125rem;
	--bp-tablet-min: 48rem;
	--bp-tablet-max: 63.9375rem;
	--bp-desktop: 80rem;
	--bp-wide: 96rem;

	/* ─── Container widths ─── */
	--container-sm: 40rem;
	--container-md: 48rem;
	--container-lg: 64rem;
	--container-xl: 76rem;
	--container-2xl: 90rem;
	--ml-container-prose: 68ch; /* article body */
	--container-prose: var(--ml-container-prose);

	/* ─── Motion: durations ─── */
	--ml-duration-instant: 0ms;
	--ml-duration-micro: 120ms; /* immediate control feedback */
	--ml-duration-fast: 140ms; /* menus and compact fades */
	--ml-duration-short: 250ms; /* state changes and indicators */
	--ml-duration-medium: 450ms; /* sheets and larger surfaces */
	--ml-duration-long: 700ms; /* deliberate entry motion */
	--ml-duration-xlong: 1200ms; /* rare large-surface transitions */
	--duration-instant: var(--ml-duration-instant);
	--duration-micro: var(--ml-duration-micro);
	--duration-fast: var(--ml-duration-fast);
	--duration-short: var(--ml-duration-short);
	--duration-medium: var(--ml-duration-medium);
	--duration-long: var(--ml-duration-long);
	--duration-xlong: var(--ml-duration-xlong);

	/* ─── Motion: easings ─── */
	--ml-ease-linear: linear;
	--ml-ease-in: cubic-bezier(0.4, 0, 1, 1);
	--ml-ease-out: cubic-bezier(0, 0, 0.2, 1);
	--ml-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
	--ml-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
	--ml-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* overshoot */
	--ml-ease-spring-soft: cubic-bezier(0.16, 1, 0.3, 1);
	--ml-ease-out-back: cubic-bezier(
		0.18,
		0.89,
		0.32,
		1.27
	); /* subtle back-ease */
	--ease-linear: var(--ml-ease-linear);
	--ease-in: var(--ml-ease-in);
	--ease-out: var(--ml-ease-out);
	--ease-in-out: var(--ml-ease-in-out);
	--ease-out-expo: var(--ml-ease-out-expo);
	--ease-spring: var(--ml-ease-spring);
	--ease-spring-soft: var(--ml-ease-spring-soft);
	--ease-out-back: var(--ml-ease-out-back);

	/* ─── Blurs (for backdrop) ─── */
	--ml-blur-sm: 4px;
	--ml-blur-md: 8px;
	--ml-blur-lg: 16px;
	--ml-blur-xl: 24px;
	--blur-sm: var(--ml-blur-sm);
	--blur-md: var(--ml-blur-md);
	--blur-lg: var(--ml-blur-lg);
	--blur-xl: var(--ml-blur-xl);

	/* ─── Component spacing aliases ─── */
	--ml-space-0: var(--space-0);
	--ml-space-px: var(--space-px);
	--ml-space-0-5: var(--space-0-5);
	--ml-space-1: var(--space-1);
	--ml-space-1-5: var(--space-1-5);
	--ml-space-2: var(--space-2);
	--ml-space-2-5: var(--space-2-5);
	--ml-space-3: var(--space-3);
	--ml-space-3-5: var(--space-3-5);
	--ml-space-4: var(--space-4);
	--ml-space-5: var(--space-5);
	--ml-space-6: var(--space-6);
	--ml-space-7: var(--space-7);
	--ml-space-8: var(--space-8);
	--ml-space-9: var(--space-9);
	--ml-space-10: var(--space-10);
	--ml-space-11: var(--space-11);
	--ml-space-12: var(--space-12);
	--ml-space-14: var(--space-14);
	--ml-space-16: var(--space-16);
	--ml-space-20: var(--space-20);
	--ml-space-24: var(--space-24);
	--ml-space-28: var(--space-28);
	--ml-space-32: var(--space-32);

	--ml-footer-y-sm: var(--space-16);
	--ml-footer-y-sm-tablet: var(--space-20);
	--ml-footer-y-sm-desktop: var(--space-16);
	--ml-footer-y-md: var(--space-20);
	--ml-footer-y-md-tablet: var(--space-24);
	--ml-footer-y-md-desktop: var(--space-20);
	--ml-footer-y-lg: var(--space-24);
	--ml-footer-y-lg-tablet: var(--space-32);
	--ml-footer-y-lg-desktop: var(--space-24);
	--ml-footer-container-max-lg: 90rem;
	--ml-footer-x-sm: var(--space-5);
	--ml-footer-x-sm-tablet: var(--space-8);
	--ml-footer-x-sm-desktop: var(--space-8);
	--ml-footer-x-md: var(--space-6);
	--ml-footer-x-md-tablet: var(--space-10);
	--ml-footer-x-md-desktop: var(--space-12);
	--ml-footer-x-lg: var(--space-8);
	--ml-footer-x-lg-tablet: var(--space-12);
	--ml-footer-x-lg-desktop: var(--space-16);
	--ml-footer-layout-gap-sm: var(--space-12);
	--ml-footer-layout-gap-sm-desktop: var(--space-16);
	--ml-footer-layout-gap-md: var(--space-16);
	--ml-footer-layout-gap-md-desktop: var(--space-20);
	--ml-footer-layout-gap-lg: var(--space-20);
	--ml-footer-layout-gap-lg-desktop: var(--space-24);
	--ml-footer-layout-cols-sm-desktop: minmax(0, 1fr) minmax(0, 1.65fr);
	--ml-footer-layout-cols-md-desktop: minmax(0, 1.1fr) minmax(0, 1.9fr);
	--ml-footer-layout-cols-lg-desktop: minmax(0, 1.15fr) minmax(0, 2fr);
	--ml-footer-intro-gap-sm: var(--space-5);
	--ml-footer-intro-gap-md: var(--space-6);
	--ml-footer-intro-gap-lg: var(--space-8);
	--ml-footer-column-gap-x-sm: var(--space-8);
	--ml-footer-column-gap-y-sm: var(--space-8);
	--ml-footer-column-gap-x-md: var(--space-12);
	--ml-footer-column-gap-y-md: var(--space-10);
	--ml-footer-column-gap-x-lg: var(--space-16);
	--ml-footer-column-gap-y-lg: var(--space-12);
	--ml-footer-meta-mt-sm: var(--space-12);
	--ml-footer-meta-pt-sm: var(--space-8);
	--ml-footer-meta-mt-md: var(--space-16);
	--ml-footer-meta-pt-md: var(--space-10);
	--ml-footer-meta-mt-lg: var(--space-20);
	--ml-footer-meta-pt-lg: var(--space-12);
	--ml-footer-status-text: var(--text-3xs);
	--ml-footer-status-text-tablet: var(--text-2xs);
	--ml-footer-status-tracking: 0.18em;
	--ml-footer-meta-text-sm: var(--text-2xs);
	--ml-footer-meta-text-md: var(--text-xs);
	--ml-footer-meta-text-lg: var(--text-sm);
	--ml-footer-local-time-tracking: var(--tracking-wide);
	--ml-footer-description-leading-sm: 1.7;
	--ml-footer-description-leading-md: var(--leading-loose);
	--ml-footer-description-leading-lg: 1.8;
	--ml-footer-intro-max-sm: 34rem;
	--ml-footer-intro-max-md: 42rem;
	--ml-footer-intro-max-lg: 48rem;
	--ml-footer-description-max-sm: 34rem;
	--ml-footer-description-max-md: 40rem;
	--ml-footer-description-max-lg: 46rem;
	--ml-footer-subscribe-copy-max: 18rem;
	--ml-footer-subscribe-control-max: 20rem;
	--ml-footer-subscribe-control-height: 2.75rem;
	--ml-footer-submit-hover-scale: 0.98;
	--ml-footer-submit-press-scale: 0.96;
	--ml-footer-submit-arrow-hover-x: 2px;
	--ml-footer-meta-copy-max: 38rem;
	--ml-footer-link-min-height-sm: 1.75rem;
	--ml-footer-link-min-height-md: 2rem;
	--ml-footer-link-min-height-lg: 2.25rem;
	--ml-footer-link-hover-x: 1px;
	--ml-footer-link-arrow-hover-x: 2px;
}