:root {
	/* Faradoran Theme brand tokens (child-overridable). */
	--faradoran-theme-brand-primary: #3d4f5f;
	--faradoran-theme-brand-primary-dark: #2f3d4a;
	--faradoran-theme-brand-primary-light: #5a6b7a;
	--faradoran-theme-accent-gold: #6b7c8f;
	--faradoran-theme-accent-gold-light: #8a9aab;
	--faradoran-theme-font-family-primary: system-ui, "Segoe UI", Tahoma, sans-serif;

	/* Legacy Storefront alias layer (compatibility). */
	--faradoran-storefront-brand-primary: var(--faradoran-theme-brand-primary);
	--faradoran-storefront-brand-primary-dark: var(--faradoran-theme-brand-primary-dark);
	--faradoran-storefront-brand-primary-light: var(--faradoran-theme-brand-primary-light);
	--faradoran-storefront-accent-gold: var(--faradoran-theme-accent-gold);
	--faradoran-storefront-accent-gold-light: var(--faradoran-theme-accent-gold-light);
	--faradoran-storefront-font-family-primary: var(--faradoran-theme-font-family-primary);

	/* Colors */
	--faradoran-theme-color-green: var(--faradoran-theme-brand-primary);
	--faradoran-theme-color-green-dark: var(--faradoran-theme-brand-primary-dark);
	--faradoran-theme-color-green-light: var(--faradoran-theme-brand-primary-light);
	--faradoran-theme-color-gold: var(--faradoran-theme-accent-gold);
	--faradoran-theme-color-gold-light: var(--faradoran-theme-accent-gold-light);
	--faradoran-theme-color-ivory: #f7f4ee;
	--faradoran-theme-color-white: #fcfaf6;
	--faradoran-theme-color-text: #1e1e1e;
	--faradoran-theme-color-text-muted: #66625d;
	--faradoran-theme-color-border: #d8d2c7;
	--faradoran-theme-color-surface: #eee9e0;
	--faradoran-banner-overlay-surface: rgb(30 30 30 / 88%);
	--faradoran-theme-color-focus: var(--faradoran-theme-color-gold);
	--faradoran-theme-focus-ring: 2px solid var(--faradoran-theme-color-focus);
	--faradoran-theme-focus-offset: 2px;
	--faradoran-theme-color-error: #8b2e2e;
	--faradoran-theme-color-error-surface: #f9eeee;
	--faradoran-theme-color-success: var(--faradoran-storefront-brand-primary);
	--faradoran-theme-color-success-surface: #eef3ef;
	--faradoran-theme-color-info: var(--faradoran-storefront-brand-primary-light);
	--faradoran-theme-color-info-surface: #f0f4f1;

	/* Typography */
	--faradoran-theme-font-family-primary: var(--faradoran-storefront-font-family-primary);
	--faradoran-theme-font-weight-regular: 400;
	--faradoran-theme-font-weight-medium: 500;
	--faradoran-theme-font-weight-semibold: 600;
	--faradoran-theme-font-weight-bold: 700;
	--faradoran-theme-font-size-display: clamp(2rem, 1.5rem + 2vw, 2.75rem);
	--faradoran-theme-font-size-h1: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
	--faradoran-theme-font-size-h2: clamp(1.5rem, 1.25rem + 0.8vw, 1.875rem);
	--faradoran-theme-font-size-h3: 1.25rem;
	--faradoran-theme-font-size-h4: 1.125rem;
	--faradoran-theme-font-size-body: 1rem;
	--faradoran-theme-font-size-base: var(--faradoran-theme-font-size-body);
	--faradoran-theme-font-size-sm: 0.875rem;
	--faradoran-theme-font-size-xs: 0.8125rem;
	--faradoran-theme-line-height-base: 1.7;
	--faradoran-theme-line-height-heading: 1.25;
	--faradoran-theme-line-height-tight: 1.35;
	--faradoran-theme-letter-spacing-tight: -0.01em;
	--faradoran-theme-letter-spacing-wide: 0.04em;

	/* Spacing (4px foundation) */
	--faradoran-theme-space-1: 0.25rem;
	--faradoran-theme-space-2: 0.5rem;
	--faradoran-theme-space-3: 0.75rem;
	--faradoran-theme-space-4: 1rem;
	--faradoran-theme-space-5: 1.25rem;
	--faradoran-theme-space-6: 1.5rem;
	--faradoran-theme-space-8: 2rem;
	--faradoran-theme-space-10: 2.5rem;
	--faradoran-theme-space-12: 3rem;
	--faradoran-theme-space-16: 4rem;
	--faradoran-theme-space-20: 5rem;
	--faradoran-theme-space-24: 6rem;

	/* Layout */
	--faradoran-theme-layout-max-width: 80rem;
	--faradoran-theme-layout-wide-width: 90rem;
	--faradoran-theme-layout-narrow-width: 45rem;
	--faradoran-theme-layout-gutter: var(--faradoran-theme-space-4);
	/* Mobile commerce spacing (≤47.99rem unless overridden). */
	--faradoran-theme-layout-gutter-mobile: 0.75rem;
	--faradoran-theme-layout-gutter-mobile-wide: 1rem;
	--faradoran-theme-mobile-section-space: clamp(2rem, 2.5vw + 0.75rem, 3.25rem);
	--faradoran-theme-mobile-rail-bleed: var(--faradoran-theme-layout-gutter-mobile-wide);
	--faradoran-theme-form-font-size-mobile: 1rem;
	--faradoran-theme-layout-header-height: 4.5rem;
	/* Reserved for future compact mobile header shell (no visual effect yet). */
	--faradoran-theme-layout-header-height-mobile: 4rem;
	--faradoran-theme-header-brand-max-height: 3.3rem;
	--faradoran-theme-header-brand-inline-size: auto;
	--faradoran-theme-mobile-brand-max-width: 8.25rem;
	--faradoran-theme-mobile-brand-max-height: 2.475rem;
	/* Reserved for future compact gold-rate secondary row (not applied to layout yet). */
	--faradoran-theme-layout-secondary-bar-height: 0px;
	/* Mobile bottom navigation core height (safe area applied separately). */
	--faradoran-theme-layout-bottom-nav-height: 4rem;
	--faradoran-theme-layout-sticky-purchase-height: 4.75rem;
	--faradoran-theme-section-space: clamp(3rem, 4vw + 1rem, 6rem);

	/* Hero sizing tokens (overridable per-instance via inline custom properties). */
	--faradoran-hero-height-desktop: auto;
	--faradoran-hero-height-tablet: auto;
	--faradoran-hero-height-mobile: auto;
	/* Full-width homepage banner (`--large` / primary slot).
	   Previous displayed height followed the image intrinsic 1024/366.
	   Scale that box +15% without changing width: 1024 / (366 × 1.15). */
	--faradoran-theme-home-banner-large-aspect-ratio: 1024 / 420.9;
	/* Half-width homepage banner (`--medium` / secondary row). Modest landscape. */
	--faradoran-theme-home-banner-medium-aspect-ratio: 4 / 3;
	/* Quarter-width homepage banner (`--square` slot). Slightly wider than tall. */
	--faradoran-theme-home-banner-square-aspect-ratio: 5 / 4;

	/* Safe area (physical env() — browser API is device-physical). */
	--faradoran-theme-safe-area-top: env(safe-area-inset-top, 0px);
	--faradoran-theme-safe-area-right: env(safe-area-inset-right, 0px);
	--faradoran-theme-safe-area-bottom: env(safe-area-inset-bottom, 0px);
	--faradoran-theme-safe-area-left: env(safe-area-inset-left, 0px);
	--faradoran-theme-safe-area-inline-start: var(--faradoran-theme-safe-area-left);
	--faradoran-theme-safe-area-inline-end: var(--faradoran-theme-safe-area-right);

	/* Mobile app shell chrome (contract for future fixed UI; defaults are inert). */
	--faradoran-theme-layout-mobile-top-chrome: calc(
		var(--faradoran-theme-safe-area-top)
		+ var(--faradoran-theme-layout-header-height-mobile)
		+ var(--faradoran-theme-layout-secondary-bar-height)
	);
	/* Runtime-measured bottom edge of the persistent header stack (header + optional extension bars). */
	--faradoran-theme-persistent-header-stack-bottom-fallback: var(--faradoran-theme-layout-mobile-top-chrome);
	--faradoran-theme-layout-mobile-bottom-chrome: calc(
		var(--faradoran-theme-safe-area-bottom)
		+ var(--faradoran-theme-layout-bottom-nav-height)
	);
	--faradoran-theme-bottom-ui-offset: var(--faradoran-theme-safe-area-bottom);
	--faradoran-theme-floating-ui-offset: calc(
		var(--faradoran-theme-space-4) + var(--faradoran-theme-bottom-ui-offset)
	);

	/* Radii */
	--faradoran-theme-radius-sm: 0.5rem;
	--faradoran-theme-radius-md: 0.75rem;
	--faradoran-theme-radius-lg: 1rem;

	/* Elevation */
	--faradoran-theme-shadow-sm: 0 1px 2px rgb(30 30 30 / 0.04);
	--faradoran-theme-shadow-md: 0 8px 24px rgb(30 30 30 / 0.06);
	--faradoran-theme-border-width: 1px;

	/* Motion */
	--faradoran-theme-motion-fast: 150ms;
	--faradoran-theme-motion-base: 250ms;
	--faradoran-theme-motion-slow: 400ms;
	--faradoran-theme-easing-standard: cubic-bezier(0.22, 0.61, 0.36, 1);

	/* Z-index */
	--faradoran-theme-z-base: 1;
	--faradoran-theme-z-promo-bar: 10;
	--faradoran-theme-z-floating: 30;
	--faradoran-theme-z-sticky-purchase: 85;
	--faradoran-theme-z-header: 100;
	--faradoran-theme-z-bottom-nav: 150;
	--faradoran-theme-z-header-dropdown: 2;
	--faradoran-theme-z-overlay: 200;
	--faradoran-theme-z-panel: 300;
	--faradoran-theme-z-lightbox: 1600;
	--faradoran-theme-z-sticky: var(--faradoran-theme-z-header);

	/* Component sizing */
	--faradoran-theme-control-min-height: 2.75rem;
	--faradoran-theme-touch-target: 2.75rem;

	/* Cart count badge — physical top-left overlap on shopping-bag icon. */
	--faradoran-theme-cart-badge-offset-top: -0.7rem;
	--faradoran-theme-cart-badge-offset-left: -0.5rem;

	/* Legacy ADONIS platform variable aliases (compatibility; sunset N6+). */
	--adonis-color-green: var(--faradoran-theme-color-green);
	--adonis-color-green-dark: var(--faradoran-theme-color-green-dark);
	--adonis-color-green-light: var(--faradoran-theme-color-green-light);
	--adonis-color-gold: var(--faradoran-theme-color-gold);
	--adonis-color-gold-light: var(--faradoran-theme-color-gold-light);
	--adonis-color-ivory: var(--faradoran-theme-color-ivory);
	--adonis-color-white: var(--faradoran-theme-color-white);
	--adonis-color-text: var(--faradoran-theme-color-text);
	--adonis-color-text-muted: var(--faradoran-theme-color-text-muted);
	--adonis-color-border: var(--faradoran-theme-color-border);
	--adonis-color-surface: var(--faradoran-theme-color-surface);
	--adonis-color-focus: var(--faradoran-theme-color-focus);
	--adonis-focus-ring: var(--faradoran-theme-focus-ring);
	--adonis-focus-offset: var(--faradoran-theme-focus-offset);
	--adonis-color-error: var(--faradoran-theme-color-error);
	--adonis-color-error-surface: var(--faradoran-theme-color-error-surface);
	--adonis-color-success: var(--faradoran-theme-color-success);
	--adonis-color-success-surface: var(--faradoran-theme-color-success-surface);
	--adonis-color-info: var(--faradoran-theme-color-info);
	--adonis-color-info-surface: var(--faradoran-theme-color-info-surface);
	--adonis-font-family-primary: var(--faradoran-theme-font-family-primary);
	--adonis-font-weight-regular: var(--faradoran-theme-font-weight-regular);
	--adonis-font-weight-medium: var(--faradoran-theme-font-weight-medium);
	--adonis-font-weight-semibold: var(--faradoran-theme-font-weight-semibold);
	--adonis-font-weight-bold: var(--faradoran-theme-font-weight-bold);
	--adonis-font-size-display: var(--faradoran-theme-font-size-display);
	--adonis-font-size-h1: var(--faradoran-theme-font-size-h1);
	--adonis-font-size-h2: var(--faradoran-theme-font-size-h2);
	--adonis-font-size-h3: var(--faradoran-theme-font-size-h3);
	--adonis-font-size-h4: var(--faradoran-theme-font-size-h4);
	--adonis-font-size-body: var(--faradoran-theme-font-size-body);
	--adonis-font-size-sm: var(--faradoran-theme-font-size-sm);
	--adonis-font-size-xs: var(--faradoran-theme-font-size-xs);
	--adonis-line-height-base: var(--faradoran-theme-line-height-base);
	--adonis-line-height-heading: var(--faradoran-theme-line-height-heading);
	--adonis-line-height-tight: var(--faradoran-theme-line-height-tight);
	--adonis-letter-spacing-tight: var(--faradoran-theme-letter-spacing-tight);
	--adonis-letter-spacing-wide: var(--faradoran-theme-letter-spacing-wide);
	--adonis-space-1: var(--faradoran-theme-space-1);
	--adonis-space-2: var(--faradoran-theme-space-2);
	--adonis-space-3: var(--faradoran-theme-space-3);
	--adonis-space-4: var(--faradoran-theme-space-4);
	--adonis-space-5: var(--faradoran-theme-space-5);
	--adonis-space-6: var(--faradoran-theme-space-6);
	--adonis-space-8: var(--faradoran-theme-space-8);
	--adonis-space-10: var(--faradoran-theme-space-10);
	--adonis-space-12: var(--faradoran-theme-space-12);
	--adonis-space-16: var(--faradoran-theme-space-16);
	--adonis-space-20: var(--faradoran-theme-space-20);
	--adonis-space-24: var(--faradoran-theme-space-24);
	--adonis-layout-max-width: var(--faradoran-theme-layout-max-width);
	--adonis-layout-wide-width: var(--faradoran-theme-layout-wide-width);
	--adonis-layout-narrow-width: var(--faradoran-theme-layout-narrow-width);
	--adonis-layout-gutter: var(--faradoran-theme-layout-gutter);
	--adonis-layout-header-height: var(--faradoran-theme-layout-header-height);
	--adonis-layout-header-height-mobile: var(--faradoran-theme-layout-header-height-mobile);
	--adonis-layout-secondary-bar-height: var(--faradoran-theme-layout-secondary-bar-height);
	--adonis-layout-bottom-nav-height: var(--faradoran-theme-layout-bottom-nav-height);
	--adonis-layout-sticky-purchase-height: var(--faradoran-theme-layout-sticky-purchase-height);
	--adonis-layout-mobile-top-chrome: var(--faradoran-theme-layout-mobile-top-chrome);
	--adonis-layout-mobile-bottom-chrome: var(--faradoran-theme-layout-mobile-bottom-chrome);
	--adonis-safe-area-top: var(--faradoran-theme-safe-area-top);
	--adonis-safe-area-right: var(--faradoran-theme-safe-area-right);
	--adonis-safe-area-bottom: var(--faradoran-theme-safe-area-bottom);
	--adonis-safe-area-left: var(--faradoran-theme-safe-area-left);
	--adonis-safe-area-inline-start: var(--faradoran-theme-safe-area-inline-start);
	--adonis-safe-area-inline-end: var(--faradoran-theme-safe-area-inline-end);
	--adonis-bottom-ui-offset: var(--faradoran-theme-bottom-ui-offset);
	--adonis-floating-ui-offset: var(--faradoran-theme-floating-ui-offset);
	--adonis-section-space: var(--faradoran-theme-section-space);
	--adonis-radius-sm: var(--faradoran-theme-radius-sm);
	--adonis-radius-md: var(--faradoran-theme-radius-md);
	--adonis-radius-lg: var(--faradoran-theme-radius-lg);
	--adonis-shadow-sm: var(--faradoran-theme-shadow-sm);
	--adonis-shadow-md: var(--faradoran-theme-shadow-md);
	--adonis-border-width: var(--faradoran-theme-border-width);
	--adonis-motion-fast: var(--faradoran-theme-motion-fast);
	--adonis-motion-base: var(--faradoran-theme-motion-base);
	--adonis-motion-slow: var(--faradoran-theme-motion-slow);
	--adonis-easing-standard: var(--faradoran-theme-easing-standard);
	--adonis-z-base: var(--faradoran-theme-z-base);
	--adonis-z-promo-bar: var(--faradoran-theme-z-promo-bar);
	--adonis-z-floating: var(--faradoran-theme-z-floating);
	--adonis-z-sticky-purchase: var(--faradoran-theme-z-sticky-purchase);
	--adonis-z-header: var(--faradoran-theme-z-header);
	--adonis-z-bottom-nav: var(--faradoran-theme-z-bottom-nav);
	--adonis-z-header-dropdown: var(--faradoran-theme-z-header-dropdown);
	--adonis-z-overlay: var(--faradoran-theme-z-overlay);
	--adonis-z-panel: var(--faradoran-theme-z-panel);
	--adonis-z-lightbox: var(--faradoran-theme-z-lightbox);
	--adonis-z-sticky: var(--faradoran-theme-z-sticky);
	--adonis-control-min-height: var(--faradoran-theme-control-min-height);
	--adonis-touch-target: var(--faradoran-theme-touch-target);
}

/* Breakpoint reference:
   Phone: <48rem (30rem md for minor tuning)
   Tablet: 48rem–63.99rem
   Desktop: ≥64rem (80rem 2xl for wide grids) */

@media (min-width: 48rem) {
	:root {
		--faradoran-theme-layout-gutter: var(--faradoran-theme-space-6);
		--adonis-layout-gutter: var(--faradoran-theme-layout-gutter);
	}
}

@media (min-width: 64rem) {
	:root {
		--faradoran-theme-layout-gutter: var(--faradoran-theme-space-8);
		--adonis-layout-gutter: var(--faradoran-theme-layout-gutter);
	}
}

/*
 * Future mobile chrome shell states (not toggled by JS yet):
 * html.has-mobile-app-header
 * html.has-mobile-secondary-bar
 * html.has-mobile-bottom-nav (when MobileBottomNavPresentation renders)
 * body.has-mobile-sticky-purchase
 */
html.has-mobile-secondary-bar {
	--faradoran-theme-layout-secondary-bar-height: 2.75rem;
}

html.has-mobile-bottom-nav {
	--faradoran-theme-bottom-ui-offset: calc(
		var(--faradoran-theme-layout-bottom-nav-height) + var(--faradoran-theme-safe-area-bottom)
	);
	--faradoran-theme-floating-ui-offset: calc(
		var(--faradoran-theme-space-4) + var(--faradoran-theme-bottom-ui-offset)
	);
}
