/* Blocksy: mobile <= 689.98px, tablet <= 999.98px, desktop >= 1000px.
 * Custom properties cannot be used in native media query conditions. */
:root {
	--container-max: 1400px;
	--container-gutter: 40px;
	--container-gutter-compact: 24px;
	--container-gutter-mobile: 12px;

	--space-0: 0;
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.25rem;
	--space-6: 1.5rem;
	--space-7: 2rem;
	--space-8: 2.5rem;
	--space-9: 3rem;
	--space-10: 4rem;
	--space-11: 5rem;
	--space-12: 6rem;

	--shop-sticky-panel-top: calc(var(--shop-header-offset, 162px) + var(--space-4));

	--fs-2xs: 0.6875rem;
	--fs-xs: 0.75rem;
	--fs-compact: 0.8125rem;
	--fs-sm: 0.875rem;
	--fs-base: 1rem;
	--fs-md: 0.9375rem;
	--fs-lg: 1.125rem;
	--fs-xl: 1.25rem;
	--fs-2xl: 1.5rem;
	--fs-3xl: 1.75rem;
	--fs-4xl: 2rem;
	--fs-display: clamp(2rem, 1.5rem + 2vw, 2.875rem);

	--fs-h1: 2.25rem;
	--fs-h2: 1.75rem;
	--fs-h3: 1.5rem;
	--fs-h4: 1.25rem;
	--fs-h5: 1.125rem;
	--fs-h6: 1rem;

	--fs-body: var(--fs-base);
	--fs-quote: var(--fs-base);
	--fs-excerpt: var(--fs-base);
	--fs-code: var(--fs-base);
	--fs-caption: var(--fs-sm);

	--fs-price: 1.25rem;
	--fs-badge: var(--fs-sm);
	--fs-card-title: 1rem;
	--fs-button: 0.9375rem;
	--fs-input: 1rem;

	--radius-xs: 4px;
	--radius-sm: 0.375rem;
	--radius-compact-sm: 5px;
	--radius-compact: 8px;
	--radius-md: 0.625rem;
	--radius-lg: 0.875rem;
	--radius-xl: 1rem;
	--radius-pill: 9999px;
	--radius-card: 12px;

	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;

	--lh-tight: 1.1;
	--lh-snug: 1.3;
	--lh-normal: 1.45;
	--lh-relaxed: 1.6;

	--control-sm: 36px;
	--control-md: 42px;
	--control-touch: 44px;
	--control-lg: 48px;

	--input-height: 46px;

	/* Storefront actions. The catalog filters keep their own density. */
	--action-size-compact: 32px;
	--action-size-icon: 36px;
	--action-size-standard: 40px;
	--action-size-primary: 42px;
	--action-size-purchase: 48px;
	--action-size-field: 44px;

	--transition-fast: 150ms ease;
	--transition-base: 200ms ease;
	--transition-slow: 250ms ease;

	--color-star: #f5a623;

	--leading-heading: 1.25;
	--leading-ui: 1.4;
	--leading-body: 1.6;
	--tracking-normal: 0;
	--body-size: var(--fs-base);
	--body-weight: var(--fw-regular);
	--heading-weight: var(--fw-semibold);
	--prose-measure: 70ch;

	--icon-sm: 1rem;
	--icon-md: 1.25rem;
	--icon-lg: 1.5rem;

	--border-width: 1px;
	--focus-width: 2px;
	--focus-offset: 3px;
	--focus-offset-tight: 2px;

	--shadow-sm: 0 1px 3px rgb(0 0 0 / 6%);
	--shadow-md: 0 0.25rem 1rem rgb(0 0 0 / 8%);
	--shadow-lg: 0 0.75rem 2rem rgb(0 0 0 / 12%);

	--z-base: 0;
	--z-raised: 1;
	--z-sticky: 20;
	--z-dropdown: 30;
	--z-overlay: 40;
	--z-dialog: 50;
	--z-toast: 60;
	/* Keep storefront overlays above the theme layers. */
	--z-purchase: 990;
	--z-feedback: 10000;
	--z-cookie: 999999;

	--duration-fast: 120ms;
	--duration-base: 180ms;
	--duration-slow: 240ms;
	--ease: ease;

	--container-narrow: 760px;

	--gap-section: var(--space-10);
	--gap-heading: var(--space-5);
}

@media (max-width: 999.98px) {
	:root {
		--gap-section: var(--space-8);
		--action-size-compact: 34px;
		--action-size-icon: 38px;
	}
}

@media (max-width: 689.98px) {
	:root {
		--gap-section: var(--space-6);
		--gap-heading: var(--space-4);
		--action-size-compact: 32px;
		--action-size-icon: 36px;
		--action-size-standard: 38px;
		--action-size-primary: 40px;
		--action-size-purchase: 46px;
		--action-size-field: 42px;
	}
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--duration-fast: 0ms;
		--duration-base: 0ms;
		--duration-slow: 0ms;
	}
}