/* IRENNE design tokens.
   Source: IRENNE Figma exports (screenshots). Font families are PLACEHOLDERS
   until the exact families arrive from the design file — swap only here. */
:root {
	/* Color */
	--ir-bg: #ffffff;
	--ir-bg-soft: #f6f6f6;      /* card/placeholder grey from design */
	--ir-text: #111111;
	--ir-text-muted: #6f6f6f;   /* prices under names, secondary labels */
	--ir-border: #e3e3e3;
	--ir-dark: #000000;         /* ticker bar, primary buttons */
	--ir-on-dark: #ffffff;
	--ir-sale: #e0201c;         /* SALE nav item, discounted price, -N% */
	--ir-sale-badge-bg: #8f1d1d;

	/* Type (placeholder stacks — final families from Figma) */
	--ir-font-logo: 'Cormorant Garamond', 'Times New Roman', serif;
	--ir-font-ui: 'Jost', 'Montserrat', Arial, sans-serif;
	--ir-tracking-caps: 0.08em;

	/* Layout */
	--ir-container-max: 1440px;

	/* Fluid side padding: 16px on phones → 48px on desktop. */
	--ir-side-pad: clamp(16px, 3vw, 48px);

	/* Vertical rhythm between homepage sections — one value everywhere so
	   the page reads evenly at any width. */
	--ir-section-gap: clamp(40px, 6vw, 80px);

	/* Wrappers that carry their own side padding cap here, so their CONTENT
	   is exactly --ir-container-max wide. Wrappers whose padding comes from
	   a parent (e.g. .ir-footer__grid) cap at --ir-container-max directly.
	   Mixing the two recipes is what made section and footer edges disagree
	   by 48px on wide screens. */
	--ir-shell-max: calc(1440px + 2 * var(--ir-side-pad));

	/* Grid gutter inside carousels/grids. */
	--ir-gutter: clamp(10px, 1.6vw, 24px);

	/* ---------------------------------------------------------------
	   BREAKPOINTS (mobile-first; min-width only, no max-width overrides
	   except for genuinely mobile-only behaviour).

	     base   0–599    phone
	     sm     600px    large phone landscape / small tablet portrait
	     md     900px    tablet
	     lg     1200px   desktop — full nav appears here (measured: nav
	                     517 + logo ~200 + utils 232 + gaps needs ~1000px
	                     of content box, which 1200 − 96 padding provides)
	     xl     1600px   wide desktop

	   CSS custom properties cannot be used inside @media, so these values
	   are written literally — but ONLY these five. Do not introduce ad-hoc
	   breakpoints; adjust the scale here and update all files together.
	   --------------------------------------------------------------- */

	/* Motion */
	--ir-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
	--ir-dur: 0.25s;
}