/**
 * Commerce Storefront design foundation.
 *
 * CSS custom properties are the runtime source of truth. Properties prefixed
 * with --_commerce are internal primitives; documented --commerce properties
 * are the child-theme contract.
 */

@font-face {
	font-family: "DM Sans";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../vendor/sleek-adapted/controls/fonts/dm-sans-400.woff2") format("woff2");
}

@font-face {
	font-family: "DM Sans";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../vendor/sleek-adapted/controls/fonts/dm-sans-500.woff2") format("woff2");
}

@font-face {
	font-family: "DM Sans";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../vendor/sleek-adapted/controls/fonts/dm-sans-700.woff2") format("woff2");
}

:root {
	/* Internal primitives: source-derived and not part of the child API. */
	--_commerce-space-0: 0;
	--_commerce-space-2xs: 0.25rem;
	--_commerce-space-xs: 0.5rem;
	--_commerce-space-sm: 0.75rem;
	--_commerce-space-md: 1rem;
	--_commerce-space-lg: 1.25rem;
	--_commerce-space-xl: 1.5rem;
	--_commerce-space-2xl: 1.875rem;
	--_commerce-space-3xl: 2.5rem;
	--_commerce-space-4xl: 3rem;
	--_commerce-space-5xl: 3.75rem;
	--_commerce-space-6xl: 5rem;
	--_commerce-breakpoint-xs: 30rem;
	--_commerce-breakpoint-sm: 48rem;
	--_commerce-breakpoint-md: 64rem;
	--_commerce-breakpoint-lg: 96rem;
	--_commerce-radius-none: 0;
	--_commerce-radius-subtle: 0.3125rem;
	--_commerce-radius-standard: 0.375rem;
	--_commerce-radius-large: 1.25rem;
	--_commerce-radius-pill: 999px;
	--_commerce-shadow-flat: none;
	--_commerce-shadow-card: none;
	--_commerce-shadow-raised: 0 0.25rem 1.125rem rgb(0 0 0 / 10%);
	--_commerce-shadow-sticky: 0 0.25rem 1.125rem rgb(0 0 0 / 10%);
	--_commerce-shadow-drawer: -1rem 0 2.5rem rgb(0 0 0 / 14%);

	/* Public semantic colors. */
	--commerce-color-text: #000000;
	--commerce-color-muted: #5f5f5f;
	--commerce-color-subtle: #737373;
	--commerce-color-text-inverse: #ffffff;
	--commerce-color-canvas: #ffffff;
	--commerce-color-background: var(--commerce-color-canvas);
	--commerce-color-surface: #f6f6f6;
	--commerce-color-surface-subtle: #f7f7f7;
	--commerce-color-surface-raised: #ffffff;
	--commerce-color-header-background: #ffffff;
	--commerce-color-border: #e6e6e6;
	--commerce-color-border-strong: #a5a5a5;
	--commerce-color-action: #000000;
	--commerce-color-on-action: #ffffff;
	--commerce-color-action-hover: #242424;
	--commerce-color-action-pressed: #111111;
	--commerce-color-action-secondary: #e9e9e9;
	--commerce-color-on-action-secondary: #000000;
	--commerce-color-action-secondary-hover: #dddddd;
	--commerce-color-action-secondary-pressed: #cecece;
	--commerce-color-field: #f5f5f5;
	--commerce-color-field-text: #000000;
	--commerce-color-field-placeholder: #737373;
	--commerce-color-field-border: #e6e6e6;
	--commerce-color-field-focus: #000000;
	--commerce-color-focus: #000000;
	--commerce-color-disabled: #e9e9e9;
	--commerce-color-on-disabled: #666666;
	--commerce-color-success: #0c5132;
	--commerce-color-on-success: #ffffff;
	--commerce-color-success-border: #7aa990;
	--commerce-color-success-surface: #edf8f1;
	--commerce-color-warning: #694600;
	--commerce-color-on-warning: #000000;
	--commerce-color-warning-border: #b5852b;
	--commerce-color-warning-surface: #fff7e6;
	--commerce-color-danger: #8c1d18;
	--commerce-color-on-danger: #ffffff;
	--commerce-color-danger-border: #bd5b54;
	--commerce-color-danger-surface: #fff2f1;
	--commerce-color-overlay: rgb(0 0 0 / 50%);
	--commerce-color-scrim: rgb(0 0 0 / 72%);

	/* Public typography roles. DM Sans is a replaceable neutral default. */
	--commerce-font-body: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--commerce-font-heading: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--commerce-font-weight-body: 400;
	--commerce-font-weight-heading: 500;
	--commerce-font-weight-strong: 500;
	--commerce-line-height-body: 1.625;
	--commerce-line-height-heading: 1.08;
	--commerce-letter-spacing-heading: -0.04em;
	--commerce-letter-spacing-eyebrow: 0;
	--commerce-letter-spacing-button: 0;
	--commerce-text-xs: 0.8125rem;
	--commerce-text-sm: 0.875rem;
	--commerce-text-md: 1rem;
	--commerce-text-lg: 1.125rem;
	--commerce-heading-xs: 1.125rem;
	--commerce-heading-sm: clamp(1.6rem, 1.37rem + 0.72vw, 2rem);
	--commerce-heading-md: clamp(2rem, 1.54rem + 1.43vw, 2.8rem);
	--commerce-heading-lg: clamp(2.5rem, 1.65rem + 2.68vw, 4rem);
	--commerce-heading-display: clamp(3rem, 1.3rem + 5.36vw, 6rem);

	/* Public layout roles. */
	--commerce-container-prose: 58.125rem;
	--commerce-container-content: 75rem;
	--commerce-container-wide: 88.125rem;
	--commerce-page-gutter: 0.9375rem;
	--commerce-space-section-compact: 3rem;
	--commerce-space-section: 3rem;
	--commerce-space-section-spacious: 3.75rem;
	--commerce-space-component: var(--_commerce-space-lg);
	--commerce-grid-gap-small: var(--_commerce-space-md);
	--commerce-grid-gap: var(--_commerce-space-xl);
	--commerce-grid-gap-large: var(--_commerce-space-2xl);
	--commerce-brand-logo-inline-size: min(13rem, 36vw);
	--commerce-brand-logo-inline-size-mobile: min(10.5rem, 46vw);
	--commerce-brand-logo-block-size: 3rem;
	--commerce-brand-logo-block-size-mobile: 3rem;

	/* Public brand geometry. */
	--commerce-radius-control: 1.5rem;
	--commerce-radius-surface: var(--_commerce-radius-large);
	--commerce-radius-card: var(--_commerce-radius-large);
	--commerce-radius-media: var(--_commerce-radius-large);
	--commerce-radius-badge: var(--_commerce-radius-subtle);
	--commerce-shadow-card: var(--_commerce-shadow-card);
	--commerce-shadow-raised: var(--_commerce-shadow-raised);
	--commerce-shadow-sticky: var(--_commerce-shadow-sticky);
	--commerce-shadow-header: var(--_commerce-shadow-sticky);
	--commerce-shadow-drawer: var(--_commerce-shadow-drawer);
	--commerce-shadow-drawer-reverse: 1rem 0 2.5rem rgb(0 0 0 / 14%);
	--commerce-hero-scrim-start: rgba(247, 244, 237, 0.98);
	--commerce-hero-scrim-middle: rgba(247, 244, 237, 0.92);
	--commerce-hero-scrim-end: rgba(247, 244, 237, 0.1);

	/* Invariant control and layer roles. */
	/* Keep the WCAG target independent from any imported root font size. */
	--commerce-touch-target: 44px;
	--commerce-control-compact: 2.5rem;
	--commerce-control-standard: 3rem;
	--commerce-control-large: 3.375rem;
	--commerce-button-height: 3rem;
	--commerce-button-padding-inline: 2.5rem;
	--commerce-field-padding-inline: 1rem;
	--commerce-border-width: 1px;
	--commerce-line-subtle: var(--commerce-border-width) solid var(--commerce-color-border);
	--commerce-line-strong: var(--commerce-border-width) solid var(--commerce-color-border-strong);
	--commerce-focus-ring-width: 2px;
	--commerce-focus-ring-offset: 3px;
	--commerce-icon-small: 1rem;
	--commerce-icon-standard: 1.25rem;
	--commerce-icon-large: 1.5rem;
	--commerce-icon-stroke: 1.5;
	--commerce-layer-base: 0;
	--commerce-layer-raised: 10;
	--commerce-layer-sticky: 100;
	--commerce-layer-dropdown: 200;
	--commerce-layer-overlay: 1000;
	--commerce-layer-toast: 1100;
	--commerce-layer-skip-link: 1200;

}

[data-commerce-scheme="inverse"] {
	--commerce-color-text: #ffffff;
	--commerce-color-muted: #d2d2cc;
	--commerce-color-subtle: #b8b8b1;
	--commerce-color-text-inverse: #1d1d1b;
	--commerce-color-canvas: #171715;
	--commerce-color-background: #171715;
	--commerce-color-surface: #252522;
	--commerce-color-surface-subtle: #20201e;
	--commerce-color-surface-raised: #30302c;
	--commerce-color-header-background: #171715;
	--commerce-color-border: #4e4e48;
	--commerce-color-border-strong: #8a8a82;
	--commerce-color-action: #ffffff;
	--commerce-color-on-action: #171715;
	--commerce-color-action-hover: #e9e9e4;
	--commerce-color-action-pressed: #d5d5cf;
	--commerce-color-action-secondary: #353531;
	--commerce-color-on-action-secondary: #ffffff;
	--commerce-color-action-secondary-hover: #44443f;
	--commerce-color-action-secondary-pressed: #50504a;
	--commerce-color-field: #252522;
	--commerce-color-field-text: #ffffff;
	--commerce-color-field-placeholder: #b8b8b1;
	--commerce-color-field-border: #8a8a82;
	--commerce-color-field-focus: #ffffff;
	--commerce-color-focus: #ffffff;
	--commerce-color-disabled: #3b3b37;
	--commerce-color-on-disabled: #aaa9a2;
	--commerce-color-success: #8ee0b5;
	--commerce-color-success-border: #58a87b;
	--commerce-color-success-surface: #203a2b;
	--commerce-color-warning: #ffd27a;
	--commerce-color-warning-border: #b78a36;
	--commerce-color-warning-surface: #3b301b;
	--commerce-color-danger: #ffaaa2;
	--commerce-color-danger-border: #c86a62;
	--commerce-color-danger-surface: #452421;
}

@media (min-width: 48rem) {
	:root {
		--commerce-space-section-compact: 3.75rem;
		--commerce-space-section: 3.75rem;
	}
}

@media (min-width: 75rem) {
	:root {
		--commerce-page-gutter: 3.125rem;
		--commerce-space-section: 5rem;
		--commerce-space-section-spacious: 6rem;
	}
}

@media (min-width: 96rem) {
	:root {
		--commerce-page-gutter: max(8.4375rem, calc(50vw - (var(--commerce-container-wide) / 2)));
	}
}

/**
 * Neutral layout and type roles. These utilities are progressive: existing
 * surfaces adopt them one commit at a time.
 */
.commerce-container {
	width: min(calc(100% - (2 * var(--commerce-page-gutter))), var(--commerce-container-content));
	margin-inline: auto;
}

.commerce-container--prose {
	max-width: var(--commerce-container-prose);
}

.commerce-container--wide {
	width: min(calc(100% - (2 * var(--commerce-page-gutter))), var(--commerce-container-wide));
}

.commerce-section {
	padding-block: var(--commerce-space-section);
}

.commerce-section--compact {
	padding-block: var(--commerce-space-section-compact);
}

.commerce-section--spacious {
	padding-block: var(--commerce-space-section-spacious);
}

.commerce-grid {
	display: grid;
	gap: var(--commerce-grid-gap);
}

.commerce-grid--1 { grid-template-columns: minmax(0, 1fr); }
.commerce-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.commerce-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.commerce-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.commerce-grid--large { gap: var(--commerce-grid-gap-large); }

.commerce-type-body {
	font-family: var(--commerce-font-body);
	font-size: var(--commerce-text-md);
	font-weight: var(--commerce-font-weight-body);
	line-height: var(--commerce-line-height-body);
}

.commerce-type-heading {
	font-family: var(--commerce-font-heading);
	font-size: var(--commerce-heading-md);
	font-weight: var(--commerce-font-weight-heading);
	letter-spacing: var(--commerce-letter-spacing-heading);
	line-height: var(--commerce-line-height-heading);
}

.commerce-type-heading--small { font-size: var(--commerce-heading-sm); }
.commerce-type-heading--large { font-size: var(--commerce-heading-lg); }

.commerce-type-display {
	font-family: var(--commerce-font-heading);
	font-size: var(--commerce-heading-display);
	font-weight: var(--commerce-font-weight-heading);
	letter-spacing: var(--commerce-letter-spacing-heading);
	line-height: var(--commerce-line-height-heading);
}

.commerce-type-eyebrow {
	font-family: var(--commerce-font-body);
	font-size: var(--commerce-text-sm);
	font-weight: var(--commerce-font-weight-strong);
	letter-spacing: var(--commerce-letter-spacing-eyebrow);
	line-height: var(--commerce-line-height-body);
	text-transform: uppercase;
}

@media (max-width: 63.999rem) {
	.commerce-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 47.999rem) {
	.commerce-grid--2,
	.commerce-grid--3,
	.commerce-grid--4 { grid-template-columns: minmax(0, 1fr); }
}