/**
 * Engineered RV Inventory — design tokens.
 *
 * The theming contract. Runtime values for the branded vars are injected
 * as an inline :root block from Settings → Branding (see Core\Assets);
 * these are the fallbacks. Every component in later phases consumes
 * tokens only — no raw colors/sizes in component CSS.
 *
 * All selectors are scoped under .ervi-* so nothing leaks into the theme.
 */

:where(:root) {
	/*
	 * PUBLIC THEMING CONTRACT — a theme sets any of these on :root and wins:
	 *   --ervi-accent  --ervi-accent-contrast  --ervi-radius  --ervi-surface
	 *   --ervi-text    --ervi-muted            --ervi-border  --ervi-font
	 * Settings → Branding values are injected under :where(:root), which has
	 * zero specificity, so a theme's plain :root block always takes priority
	 * regardless of stylesheet order.
	 */
	--ervi-accent: #e24836;
	--ervi-accent-contrast: #ffffff;
	--ervi-text: #12171b;
	--ervi-muted: #5b6470;
	--ervi-border: #e3e6ea;
	--ervi-surface: #ffffff;
	--ervi-radius: 12px;
	--ervi-font: inherit;

	/* Secondary brand values (Settings → Branding). */
	--ervi-money: #0f7a3d;
	--ervi-sale: var(--ervi-accent);
	--ervi-page-bg: #f6f7f8;

	/* Internal aliases — components consume these. */
	--ervi-primary: var(--ervi-accent);
	--ervi-ink: var(--ervi-text);
	--ervi-ink-muted: var(--ervi-muted);
	--ervi-ink-faint: color-mix(in srgb, var(--ervi-muted) 70%, #ffffff);
	--ervi-line: var(--ervi-border);
	--ervi-primary-soft: color-mix(in srgb, var(--ervi-accent) 12%, #ffffff);

	/* Elevation */
	--ervi-shadow-card: 0 1px 2px rgb(15 27 45 / 0.06), 0 4px 14px rgb(15 27 45 / 0.06);
	--ervi-shadow-card-hover: 0 2px 4px rgb(15 27 45 / 0.08), 0 12px 28px rgb(15 27 45 / 0.12);
	--ervi-shadow-drawer: 0 -8px 32px rgb(15 27 45 / 0.18);

	/* Spacing scale */
	--ervi-space-1: 0.25rem;
	--ervi-space-2: 0.5rem;
	--ervi-space-3: 0.75rem;
	--ervi-space-4: 1rem;
	--ervi-space-5: 1.5rem;
	--ervi-space-6: 2rem;
	--ervi-space-7: 3rem;

	/* Type scale (the font itself is --ervi-font above: inherit = the theme's). */
	--ervi-text-xs: 0.75rem;
	--ervi-text-sm: 0.875rem;
	--ervi-text-md: 1rem;
	--ervi-text-lg: 1.125rem;
	--ervi-text-xl: 1.375rem;
	--ervi-text-2xl: 1.75rem;

	/* Motion */
	--ervi-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--ervi-dur-fast: 150ms;
	--ervi-dur-med: 260ms;

	/* Focus ring — visible, brand-tinted, non-negotiable for a11y */
	--ervi-focus-ring: 0 0 0 3px color-mix(in srgb, var(--ervi-accent) 40%, transparent);
}

/* Global a11y primitives for all plugin UI */
.ervi-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

[class^="ervi-"]:focus-visible,
[class*=" ervi-"]:focus-visible {
	outline: none;
	box-shadow: var(--ervi-focus-ring);
	border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
	[class^="ervi-"],
	[class^="ervi-"]::before,
	[class^="ervi-"]::after,
	[class*=" ervi-"],
	[class*=" ervi-"]::before,
	[class*=" ervi-"]::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}