/**
 * Provisional design tokens.
 * TODO / PROVISIONAL — replace the accent pair in this file when a brand palette is approved.
 * Status colors are functional, not brand colors.
 */

:root {
	--mavi-color-bg: #f6f5f3;
	--mavi-color-surface: #ffffff;
	--mavi-color-text: #1a1a1a;
	--mavi-color-muted: #5c5854;
	--mavi-color-border: #e4e2de;
	--mavi-color-accent: #1a1a1a;
	--mavi-color-accent-hover: #3a3a3a;
	--mavi-color-on-accent: #ffffff;
	--mavi-color-success: #146c36;
	--mavi-color-success-bg: #e8f6ee;
	--mavi-color-warning: #8a5a00;
	--mavi-color-warning-bg: #fff6e5;
	--mavi-color-error: #8f1d2c;
	--mavi-color-error-bg: #fdecee;
	--mavi-color-focus: #1a1a1a;
	--mavi-color-footer: #1a1a1a;
	--mavi-color-footer-text: #ffffff;
	--mavi-color-footer-muted: #d6d3d1;

	--mavi-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--mavi-font-size-body: 1rem;
	--mavi-font-size-small: 0.875rem;
	--mavi-font-size-nav: 0.9375rem;
	--mavi-font-size-button: 0.9375rem;
	--mavi-font-size-product-title: 1rem;
	--mavi-font-size-price: 1.125rem;
	--mavi-font-size-h4: 1.125rem;
	--mavi-font-size-h3: 1.25rem;
	--mavi-font-size-h2: clamp(1.5rem, 1.25rem + 1vw, 2rem);
	--mavi-font-size-h1: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);
	--mavi-line-height-body: 1.6;
	--mavi-line-height-heading: 1.25;
	--mavi-line-height-tight: 1.3;
	--mavi-font-weight-regular: 400;
	--mavi-font-weight-medium: 500;
	--mavi-font-weight-semibold: 600;
	--mavi-font-weight-bold: 700;

	--mavi-space-xs: 0.25rem;
	--mavi-space-sm: 0.5rem;
	--mavi-space-md: 1rem;
	--mavi-space-lg: 1.5rem;
	--mavi-space-xl: 2rem;
	--mavi-space-2xl: 3rem;
	--mavi-space-3xl: 4.5rem;

	--mavi-content-max: 72rem;
	--mavi-content-narrow: 42rem;
	--mavi-page-padding: clamp(1rem, 4vw, 2rem);
	--mavi-section-spacing: clamp(2.5rem, 6vw, 4.5rem);

	--mavi-radius-sm: 0.25rem;
	--mavi-radius-md: 0.5rem;
	--mavi-radius-lg: 0.75rem;
	--mavi-radius-pill: 999px;

	--mavi-shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.06);
	--mavi-shadow-md: 0 8px 24px rgba(26, 26, 26, 0.08);
	--mavi-shadow-lg: 0 16px 40px rgba(26, 26, 26, 0.12);

	--mavi-control-height: 2.75rem;
	--mavi-breakpoint-tablet: 48rem;
	--mavi-breakpoint-desktop: 64rem;
}