:root {
	/* ==========================
	   LAYOUT
	========================== */

	--container-width: 1320px;
	--container-padding: 20px;

	--section-spacing-xs: 32px;
	--section-spacing-sm: 48px;
	--section-spacing-md: 64px;
	--section-spacing-lg: 80px;
	--section-spacing-xl: 96px;

	/* Legacy alias - keep for existing sections */
	--section-spacing: var(--section-spacing-md);

	/* ==========================
	   COLORS - BRAND
	========================== */

	--color-brand-wine: #8f2727;
	--color-brand-wine-light: #a73a3a;
	--color-brand-wine-dark: #741818;

	--color-brand-gold-soft: #d1b8a1;
	--color-brand-cream: #faf8f5;
	--color-brand-stone: #ede8e1;

	/* ==========================
	   SEMANTIC COLOR CONTRACT
	   ----------------------------------------------------------------------
	   Authoritative owner: assets/css/base/variables.css

	   Dependency direction:
	   stable primitive / proven literal -> semantic token -> legacy alias

	   Semantic tokens express design roles, not visual resemblance. Component
	   material recipes, page-local optical values, media scrims and vendor
	   colors remain owned by their current domains. Phase 1 does not migrate
	   consumers; legacy aliases preserve the existing public contract.
	========================== */

	/* Canvas and surfaces */
	--color-canvas-default: var(--color-brand-cream);
	--color-surface-default: var(--color-brand-stone);
	--color-surface-raised: #fdfcfb;
	--color-surface-subtle: #f4f0eb;
	--color-surface-translucent: rgba(255, 255, 255, 0.76);
	--color-commerce-canvas: #fdfbf8;
	--color-material-glass-edge: rgba(255, 252, 247, 0.18);
	--color-material-glass-highlight: rgba(255, 255, 255, 0.22);
	--color-material-pearl-light: #FFF9F0;
	--color-material-champagne-reflection: #D9C092;
	--color-material-warm-edge-shade: #715642;
	--color-material-ambient-shadow: #4C392D;

	/* Content hierarchy */
	--color-content-primary: #2d2a28;
	--color-content-secondary: #6a625c;
	--color-content-tertiary: #8d8378;
	--color-content-inverse: #ffffff;

	/* Decorative accent
	   Ownership direction: brand primitive -> semantic role -> future consumers.
	   This token is limited to non-informational decorative accents. Action,
	   status, focus, content and rating roles may not consume it solely because
	   their current values appear visually similar. */
	--color-accent-decorative: var(--color-brand-gold-soft);

	/* Actions and links */
	--color-action-primary: var(--color-brand-wine);
	--color-action-primary-strong: var(--color-brand-wine-dark);
	--color-action-primary-soft: var(--color-brand-wine-light);
	--color-action-on-primary: var(--color-content-inverse);
	--color-link-default: var(--color-brand-wine);
	--color-link-hover: var(--color-brand-wine-dark);

	/* Borders and dividers */
	--color-border-default: rgba(45, 42, 40, 0.12);
	--color-border-subtle: rgba(45, 42, 40, 0.08);
	--color-border-emphasis: rgba(45, 42, 40, 0.2);
	--color-border-interactive: var(--color-brand-wine);
	--color-divider-default: rgba(45, 42, 40, 0.12);

	/* Form fields */
	--color-field-surface: #ffffff;
	--color-field-content: #2d2a28;
	--color-field-placeholder: #7f756c;
	--color-field-border: rgba(45, 42, 40, 0.2);
	--color-field-border-invalid: #b3261e;
	--color-field-caret: var(--color-brand-wine);

	/* Status content
	   Surface and border roles remain reserved until a later phase proves a
	   shared value across consumers. */
	--color-status-success-content: #2f7d4f;
	--color-status-info-content: #2f6690;
	--color-status-warning-content: #a66a00;
	--color-status-error-content: #b3261e;

	/* Focus and selection */
	--color-focus-ring: rgba(143, 39, 39, 0.5981);
	--color-selection-surface: var(--color-brand-wine);
	--color-selection-content: var(--color-content-inverse);

	/* Stable commerce roles
	   These tokens are reserved for the future WooCommerce migration and do
	   not replace any consumer declaration in Phase 1. */
	--color-commerce-price: var(--color-content-secondary);
	--color-commerce-price-promotional: var(--color-brand-wine);
	--color-commerce-price-previous: #7B7166;
	--color-commerce-rating: var(--color-brand-gold-soft);
	--color-commerce-sale-content: var(--color-brand-wine-dark);
	--color-commerce-sale-surface: rgba(250, 248, 245, 0.9);
	--color-commerce-sale-border: rgba(143, 39, 39, 0.16);
	--color-commerce-stock-indicator: var(--color-brand-wine);
	--color-commerce-stock-unavailable: var(--color-content-tertiary);

	/* ==========================
	   LEGACY COLOR COMPATIBILITY
	   ----------------------------------------------------------------------
	   Existing token names remain public aliases until their consumers are
	   migrated under a separately authorized Work Order.
	========================== */

	--color-primary: var(--color-action-primary);
	--color-primary-light: var(--color-action-primary-soft);
	--color-primary-dark: var(--color-action-primary-strong);

	/* No proven semantic owner yet; retained byte-for-value compatibility. */
	--color-secondary: #f5f5f5;

	/* ==========================
	   COLORS - SURFACES (LEGACY ALIASES)
	========================== */

	--color-background: var(--color-canvas-default);
	--color-surface: var(--color-surface-default);
	--color-surface-light: var(--color-surface-raised);
	--color-surface-muted: var(--color-surface-subtle);
	--color-surface-glass: var(--color-surface-translucent);

	/* ==========================
	   COLORS - TEXT (LEGACY ALIASES)
	========================== */

	--color-text: var(--color-content-primary);
	--color-text-light: var(--color-content-secondary);
	--color-text-muted: var(--color-content-tertiary);
	--color-text-inverse: var(--color-content-inverse);

	/* ==========================
	   COLORS - BORDERS (LEGACY ALIASES)
	========================== */

	--color-border: var(--color-border-default);
	--color-border-soft: var(--color-border-subtle);
	--color-border-strong: var(--color-border-emphasis);

	/* ==========================
	   COLORS - STATES (LEGACY ALIASES)
	========================== */

	--color-success: var(--color-status-success-content);
	--color-info: var(--color-status-info-content);
	--color-warning: var(--color-status-warning-content);
	--color-error: var(--color-status-error-content);

	/* ==========================
	   BASIC COLORS
	========================== */

	--color-white: #ffffff;
	--color-black: #000000;

	/* ==========================
	   TYPOGRAPHY
	========================== */

	--font-family-body: Arial, sans-serif;
	--font-family-heading: Arial, sans-serif;

	--font-size-display: clamp(42px, 5vw, 64px);
	--font-size-page-title: clamp(38px, 4.2vw, 56px);
	--font-size-section-title: clamp(28px, 3vw, 36px);
	--font-size-card-title: clamp(22px, 2.2vw, 28px);

	--font-size-body-large: 20px;
	--font-size-body: 16px;
	--font-size-small: 14px;
	--font-size-caption: 13px;
	--font-size-eyebrow: 12px;
	--font-size-button: 13px;

	--line-height-tight: 1.08;
	--line-height-heading: 1.15;
	--line-height-body: 1.6;
	--line-height-relaxed: 1.75;

	--letter-spacing-tight: -0.035em;
	--letter-spacing-heading: -0.025em;
	--letter-spacing-normal: 0;
	--letter-spacing-button: 0.05em;
	--letter-spacing-eyebrow: 0.28em;

	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;

	/* ==========================
	   SPACING SCALE
	========================== */

	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-7: 32px;
	--space-8: 40px;
	--space-9: 48px;
	--space-10: 64px;
	--space-11: 80px;
	--space-12: 96px;

	/* ==========================
	   RADIUS SCALE
	   PAMI rule:
	   minimal radius = premium
	   pill radius is only for rare icon/avatar cases
	========================== */

	--radius-xs: 2px;
	--radius-sm: 4px;
	--radius-md: 6px;
	--radius-lg: 8px;
	--radius-xl: 12px;
	--radius-full: 999px;

	/* Legacy alias - keep current code working */
	--border-radius: var(--radius-md);

	/* ==========================
	   SHADOWS / ELEVATION
	========================== */

	--shadow-soft:
		0 12px 28px rgba(45, 42, 40, 0.06),
		0 1px 2px rgba(45, 42, 40, 0.04);

	--shadow-medium:
		0 18px 42px rgba(45, 42, 40, 0.1),
		0 1px 2px rgba(45, 42, 40, 0.05);

	--shadow-strong:
		0 34px 90px rgba(45, 42, 40, 0.18);

	--shadow-button-primary:
		0 12px 28px rgba(60, 20, 20, 0.16),
		inset 0 1px 0 rgba(255, 255, 255, 0.28),
		inset 0 -1px 0 rgba(0, 0, 0, 0.12);

	--shadow-button-primary-hover:
		0 16px 34px rgba(60, 20, 20, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.32),
		inset 0 -1px 0 rgba(0, 0, 0, 0.12);

	--shadow-button-secondary:
		0 6px 16px rgba(45, 42, 40, 0.04),
		inset 0 1px rgba(255, 255, 255, 0.9);

	--shadow-button-secondary-hover:
		0 10px 22px rgba(45, 42, 40, 0.06),
		inset 0 1px rgba(255, 255, 255, 0.95);

	/* ==========================
	   PREMIUM NAVIGATION MATERIAL
	   ----------------------------------------------------------------------
	   Canonical material owner for desktop Brand/Shop submenus and the
	   mobile navigation panel. Geometry, positioning, spacing, breakpoints
	   and interaction remain Header-owned.
	========================== */

	--navigation-material-surface-fallback: var(--color-surface-raised);
	--navigation-material-surface:
		color-mix(
			in srgb,
			var(--color-surface-raised) 95%,
			transparent
		);
	--navigation-material-border-fallback: var(--color-border-subtle);
	--navigation-material-border:
		color-mix(
			in srgb,
			var(--color-border-default) 34%,
			transparent
		);
	--navigation-material-backdrop-filter: blur(18px);

	/* ==========================
	   GLOBAL MOTION SYSTEM
	   ----------------------------------------------------------------------
	   Motion is a Design System primitive. Components consume these tokens
	   and may not introduce independent timing or easing values without
	   explicit architectural approval.
	========================== */

	--motion-duration-fast: 180ms;
	--motion-duration-base: 320ms;
	--motion-duration-reveal: 420ms;
	--motion-duration-slow: 440ms;
	--motion-duration-media: 560ms;

	--motion-easing-standard:
		cubic-bezier(0.4, 0, 0.2, 1);

	--motion-easing-emphasized:
		cubic-bezier(0.22, 1, 0.36, 1);

	--motion-stagger-step: 70ms;
	--motion-reveal-distance: 12px;
	--motion-reveal-distance-media: 8px;
	--motion-reveal-distance-action: 10px;
	--motion-reveal-scale: 0.992;
	--motion-hover-scale: 1.02;

	/* Legacy aliases keep existing components compatible while sourcing shared
	   interaction timing from the global Motion System. Functional and legacy
	   exceptions are tracked in the WO09.1 Motion Exception Register. */
	--transition-fast:
		var(--motion-duration-fast)
		var(--motion-easing-standard);

	--transition-base:
		var(--motion-duration-base)
		var(--motion-easing-standard);

	--transition-slow:
		var(--motion-duration-slow)
		var(--motion-easing-emphasized);

	--transition-luxury:
		var(--motion-duration-media)
		var(--motion-easing-emphasized);

	/* ==========================
	   FOCUS / ACCESSIBILITY
	========================== */

	--focus-ring-color: var(--color-focus-ring);
	--focus-ring-width: 3px;
	--focus-ring-offset: 4px;

	/* ==========================
	   TOUCH TARGETS
	========================== */

	--touch-target-min: 44px;

	/* ==========================
	   Z-INDEX SCALE
	========================== */

	--z-header: 100;
	--z-dropdown: 300;
	--z-modal: 900;
	--z-lightbox: 9999;

	/* ==========================
	   BREAKPOINTS REFERENCE
	   CSS custom properties cannot be used directly
	   in media queries across all browsers yet.
	   
	   Mobile: 600px
	   Tablet: 768px
	   Desktop small: 900px
	   Desktop: 1100px
	========================== */
}

/* ==========================
   GLOBAL MOTION — MOBILE CALIBRATION
   --------------------------------------------------------------------------
   Centralized breakpoint overrides. Components do not own mobile motion
   values.
========================== */

@media (max-width: 680px) {
	:root {
		--motion-stagger-step: 50ms;
		--motion-reveal-distance: 9px;
		--motion-reveal-distance-media: 6px;
		--motion-reveal-distance-action: 7px;
	}
}