/**
 * Design tokens.
 *
 * Brand values follow design_handoff. theme.json presets stay in sync where possible.
 */

:root {
	/* Brand palette (design handoff) */
	--color-brand: #e11827;
	--color-brand-hover: #c3111f;
	--color-brand-bright: #ff5a4d;
	--color-sale: #ea580c;
	--color-ink: #141414;
	--color-black: #0c0c0d;
	--color-white: #ffffff;
	--color-sand: #f7f5f2;
	--color-text: var(--wp--preset--color--text, #3a352f);
	--color-text-muted: var(--wp--preset--color--text-muted, #6b655e);
	--color-text-faint: #8a847c;
	--color-border: var(--wp--preset--color--border, #eceae7);
	--color-border-strong: #e4e0db;
	--color-stock: #16a34a;

	/* Semantic aliases (theme + Gutenberg) */
	--color-primary: var(--wp--preset--color--primary, var(--color-ink));
	--color-secondary: var(--wp--preset--color--secondary, #3f3f46);
	--color-accent: var(--wp--preset--color--accent, var(--color-brand));
	--color-background: var(--wp--preset--color--background, var(--color-white));
	--color-surface: var(--wp--preset--color--surface, var(--color-sand));

	/* Layout — design container 1320px (contentSize / wideSize in theme.json) */
	--content-width: var(--wp--style--global--content-size, 1320px);
	--container-wide-width: var(--wp--style--global--wide-size, 1320px);
	--container-width: var(--wp--custom--container-width, 1320px);
	--page-gutter: var(--wp--custom--page-gutter, clamp(1rem, 4vw, 1.5rem));
	--content-gutter: max(var(--page-gutter), 1.25rem);

	/* Spacing */
	--space-xs: var(--wp--preset--spacing--xs, 0.25rem);
	--space-sm: var(--wp--preset--spacing--sm, 0.5rem);
	--space-md: var(--wp--preset--spacing--md, 1rem);
	--space-lg: var(--wp--preset--spacing--lg, 1.5rem);
	--space-xl: var(--wp--preset--spacing--xl, 2rem);
	--space-2xl: var(--wp--preset--spacing--2-xl, 3rem);
	--space-3xl: var(--wp--preset--spacing--3-xl, 4.5rem);

	/* Typography */
	--font-family-base: var(--wp--preset--font-family--base, "Inter", system-ui, sans-serif);
	--font-family-heading: var(--wp--preset--font-family--heading, "Inter Tight", system-ui, sans-serif);
	--font-family-mono: var(--wp--preset--font-family--mono, "Roboto Mono", ui-monospace, monospace);
	--font-size-base: var(--wp--preset--font-size--medium, 1rem);
	--line-height-base: var(--wp--custom--line-height--base, 1.6);
	--line-height-heading: var(--wp--custom--line-height--heading, 1.2);

	/* Borders */
	--border-radius-sm: var(--wp--custom--border-radius--sm, 0.25rem);
	--border-radius-md: var(--wp--custom--border-radius--md, 0.5rem);
	--border-radius-lg: var(--wp--custom--border-radius--lg, 0.75rem);
	--border-color: var(--color-border);
	--border-width: 1px;

	/* Motion */
	--transition-fast: 150ms ease;
	--transition-base: 250ms ease;

	/* Elevation */
	--shadow-sm: 0 1px 2px rgb(20 20 20 / 0.04);
	--shadow-card-hover: 0 18px 40px -18px rgb(20 20 20 / 0.28);
	--shadow-mega: 0 24px 40px -24px rgb(20 20 20 / 0.25);
}