/* ==========================================================================
   VoxQ Design Tokens — VoxQ Atelier
   Global design system. Edit this file to restyle the entire storefront.
   ========================================================================== */

:root {
	/* Color: surfaces */
	--vxq-color-background: #f7f5f0;   /* warm paper off-white */
	--vxq-color-surface: #ffffff;
	--vxq-color-surface-muted: #f1efe9;

	/* Color: text */
	--vxq-color-text: #1c1b17;         /* charcoal */
	--vxq-color-muted: #747168;
	--vxq-color-faint: #a8a49a;

	/* Color: brand */
	--vxq-color-primary: #14130f;      /* near-black primary actions */
	--vxq-color-primary-hover: #2e2c26;
	--vxq-color-accent: #a9855c;       /* warm neutral bronze accent */
	--vxq-color-accent-soft: #efe7da;
	--vxq-color-accent-text: #7c5f3d;

	/* Color: semantics */
	--vxq-color-success: #2f6b4f;
	--vxq-color-danger: #b33a2c;
	--vxq-color-warning: #a06a12;
	--vxq-color-border: #e7e2d7;
	--vxq-color-border-strong: #cfc9ba;

	/* Color: derived */
	--vxq-color-overlay: rgba(20, 19, 15, 0.5);
	--vxq-color-overlay-strong: rgba(20, 19, 15, 0.7);
	--vxq-color-on-primary: #ffffff;
	--vxq-color-surface-alpha: rgba(255, 255, 255, 0.92);
	--vxq-color-focus-ring: rgba(20, 19, 15, 0.08);

	/* Color: badges */
	--vxq-color-sale: #b33a2c;
	--vxq-color-new: #2f6b4f;
	--vxq-color-soldout: #747168;

	/* Typography */
	--vxq-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--vxq-font-heading: Georgia, "Times New Roman", Cambria, serif;
	--vxq-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--vxq-font-size-xs: 0.75rem;
	--vxq-font-size-sm: 0.8125rem;
	--vxq-font-size-md: 1rem;
	--vxq-font-size-lg: 1.125rem;
	--vxq-font-size-xl: clamp(1.5rem, 3vw, 2.25rem);
	--vxq-font-size-2xl: clamp(2rem, 5vw, 3.5rem);
	--vxq-font-size-3xl: clamp(2.5rem, 6.5vw, 4.5rem);

	--vxq-line-height-body: 1.7;
	--vxq-line-height-heading: 1.15;
	--vxq-letter-spacing-meta: 0.14em;

	/* Spacing scale */
	--vxq-spacing-xs: 0.5rem;
	--vxq-spacing-sm: 0.75rem;
	--vxq-spacing-md: 1.25rem;
	--vxq-spacing-lg: 2rem;
	--vxq-spacing-xl: 3.5rem;
	--vxq-spacing-2xl: 6rem;

	/* Layout */
	--vxq-container: 1280px;
	--vxq-container-narrow: 960px;
	--vxq-gutter: clamp(1.25rem, 4vw, 2.5rem);
	--vxq-header-height: 4.25rem;
	--vxq-header-height-mobile: 3.75rem;

	/* Radius */
	--vxq-radius-sm: 2px;
	--vxq-radius-md: 6px;
	--vxq-radius-lg: 12px;
	--vxq-radius-full: 999px;

	/* Shadows (minimal — editorial) */
	--vxq-shadow-sm: 0 1px 2px rgba(20, 19, 15, 0.06);
	--vxq-shadow-md: 0 6px 24px rgba(20, 19, 15, 0.1);
	--vxq-shadow-lg: 0 18px 50px rgba(20, 19, 15, 0.16);

	/* Motion */
	--vxq-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--vxq-duration: 0.24s;
	--vxq-duration-slow: 0.42s;

	/* Z-index scale */
	--vxq-z-header: 100;
	--vxq-z-drawer: 400;
	--vxq-z-modal: 500;
	--vxq-z-toast: 600;
}