/**
 * Design tokens.
 *
 * Every color, radius, spacing, and container value used anywhere in the
 * theme must reference one of these variables — never a literal hex code
 * or px value in a component file. That is what makes a future Light Mode
 * a matter of overriding this block, not rewriting the theme.
 */

:root {
	/* Color: surfaces */
	--color-bg: #0B0B0D;
	--color-surface: #121216;
	--color-surface-2: #18181D;
	--color-border: #27272D;

	/* Color: text */
	--color-text: #F5F5F5;
	--color-text-secondary: #A1A1AA;
	--color-text-muted: #7D7D86; /* Lightened from the brief's #71717A (§3) — that exact value contrasts 4.07:1 on --color-bg, under the 4.5:1 WCAG AA minimum for normal text; this keeps the identical hue/saturation and only nudges lightness enough to pass AA (§22). */

	/* Color: accent */
	--color-accent: #FFFFFF;
	--color-accent-hover: #E4E4E7;
	--color-accent-text: #0B0B0D; /* text color placed ON TOP of --color-accent */

	/* Color: semantic */
	--color-success: #22C55E;
	--color-danger: #EF4444;
	--color-warning: #F59E0B;

	/* Radius */
	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 16px;
	--radius-full: 999px;

	/* Spacing scale (used by utility + component spacing, not just Gutenberg) */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 16px;
	--space-4: 24px;
	--space-5: 40px;
	--space-6: 64px;
	--space-7: 96px;

	/* Layout */
	--container-width: 1280px;
	--container-padding: clamp(16px, 4vw, 40px);
	--header-height: 72px;

	/* Typography */
	--font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-size-h1: clamp(2rem, 4vw + 1rem, 4.5rem); /* 32px mobile -> 72px desktop, per §20 */
	--font-size-h2: clamp(1.5rem, 2.2vw + 1rem, 2.5rem);
	--font-size-h3: clamp(1.25rem, 1.2vw + 1rem, 1.75rem);
	--font-size-body: 1rem;
	--font-size-small: 0.875rem;
	--font-size-xs: 0.75rem;
	--line-height-heading: 1.15;
	--line-height-body: 1.6;

	/* Motion */
	--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
	--duration-fast: 0.15s;
	--duration-base: 0.2s;
	--duration-slow: 0.35s;

	/* Elevation — kept extremely subtle per "no heavy visual effects" (§4) */
	--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);
	--shadow-popover: 0 8px 24px rgba(0, 0, 0, 0.5);

	/* z-index scale, centralized so header/offcanvas/mini-cart/search never fight */
	--z-header: 100;
	--z-offcanvas: 200;
	--z-modal: 300;
	--z-toast: 400;
}

/**
 * Respect the OS-level motion preference by collapsing all durations to
 * near-zero. Components should keep using var(--duration-*) rather than
 * hardcoding transition-duration so this single override is sufficient
 * theme-wide (see §30).
 */
@media (prefers-reduced-motion: reduce) {
	:root {
		--duration-fast: 0.001s;
		--duration-base: 0.001s;
		--duration-slow: 0.001s;
	}
}

/**
 * Light Mode placeholder.
 *
 * Not implemented in Phase 2 (dark is the base design, per §3), but the
 * hook is wired now so a future body[data-theme="light"] rule set is a
 * pure variable swap with zero component-file changes.
 */
/*
body[data-theme="light"] {
	--color-bg: #FFFFFF;
	--color-surface: #F5F5F5;
	...
}
*/