/* ==========================================================================
   TEEMCW — DESIGN TOKENS
   The whole palette, type scale and spacing rhythm, in one place.

   The brief asks for white and pink. Pink is the accent, never the canvas:
   backgrounds stay white or a barely-there blush, and rose appears only where
   it carries meaning — an action, a price, a sale badge, a focus ring. That
   restraint is what separates a premium storefront from a novelty one.
   ========================================================================== */

:root {
	/* ---- Canvas -------------------------------------------------------- */
	--white: #ffffff;
	--blush-1: #fff9fb;   /* section banding */
	--blush-2: #fff4f7;   /* cards, wells */
	--blush-3: #ffedf2;   /* hover on blush surfaces */

	/* ---- Rose ramp ----------------------------------------------------- */
	--rose-50: #fff0f4;
	--rose-100: #ffe0e9;
	--rose-200: #ffc2d4;
	--rose-300: #f79ab5;
	--rose-400: #e97396;
	--rose-500: #d6537c;   /* primary action */
	--rose-600: #b93c63;   /* hover */
	--rose-700: #972f4f;   /* active, headings on blush */
	--rose-800: #74243d;
	--rose-900: #551a2c;

	/* Dusty rose, for decorative rules and quiet borders. */
	--dusty: #c99aa8;
	--dusty-soft: #e8ccd5;

	/* ---- Ink ----------------------------------------------------------- */
	--ink: #23191d;        /* dark charcoal, warmed a touch toward the rose */
	--ink-2: #4a3e43;      /* body copy */
	--ink-3: #6f6266;      /* secondary */
	--ink-4: #9a8f93;      /* meta, placeholders */

	/* ---- Lines and shadows --------------------------------------------- */
	--line: #f0e4e8;
	--line-2: #e4d4da;
	--line-strong: #d3bdc5;

	--shadow-sm: 0 1px 2px rgba(35, 25, 29, .06);
	--shadow: 0 4px 16px rgba(35, 25, 29, .07);
	--shadow-md: 0 10px 30px rgba(35, 25, 29, .09);
	--shadow-lg: 0 20px 50px rgba(35, 25, 29, .12);
	--shadow-rose: 0 8px 24px rgba(214, 83, 124, .22);

	/* ---- State --------------------------------------------------------- */
	--ok: #2e7d5b;
	--ok-bg: #eaf6f0;
	--warn: #9a6b16;
	--warn-bg: #fdf4e3;
	--err: #b3261e;
	--err-bg: #fdecea;

	/* ---- Type ---------------------------------------------------------- */
	--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;

	--fs-xs: .75rem;
	--fs-sm: .8125rem;
	--fs-base: .9375rem;
	--fs-md: 1rem;
	--fs-lg: 1.125rem;
	--fs-xl: 1.375rem;
	--fs-2xl: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
	--fs-3xl: clamp(1.875rem, 1.4rem + 1.9vw, 2.75rem);
	--fs-4xl: clamp(2.25rem, 1.5rem + 3.2vw, 4rem);

	--lh-tight: 1.15;
	--lh-snug: 1.35;
	--lh-base: 1.65;

	--ls-tight: -.02em;
	--ls-wide: .08em;
	--ls-caps: .14em;

	/* ---- Spacing ------------------------------------------------------- */
	--sp-1: .25rem;
	--sp-2: .5rem;
	--sp-3: .75rem;
	--sp-4: 1rem;
	--sp-5: 1.5rem;
	--sp-6: 2rem;
	--sp-7: 2.5rem;
	--sp-8: 3rem;
	--sp-9: 4rem;
	--sp-10: 5rem;
	--sp-11: 6.5rem;
	--sp-12: 8rem;

	--gutter: clamp(1rem, 4vw, 2.5rem);
	--shell: 1280px;
	--shell-narrow: 780px;

	/* ---- Radius -------------------------------------------------------- */
	--r-xs: 4px;
	--r-sm: 8px;
	--r-md: 12px;
	--r-lg: 18px;
	--r-xl: 26px;
	--r-pill: 999px;

	/* ---- Motion -------------------------------------------------------- */
	--dur-fast: 140ms;
	--dur: 240ms;
	--dur-slow: 420ms;
	--ease: cubic-bezier(.22, .61, .36, 1);
	--ease-out: cubic-bezier(.16, 1, .3, 1);

	/* ---- Chrome -------------------------------------------------------- */
	--header-h: 4.5rem;
	--ann-h: 2.25rem;
	--z-ann: 90;
	--z-header: 100;
	--z-drawer: 200;
	--z-modal: 300;
	--z-toast: 400;
}

@media (max-width: 782px) {
	:root {
		--header-h: 3.75rem;
		--ann-h: 2rem;
	}
}

/* Respect a reduced-motion preference everywhere, once. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}