/*
 * Design tokens.
 *
 * Values marked [ref] were read from the reference site's published CSS during the audit
 * (Prestige theme variables and its custom header stylesheet). Values marked [derived]
 * are our own choices to complete the scale and should be checked visually.
 */

:root {
	/* Colour — neutrals */
	--qilaada-color-white: #fff;                      /* [ref] --color-bg-default */
	--qilaada-color-ink: #1c1c1c;                     /* [ref] primary button / text */
	--qilaada-color-text: #1c1b1b;                    /* [ref] --color-black-80, nav links */
	--qilaada-color-black: #000;                      /* [ref] */
	--qilaada-color-muted: #7c7977;                   /* [ref] --color-gray-60 */
	--qilaada-color-muted-strong: #2d2d2d;            /* [ref] --color-gray-80 */
	--qilaada-color-gray-50: #848484;                 /* [ref] */
	--qilaada-color-gray-20: #e8e8e8;                 /* [ref] */
	--qilaada-color-gray-10: #efefef;                 /* [ref] sold-out badge background */

	/* Colour — warm accents */
	--qilaada-color-beige-60: #f1ede2;                /* [ref] announcement bar */
	--qilaada-color-beige-50: #f8f3ef;                /* [ref] */
	--qilaada-color-sand: #f7f1ed;                    /* [ref] section background scheme */
	--qilaada-color-tile: #f8f5f1;                    /* [derived] product/category tile, sampled from reference screenshots */
	--qilaada-color-footer: #f3efe8;                  /* [derived] footer band, sampled from reference screenshots */
	--qilaada-color-tan: #a78c72;                     /* [ref] rgb(167 140 114) scheme */
	--qilaada-color-tan-border: #927b65;              /* [ref] rgb(146 123 101) */
	--qilaada-color-accent: #9b3a35;                  /* [ref] benefits icons, sampled from reference screenshots */
	--qilaada-color-press: #140c0c;
	--qilaada-color-placeholder: #ebe5dc;          /* [derived] image areas still waiting for a photograph */                   /* [ref] "As featured in" band, sampled */
	--qilaada-color-placeholder-soft: #f4f0e9;        /* [derived] homepage empty product and category slots (the design's tiles are #fdfbf7) */

	/* Colour — borders */
	--qilaada-color-border: #ddd;                     /* [ref] rgb(221 221 221) */
	--qilaada-color-border-warm: #d6d1ce;             /* [ref] rgb(214 209 206) */
	--qilaada-color-border-light: #cfcfcf;            /* [ref] rgb(207 207 207) */
	--qilaada-header-hairline: rgb(28 27 27 / 0.15);  /* [ref] header inset shadow */

	/* Colour — status */
	--qilaada-color-sale: #e32c2b;                    /* [ref] on-sale badge/text */
	--qilaada-color-sold-out-bg: #efefef;             /* [ref] */
	--qilaada-color-sold-out-text: rgb(0 0 0 / 0.65); /* [ref] */
	--qilaada-color-success-bg: #d4e3cb;              /* [ref] */
	--qilaada-color-success-text: #307a07;            /* [ref] */
	--qilaada-color-error-bg: #f3cccc;                /* [ref] */
	--qilaada-color-error-text: #cb2b2b;              /* [ref] */
	--qilaada-overlay: rgb(0 0 0 / 0.4);              /* [ref] --page-overlay (drawers) */

	/* Typography — families */
	--qilaada-font-heading: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--qilaada-font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Typography — scale (rem) */
	--qilaada-text-xs: 0.75rem;                       /* [ref] */
	--qilaada-text-sm: 0.8125rem;                     /* [ref] */
	--qilaada-text-base: 0.875rem;                    /* [ref] 14px body */
	--qilaada-text-lg: 1rem;                          /* [ref] */
	--qilaada-text-xl: 1.125rem;                      /* [ref] */
	--qilaada-text-2xl: 1.25rem;                      /* [ref] */
	--qilaada-text-h6: 0.75rem;                       /* [ref] */
	--qilaada-text-h5: 0.875rem;                      /* [ref] */
	--qilaada-text-h4: 1rem;                          /* [derived] */
	--qilaada-text-h3: 1.25rem;                       /* [derived] */
	--qilaada-text-h2: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);  /* [derived] */
	--qilaada-text-h1: clamp(1.625rem, 1.2rem + 1.6vw, 2.25rem); /* [derived] */
	--qilaada-text-section: 1.125rem;                 /* [ref] homepage section titles: 18px phones, 26px desktop (below) */
	--qilaada-section-tracking: 0.07em;               /* [ref] 1.25px at 18px; 0.1em on desktop */

	/* Typography — treatment */
	--qilaada-heading-weight: 400;                    /* [ref] */
	--qilaada-heading-tracking: 0.14em;               /* [ref] */
	--qilaada-heading-transform: uppercase;           /* [ref] */
	--qilaada-body-weight: 400;                       /* [ref] */
	--qilaada-body-line-height: 1.7;                  /* [ref] nav line-height 170% */
	--qilaada-nav-tracking: 0.04em;                   /* [ref] letter-spacing 4% */
	--qilaada-promo-tracking: 0.105em;                /* [ref] 1.68px at 12px */

	/* Buttons and inputs */
	--qilaada-button-radius: 0.25rem;                 /* [ref] */
	--qilaada-button-tracking: 0.18em;                /* [ref] */
	--qilaada-button-transform: uppercase;            /* [ref] */
	--qilaada-button-padding-block: 0.875rem;         /* [derived] */
	--qilaada-button-height: 2.75rem;                 /* [ref] 44px */
	--qilaada-button-size: 0.8125rem;                 /* [ref] 13px */
	--qilaada-button-padding-inline: 1.75rem;         /* [derived] */
	--qilaada-input-radius: 0;                        /* [ref] */
	--qilaada-input-padding-block: 0.65rem;           /* [ref] */
	--qilaada-input-padding-inline: 0.8rem;           /* [ref] */

	/* Layout — containers */
	--qilaada-container-xxs: 27.5rem;                 /* [ref] */
	--qilaada-container-xs: 42.5rem;                  /* [ref] */
	--qilaada-container-sm: 61.25rem;                 /* [ref] */
	--qilaada-container-md: 71.875rem;                /* [ref] */
	--qilaada-container-lg: 78.75rem;                 /* [ref] */
	--qilaada-container-xl: 85rem;                    /* [ref] */
	--qilaada-container-page: 100rem;                 /* [ref] full-width pages keep 48px gutters at 1440px (logo, grid and footer at x=48) */
	--qilaada-gutter: 1rem;                           /* [ref] 16px on phones (section titles at x=16); overridden below */

	/* Layout — spacing */
	--qilaada-section-spacing: 2rem;                  /* [ref] mobile; overridden below */
	--qilaada-home-gap: 3rem;                         /* [ref] 48px between homepage sections on phones; 100px on desktop */
	--qilaada-stack-gap: 1.5rem;                      /* [ref] mobile; overridden below */
	--qilaada-space-1: 0.25rem;                       /* [derived] 4px base scale */
	--qilaada-space-2: 0.5rem;
	--qilaada-space-3: 0.75rem;
	--qilaada-space-4: 1rem;
	--qilaada-space-5: 1.25rem;
	--qilaada-space-6: 1.5rem;
	--qilaada-space-8: 2rem;
	--qilaada-space-12: 3rem;

	/* Header */
	--qilaada-promo-height: 2.5rem;                   /* [ref] */
	--qilaada-header-height: 5.0625rem;               /* [ref] 81px */
	--qilaada-logo-width: 11.9375rem;                 /* [ref] 191px */

	/* Media */
	--qilaada-ratio-product: 2 / 3;                   /* [ref] 219x328 tiles; Customizer can switch to 1 / 1 for square packshots */
	--qilaada-ratio-look: 3 / 4;                      /* [ref] 446x611 "Shop the look" images */

	/* Motion */
	--qilaada-ease: ease-out;                         /* [ref] */
	--qilaada-duration: 0.26s;                        /* [ref] nav underline + dropdown */

	/* Layering [derived] */
	--qilaada-z-header: 20;                           /* [ref] */
	--qilaada-z-drawer: 40;
	--qilaada-z-overlay: 30;
}

/* Breakpoints [ref]: 640px (tablet) and 1024px (desktop). */
@media (min-width: 640px) {
	:root {
		--qilaada-gutter: 2rem;
	}
}

@media (min-width: 1024px) {
	:root {
		--qilaada-gutter: 3rem;
		--qilaada-section-spacing: 3rem;
		--qilaada-stack-gap: 2.25rem;
		--qilaada-home-gap: 6.25rem;
		--qilaada-text-section: 1.625rem;
		--qilaada-section-tracking: 0.1em;
	}
}