/**
 * Design Tokens
 * -----------------------------------------------------------------------
 * Single source of truth for the visual language extracted from
 * devtrixa.com/cloth. Every component file should reference these
 * variables instead of hard-coding values.
 *
 * ⚠️ VALUES MARKED "best-effort" were inferred from content/structure,
 * not from the live stylesheet (we don't have raw CSS access yet).
 * Once you share the theme export or screenshots, only THIS file
 * (plus maybe a couple of component tweaks) needs to change to bring
 * everything to true pixel-perfect parity.
 */

:root {
	/* ---- Color: neutrals ---- */
	--color-bg: #fffdfa;
	--color-bg-alt: #fbf3e6;         /* warm ivory, sampled from hero banner */
	--color-ink: #241208;            /* warm near-black, pairs with maroon brand */
	--color-ink-soft: #5c4a3d;
	--color-border: #ece0cd;

	/* ---- Color: brand (Shree Naganaray — royal maroon + gold) ---- */
	--color-gold: #c38a2c;           /* sampled from logo shield border */
	--color-gold-soft: #f2d688;      /* sampled from logo highlight */
	--color-maroon: #480e05;         /* sampled from logo shield */
	--color-maroon-soft: #7a2413;
	--color-royal-black: #1c0f08;    /* "Royal Black" editorial block, warmed */
	--color-royal-white: #fdf8ef;    /* "Royal White" editorial block */
	--color-sale: #b3261e;

	/* Back-compat alias: some components still reference --color-ink as the
	   primary "dark" brand tone. Kept separate from --color-maroon so text
	   stays legible while brand chrome (header/footer/buttons) can lean
	   fully into the maroon identity. */

	/* ---- Typography ---- */
	--font-heading: "Playfair Display", Georgia, "Times New Roman", serif;
	--font-body: "Jost", "Helvetica Neue", Arial, sans-serif;
	--font-size-base: 16px;
	--line-height-base: 1.6;

	--h1: clamp(2.25rem, 3vw + 1rem, 3.75rem);
	--h2: clamp(1.75rem, 2vw + 1rem, 2.5rem);
	--h3: clamp(1.25rem, 1vw + 1rem, 1.75rem);
	--h4: 1.125rem;
	--tracking-eyebrow: 0.18em;

	/* ---- Spacing scale (4px base) ---- */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;
	--space-9: 96px;
	--space-10: 128px;

	--container-max: 1320px;
	--container-pad: clamp(16px, 4vw, 64px);

	/* ---- Radius / shadow ---- */
	--radius-sm: 4px;
	--radius-md: 10px;
	--radius-lg: 20px;
	--shadow-card: 0 4px 20px rgba(72, 14, 5, 0.08);
	--shadow-elevated: 0 16px 48px rgba(28, 15, 8, 0.18);

	/* ---- Motion ---- */
	--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
	--duration-fast: 150ms;
	--duration-base: 250ms;
	--duration-slow: 400ms;

	/* ---- Z-index scale ---- */
	--z-header: 100;
	--z-drawer: 200;
	--z-modal: 300;
	--z-toast: 400;
}