/* =============================================================================
 * tailwind.css · Tailwind v4 @theme customization
 * ─────────────────────────────────────────────────────────────────────────────
 * Maps our custom properties (variables) to Tailwind's utility class generator.
 * ========================================================================== */
@theme inline {
	/* Colours (shadcn-compat) */
	--color-background: var(--background);
	--color-foreground: var(--foreground);
	--color-card: var(--card);
	--color-card-foreground: var(--card-foreground);
	--color-popover: var(--popover);
	--color-popover-foreground: var(--popover-foreground);
	--color-primary: var(--primary);
	--color-primary-foreground: var(--primary-foreground);
	--color-secondary: var(--secondary);
	--color-secondary-foreground: var(--secondary-foreground);
	--color-muted: var(--muted);
	--color-muted-foreground: var(--muted-foreground);
	--color-accent: var(--accent);
	--color-accent-foreground: var(--accent-foreground);
	--color-destructive: var(--destructive);
	--color-destructive-foreground: var(--destructive-foreground);
	--color-border: var(--border);
	--color-input: var(--input);
	--color-ring: var(--ring);
	--color-sidebar: var(--sidebar);
	--color-sidebar-foreground: var(--sidebar-foreground);
	--color-sidebar-primary: var(--sidebar-primary);
	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
	--color-sidebar-accent: var(--sidebar-accent);
	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
	--color-sidebar-border: var(--sidebar-border);
	--color-sidebar-ring: var(--sidebar-ring);
	--color-chart-1: var(--chart-1);
	--color-chart-2: var(--chart-2);
	--color-chart-3: var(--chart-3);
	--color-chart-4: var(--chart-4);
	--color-chart-5: var(--chart-5);

	/* Extended */
	--color-surface: var(--surface);
	--color-surface-2: var(--surface-2);
	--color-surface-3: var(--surface-3);
	--color-surface-primary: var(--surface-primary);
	--color-button: var(--button);
	--color-button-hover: var(--button-hover);
	--color-code: var(--code);
	--color-accent-soft: var(--accent-soft);
	--color-border-strong: var(--border-strong);
	--color-text: var(--text);
	--color-text-primary: var(--text-primary);
	--color-text-primary-foreground: var(--text-primary-foreground);
	--color-text-secondary: var(--text-secondary);
	--color-text-muted: var(--text-muted);
	--color-body: var(--text-body);
	--color-code-text: var(--code-text);
	--color-btn-primary-hover: var(--btn-primary-hover);
	--color-live: var(--ml-color-live);
	--color-live-soft: var(--ml-color-live-soft);
	--color-live-border: var(--ml-color-live-border);
	--color-callout-tip-text: var(--callout-tip-text);
	--color-callout-tip-accent: var(--callout-tip-accent);
	--color-callout-warn-text: var(--callout-warn-text);
	--color-callout-warn-accent: var(--callout-warn-accent);
	--color-callout-info-text: var(--callout-info-text);
	--color-callout-info-accent: var(--callout-info-accent);

	/* Fonts */
	--font-sans: var(--ml-font-sans);
	--font-mono: var(--ml-font-mono);
	--font-script: var(--ml-font-script);
	--font-headline: var(--ml-font-headline);

	/* Font Sizes */
	--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 */
	--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 Spacings */
	--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);

	/* Spacing */
	--breakpoint-mobile: 24.375rem;
	--breakpoint-tablet: 48rem;
	--breakpoint-desktop: 80rem;
	--breakpoint-wide: 96rem;

	--spacing-space-0: var(--space-0);
	--spacing-space-px: var(--space-px);
	--spacing-space-0-5: var(--space-0-5);
	--spacing-space-1: var(--space-1);
	--spacing-space-1-5: var(--space-1-5);
	--spacing-space-2: var(--space-2);
	--spacing-space-3: var(--space-3);
	--spacing-space-4: var(--space-4);
	--spacing-space-5: var(--space-5);
	--spacing-space-6: var(--space-6);
	--spacing-space-7: var(--space-7);
	--spacing-space-8: var(--space-8);
	--spacing-space-9: var(--space-9);
	--spacing-space-10: var(--space-10);
	--spacing-space-12: var(--space-12);
	--spacing-space-14: var(--space-14);
	--spacing-space-16: var(--space-16);
	--spacing-space-20: var(--space-20);
	--spacing-space-24: var(--space-24);
	--spacing-space-28: var(--space-28);
	--spacing-space-32: var(--space-32);

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

	--spacing-footer-y-sm: var(--ml-footer-y-sm);
	--spacing-footer-y-sm-tablet: var(--ml-footer-y-sm-tablet);
	--spacing-footer-y-sm-desktop: var(--ml-footer-y-sm-desktop);
	--spacing-footer-y-md: var(--ml-footer-y-md);
	--spacing-footer-y-md-tablet: var(--ml-footer-y-md-tablet);
	--spacing-footer-y-md-desktop: var(--ml-footer-y-md-desktop);
	--spacing-footer-y-lg: var(--ml-footer-y-lg);
	--spacing-footer-y-lg-tablet: var(--ml-footer-y-lg-tablet);
	--spacing-footer-y-lg-desktop: var(--ml-footer-y-lg-desktop);
	--spacing-footer-x-sm: var(--ml-footer-x-sm);
	--spacing-footer-x-sm-tablet: var(--ml-footer-x-sm-tablet);
	--spacing-footer-x-sm-desktop: var(--ml-footer-x-sm-desktop);
	--spacing-footer-x-md: var(--ml-footer-x-md);
	--spacing-footer-x-md-tablet: var(--ml-footer-x-md-tablet);
	--spacing-footer-x-md-desktop: var(--ml-footer-x-md-desktop);
	--spacing-footer-x-lg: var(--ml-footer-x-lg);
	--spacing-footer-x-lg-tablet: var(--ml-footer-x-lg-tablet);
	--spacing-footer-x-lg-desktop: var(--ml-footer-x-lg-desktop);
	--spacing-footer-layout-gap-sm: var(--ml-footer-layout-gap-sm);
	--spacing-footer-layout-gap-sm-desktop: var(
		--ml-footer-layout-gap-sm-desktop
	);
	--spacing-footer-layout-gap-md: var(--ml-footer-layout-gap-md);
	--spacing-footer-layout-gap-md-desktop: var(
		--ml-footer-layout-gap-md-desktop
	);
	--spacing-footer-layout-gap-lg: var(--ml-footer-layout-gap-lg);
	--spacing-footer-layout-gap-lg-desktop: var(
		--ml-footer-layout-gap-lg-desktop
	);
	--spacing-footer-intro-gap-sm: var(--ml-footer-intro-gap-sm);
	--spacing-footer-intro-gap-md: var(--ml-footer-intro-gap-md);
	--spacing-footer-intro-gap-lg: var(--ml-footer-intro-gap-lg);
	--spacing-footer-column-gap-x-sm: var(--ml-footer-column-gap-x-sm);
	--spacing-footer-column-gap-y-sm: var(--ml-footer-column-gap-y-sm);
	--spacing-footer-column-gap-x-md: var(--ml-footer-column-gap-x-md);
	--spacing-footer-column-gap-y-md: var(--ml-footer-column-gap-y-md);
	--spacing-footer-column-gap-x-lg: var(--ml-footer-column-gap-x-lg);
	--spacing-footer-column-gap-y-lg: var(--ml-footer-column-gap-y-lg);
	--spacing-footer-meta-mt-sm: var(--ml-footer-meta-mt-sm);
	--spacing-footer-meta-pt-sm: var(--ml-footer-meta-pt-sm);
	--spacing-footer-meta-mt-md: var(--ml-footer-meta-mt-md);
	--spacing-footer-meta-pt-md: var(--ml-footer-meta-pt-md);
	--spacing-footer-meta-mt-lg: var(--ml-footer-meta-mt-lg);
	--spacing-footer-meta-pt-lg: var(--ml-footer-meta-pt-lg);

	/* Radii */
	--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-width-thin: var(--border-thin);
	--border-width-medium: var(--border-medium);
	--border-width-thick: var(--border-thick);

	/* Shadows */
	--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);
	--shadow-card: var(--shadow-lg);

	/* Z-index */
	--z-index-base: var(--z-base);
	--z-index-elevated: var(--z-elevated);
	--z-index-sticky: var(--z-sticky);
	--z-index-dropdown: var(--z-dropdown);
	--z-index-overlay: var(--z-overlay);
	--z-index-modal: var(--z-modal);
	--z-index-toast: var(--z-toast);
	--z-index-tooltip: var(--z-tooltip);
	--z-index-max: var(--z-max);

	/* Containers */
	--container-monoline-sm: var(--container-sm);
	--container-monoline-md: var(--container-md);
	--container-monoline-lg: var(--container-lg);
	--container-monoline-xl: var(--container-xl);
	--container-monoline-2xl: var(--container-2xl);
	--container-container-sm: var(--container-sm);
	--container-container-md: var(--container-md);
	--container-container-lg: var(--container-lg);
	--container-container-xl: var(--container-xl);
	--container-container-2xl: var(--container-2xl);
	--container-prose: var(--ml-container-prose);

	/* Blurs */
	--blur-sm: var(--ml-blur-sm);
	--blur-md: var(--ml-blur-md);
	--blur-lg: var(--ml-blur-lg);
	--blur-xl: var(--ml-blur-xl);

	/* Motion */
	--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);
	--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);

	--animate-heart-pop: heart-pop var(--duration-medium) var(--ease-out-expo);
	--animate-ring-ripple: ring-ripple var(--duration-long) var(--ease-out);
	--animate-shimmer: shimmer 1.4s linear infinite;
	--animate-progress-loop: progress-loop 1.4s var(--ease-in-out) infinite;
	--animate-toast-in: toast-in 3.4s var(--ease-in-out);
	--animate-fade-up: fade-up var(--duration-long) var(--ease-out-expo) both;
	--animate-slide-in-left: slide-in-left var(--duration-short)
		var(--ease-out-expo);
	--animate-slide-in-right: slide-in-right var(--duration-short)
		var(--ease-out-expo);
	--animate-scale-in: scale-in var(--duration-fast) var(--ease-out-expo);
	--animate-glow-pulse: glow-pulse 2.2s var(--ease-in-out) infinite;
}

@utility border-thin {
	border-width: var(--border-thin);
}

@utility border-medium {
	border-width: var(--border-medium);
}

@utility border-thick {
	border-width: var(--border-thick);
}

@utility border-x-thin {
	border-inline-width: var(--border-thin);
}

@utility border-x-medium {
	border-inline-width: var(--border-medium);
}

@utility border-x-thick {
	border-inline-width: var(--border-thick);
}

@utility border-y-thin {
	border-block-width: var(--border-thin);
}

@utility border-y-medium {
	border-block-width: var(--border-medium);
}

@utility border-y-thick {
	border-block-width: var(--border-thick);
}

@utility border-t-thin {
	border-block-start-width: var(--border-thin);
}

@utility border-t-medium {
	border-block-start-width: var(--border-medium);
}

@utility border-t-thick {
	border-block-start-width: var(--border-thick);
}

@utility border-r-thin {
	border-inline-end-width: var(--border-thin);
}

@utility border-r-medium {
	border-inline-end-width: var(--border-medium);
}

@utility border-r-thick {
	border-inline-end-width: var(--border-thick);
}

@utility border-b-thin {
	border-block-end-width: var(--border-thin);
}

@utility border-b-medium {
	border-block-end-width: var(--border-medium);
}

@utility border-b-thick {
	border-block-end-width: var(--border-thick);
}

@utility border-l-thin {
	border-inline-start-width: var(--border-thin);
}

@utility border-l-medium {
	border-inline-start-width: var(--border-medium);
}

@utility border-l-thick {
	border-inline-start-width: var(--border-thick);
}