/* ==========================================================================
   INDUVRA — DESIGN TOKENS
   White-first, minimal, editorial. Warmth comes from product photography,
   never from UI backgrounds. Single source of truth for every primitive.
   ========================================================================== */

:root {
	/* ---- Colour ------------------------------------------------------- */
	--color-white:         #FFFFFF;
	--color-background:    #FAFBFC;
	--color-surface:       #F4F7FA;
	--color-surface-blue:  #EEF5FA;
	--color-text:          #17212B;
	--color-text-secondary:#65717C;
	--color-text-muted:    #6B7480; /* AA-compliant on white (4.74:1) */
	--color-border:        #E2E7EB;
	--color-primary:       #123B52;
	--color-primary-hover: #0D3043;
	--color-success:       #3F7D5A;
	--color-error:         #B64A4A;

	/* ---- Typography --------------------------------------------------- */
	--font-primary: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--font-size-hero:    56px;
	--font-size-h1:      48px;
	--font-size-h2:      38px;
	--font-size-h3:      24px;
	--font-size-h4:      20px;
	--font-size-body:    16px;
	--font-size-small:   13px;
	--font-size-caption: 12px;
	--font-size-product: 16px;

	--line-tight:   1.1;
	--line-snug:    1.25;
	--line-normal:  1.55;
	--line-relaxed: 1.75;

	--tracking-normal: 0;
	--tracking-wide:   0.06em;
	--tracking-wider:  0.14em;

	--weight-light:  300;
	--weight-normal: 400;
	--weight-medium: 500;
	--weight-semi:   600;

	/* ---- Layout ------------------------------------------------------- */
	--container-width: 1400px;
	--content-width:   1200px;
	--narrow-width:    820px;
	--gutter:          var(--space-md);

	/* ---- Spacing (8px system) ---------------------------------------- */
	--space-xs:  8px;
	--space-sm:  16px;
	--space-md:  24px;
	--space-lg:  40px;
	--space-xl:  64px;
	--space-2xl: 96px;
	--space-3xl: 128px;

	/* ---- Borders / radius / shadow ----------------------------------- */
	--border-light:  1px solid var(--color-border);
	--radius-small:  2px;
	--radius-medium: 4px;
	--shadow-soft:   0 10px 40px rgba(23, 33, 43, 0.07);
	--shadow-header: 0 1px 0 var(--color-border);

	/* ---- Motion ------------------------------------------------------- */
	--transition-fast:   250ms ease;
	--transition-normal: 400ms ease;
	--transition-slow:   600ms ease;

	/* ---- Layering ----------------------------------------------------- */
	--z-header: 1000;
	--z-drawer: 1100;
	--z-modal:  1200;
}