/* ==========================================================================
   U&U Hosiery — design tokens
   The single source of truth for colour, type, spacing, motion and elevation.
   Nothing below this file should hard-code a hex value or a magic pixel size.
   ========================================================================== */

:root {
	/* --- Core palette -------------------------------------------------- */
	--u-cream: #F7F5F2;        /* page base */
	--u-cream-deep: #EFEAE2;   /* alternating section band */
	--u-cream-warm: #E9E2D6;   /* tiles, inputs on cream */
	--u-paper: #FFFFFF;        /* product plates, cards */

	--u-olive: #2E3B2C;        /* primary — charcoal olive */
	--u-olive-soft: #44543F;
	--u-olive-tint: #E6EAE3;
	--u-ink: #1C201A;          /* headings, deepest tone */

	--u-gold: #C9A24B;         /* accent — muted mustard gold */
	--u-gold-deep: #A8823A;
	--u-gold-soft: #E4CE9A;
	--u-gold-wash: #F3E9D2;

	--u-terracotta: #B4552F;   /* sale, urgency */
	--u-terracotta-soft: #F0DCD1;

	--u-muted: #656B60;        /* secondary text — 5.6:1 on cream */
	--u-muted-soft: #8A9084;   /* meta text only, never body copy */
	--u-line: #E1DCD2;         /* hairlines */
	--u-line-strong: #CFC8BA;

	--u-success: #3F6B45;
	--u-success-soft: #E3EDE3;

	/* Subtle section coding. Kept low-chroma on purpose — it should read as
	   "considered", never as a colour-coded filing cabinet. */
	--u-tone-men: #2E3B2C;
	--u-tone-women: #8C6A5D;
	--u-tone-islamic: #C9A24B;
	--u-tone-neutral: #6B7268;
	--u-tone-sale: #B4552F;

	/* --- Typography ---------------------------------------------------- */
	--u-font-display: "Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
	--u-font-head: Poppins, "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
	--u-font-body: Inter, "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

	--u-fs-hero: clamp(2.125rem, 1.35rem + 3.4vw, 3.5rem);   /* 34 → 56 */
	--u-fs-section: clamp(1.625rem, 1.3rem + 1.4vw, 2rem);   /* 26 → 32 */
	--u-fs-sub: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);  /* 18 → 22 */
	--u-fs-price: 1.1875rem;  /* 19 */
	--u-fs-name: 1.0625rem;   /* 17 */
	--u-fs-body: 1rem;        /* 16 */
	--u-fs-sm: 0.875rem;      /* 14 — smallest body-adjacent size */
	--u-fs-xs: 0.75rem;       /* 12 — badges and eyebrows only, uppercase + tracked */

	--u-lh-tight: 1.15;
	--u-lh-snug: 1.35;
	--u-lh-body: 1.65;

	--u-track-eyebrow: 0.16em;
	--u-track-button: 0.03em;

	/* --- Spacing ------------------------------------------------------- */
	--u-s1: 0.25rem;
	--u-s2: 0.5rem;
	--u-s3: 0.75rem;
	--u-s4: 1rem;
	--u-s5: 1.5rem;
	--u-s6: 2rem;
	--u-s7: 2.5rem;
	--u-s8: 3rem;
	--u-s9: 4rem;

	/* Vertical rhythm between homepage sections: 48–64 mobile, 80–120 desktop. */
	--u-section-y: clamp(3rem, 1.4rem + 7vw, 6.5rem);
	--u-section-y-lg: clamp(4rem, 1.6rem + 9vw, 7.5rem);

	--u-gutter: clamp(1rem, 4vw, 2.5rem);
	--u-maxw: 1280px;
	--u-maxw-narrow: 760px;

	/* --- Shape --------------------------------------------------------- */
	/* Deliberately near-square. Heavily rounded corners are the single biggest
	   tell of a default template; a 2–3px radius reads as considered retail. */
	--u-r-xs: 2px;
	--u-r-sm: 3px;
	--u-r-md: 4px;
	--u-r-pill: 999px;

	--u-border: 1px solid var(--u-line);
	--u-border-strong: 1px solid var(--u-line-strong);

	/* --- Elevation — warm-tinted, never neutral grey ------------------- */
	--u-shadow-sm: 0 1px 2px rgba(28, 32, 26, 0.05);
	--u-shadow-md: 0 4px 16px rgba(28, 32, 26, 0.07);
	--u-shadow-lg: 0 18px 48px rgba(28, 32, 26, 0.13);
	--u-shadow-drawer: -18px 0 48px rgba(28, 32, 26, 0.18);

	/* --- Motion -------------------------------------------------------- */
	--u-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--u-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--u-t-fast: 140ms;
	--u-t: 240ms;
	--u-t-slow: 420ms;

	/* --- Layers -------------------------------------------------------- */
	--u-z-header: 200;
	--u-z-mega: 210;
	--u-z-float: 300;
	--u-z-overlay: 400;
	--u-z-drawer: 410;
	--u-z-modal: 500;
	--u-z-toast: 600;

	/* --- Component metrics --------------------------------------------- */
	--u-header-h: 68px;
	--u-announce-h: 38px;
	--u-card-ratio: 4 / 5;
}

@media (min-width: 900px) {
	:root {
		--u-header-h: 80px;
	}
}

/* Honour the OS reduced-motion preference everywhere, including our carousels. */
@media (prefers-reduced-motion: reduce) {
	:root {
		--u-t-fast: 1ms;
		--u-t: 1ms;
		--u-t-slow: 1ms;
	}
}