/**
 * Design tokens.
 *
 * The compiled design system in base.css is driven entirely by custom
 * properties. These values are ported from the original static templates so the
 * theme keeps the exact same colour, typography and spacing scale.
 */

:root {
	/* Colours */
	--heading-color: 34, 45, 101;
	--text-color: 26, 26, 26;
	--background: 255, 255, 255;
	--secondary-background: 245, 241, 236;
	--border-color: 221, 221, 221;
	--border-color-darker: 163, 163, 163;
	--success-color: 46, 158, 123;
	--success-background: 213, 236, 229;
	--error-color: 222, 42, 42;
	--error-background: 253, 240, 240;
	--primary-button-background: 86, 17, 42;
	--primary-button-text-color: 255, 255, 255;
	--secondary-button-background: 247, 174, 166;
	--secondary-button-text-color: 86, 17, 42;
	--product-star-rating: 246, 164, 41;
	--product-on-sale-accent: 145, 59, 89;
	--product-sold-out-accent: 111, 113, 155;
	--product-custom-label-background: 64, 93, 230;
	--product-custom-label-text-color: 255, 255, 255;
	--product-custom-label-2-background: 243, 229, 182;
	--product-custom-label-2-text-color: 0, 0, 0;
	--product-low-stock-text-color: 222, 42, 42;
	--product-in-stock-text-color: 46, 158, 123;
	--loading-bar-background: 26, 26, 26;

	/* Root duplicates (used inside drawers / popovers) */
	--root-heading-color: 34, 45, 101;
	--root-text-color: 26, 26, 26;
	--root-background: 255, 255, 255;
	--root-border-color: 221, 221, 221;
	--root-primary-button-background: 86, 17, 42;
	--root-primary-button-text-color: 255, 255, 255;

	/* Typography */
	--base-font-size: 16px;
	--heading-font-family: Poppins, "Helvetica Neue", Arial, sans-serif;
	--heading-font-weight: 600;
	--heading-font-style: normal;
	--heading-text-transform: normal;
	--text-font-family: Poppins, "Helvetica Neue", Arial, sans-serif;
	--text-font-weight: 400;
	--text-font-style: normal;
	--text-font-bold-weight: 600;

	--heading-xxsmall-font-size: 11px;
	--heading-xsmall-font-size: 11px;
	--heading-small-font-size: 13px;
	--heading-large-font-size: 40px;
	--heading-h1-font-size: 40px;
	--heading-h2-font-size: 32px;
	--heading-h3-font-size: 28px;
	--heading-h4-font-size: 26px;
	--heading-h5-font-size: 22px;
	--heading-h6-font-size: 18px;

	/* Surfaces */
	--button-border-radius: 4px;
	--block-border-radius: 8px;
	--block-border-radius-reduced: 4px;
	--color-swatch-border-radius: 100%;

	/* Buttons */
	--button-height: 48px;
	--button-small-height: 40px;

	/* Forms */
	--form-input-field-height: 48px;
	--form-input-gap: 16px;
	--form-submit-margin: 24px;

	/* Product listing */
	--product-list-block-spacing: 32px;

	/* Media */
	--play-button-background: 255, 255, 255;
	--play-button-arrow: 26, 26, 26;

	/* RTL */
	--transform-logical-flip: 1;
	--transform-origin-start: left;
	--transform-origin-end: right;

	/* Icons (local data URIs so the theme is self contained) */
	--arrow-right-svg-url: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M1 7h11M8 3l4 4-4 4' fill='none' stroke='%231a1a1a' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--arrow-left-svg-url: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M13 7H2m4-4L2 7l4 4' fill='none' stroke='%231a1a1a' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--zoom-cursor-svg-url: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='11' cy='11' r='6' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3Cpath d='M15.5 15.5L20 20' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");

	/* Layout */
	--container-max-width: 1600px;
	--container-gutter: 24px;
	--container-max-width-minus-gutters: calc(var(--container-max-width) - (var(--container-gutter)) * 2);
	--container-outer-width: max(calc((100vw - var(--container-max-width-minus-gutters)) / 2), var(--container-gutter));
	--container-outer-margin: var(--container-outer-width);
	--container-inner-width: calc(100vw - var(--container-outer-width) * 2);

	--grid-column-count: 10;
	--grid-gap: 24px;
	--grid-column-width: calc((100vw - var(--container-outer-width) * 2 - var(--grid-gap) * (var(--grid-column-count) - 1)) / var(--grid-column-count));

	--vertical-breather: 36px;
	--vertical-breather-tight: 36px;
	--anchor-offset: 140px;

	/* Header */
	--enable-sticky-announcement-bar: 0;
	--enable-sticky-header: 1;
	--enable-transparent-header: 0;
	--header-background: 255, 255, 255;
	--header-text-color: 0, 75, 113;
	--header-border-color: 217, 228, 234;
	--reduce-header-padding: 1;

	/* Sections use a white surface by default; the announcement bar and a few
	   accents override this locally. */
	--section-background: 255, 255, 255;

	/* Sections */
	--progress-bar-color: 255, 255, 255;
	--section-autoplay-duration: 5s;
	--section-animation-play-state: paused;
	--section-blocks-alignment: center;
	--section-blocks-overlay-color: 0, 0, 0;
	--section-blocks-overlay-opacity: 0;
	--section-logo-background: 0 0 0 / 0;
	--section-logo-count: 4;
	--section-collage-column: 2;
	--section-block-overlay: 0, 0, 0;
	--section-block-overlay-opacity: 0;
	--section-products-per-row: 2;
	--section-accent-background: 0 0 0 / 0;
	--section-items-alignment: center;
	--section-overlay-color: 0, 0, 0;
	--section-overlay-opacity: 0.3;
	--prev-next-button-background: 255, 255, 255;
	--prev-next-button-color: 26, 26, 26;

	/* Shopify leftovers kept for compatibility with base.css */
	--payment-terms-background-color: #ffffff;
}

@media screen and (min-width: 741px) {
	:root {
		--container-gutter: 40px;
		--grid-column-count: 20;
		--vertical-breather: 48px;
		--vertical-breather-tight: 48px;

		--heading-xsmall-font-size: 13px;
		--heading-small-font-size: 14px;
		--heading-large-font-size: 58px;
		--heading-h1-font-size: 58px;
		--heading-h2-font-size: 44px;
		--heading-h3-font-size: 36px;
		--heading-h4-font-size: 28px;
		--heading-h5-font-size: 22px;
		--heading-h6-font-size: 20px;

		--form-input-field-height: 52px;
		--form-submit-margin: 32px;

		--button-height: 52px;
		--button-small-height: 44px;
	}
}

@media screen and (min-width: 1200px) {
	:root {
		--vertical-breather: 64px;
		--vertical-breather-tight: 48px;
		--product-list-block-spacing: 48px;

		--heading-large-font-size: 72px;
		--heading-h1-font-size: 62px;
		--heading-h2-font-size: 54px;
		--heading-h3-font-size: 40px;
		--heading-h4-font-size: 34px;
		--heading-h5-font-size: 26px;
		--heading-h6-font-size: 18px;
	}
}

@media screen and (min-width: 1600px) {
	:root {
		--vertical-breather: 64px;
		--vertical-breather-tight: 48px;
	}
}