/* =========================================================================
   1 · TOKENS — design system variables
   Reference: V4-BUILD-SPEC §3 + RESPONSIVE-DESIGN-RESEARCH §1–§5
   ========================================================================= */

:root {
	/* ---- Colors ----------------------------------------------------------- */
	--jj-primary:           #0E4F4F;  /* Deep teal — trust, Sindhi-sufi-textile */
	--jj-primary-deep:      #063535;  /* Hover, nav backgrounds */
	--jj-primary-soft:      #D7E5E1;  /* Soft teal-tinted neutral */
	--jj-accent-gold:       #E8A317;  /* Saffron — donate CTA */
	--jj-accent-gold-hover: #C88A08;
	--jj-accent-terracotta: #C6824B;  /* Indus-valley earth — secondary */
	--jj-accent-deep-terra: #8A4F2C;  /* Ajrak block-print overlay */
	--jj-text:              #1A1A1A;  /* Body charcoal — AAA on white */
	--jj-text-soft:         #2E2E2E;
	--jj-muted:             #5C6B6B;  /* Captions, dates */
	--jj-border:            #E2E6E6;
	--jj-bg:                #FFFFFF;
	--jj-bg-warm:           #FAF6EE;  /* Warm cream alt-bg */
	--jj-success:           #2E7D5B;
	--jj-error:             #B3271C;
	--jj-overlay:           rgba(6, 53, 53, 0.55);
	--jj-overlay-strong:    rgba(6, 53, 53, 0.75);
	--jj-overlay-soft:      rgba(6, 53, 53, 0.30);

	/* ---- Fonts ------------------------------------------------------------ */
	--jj-font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--jj-font-serif: 'Fraunces', 'Iowan Old Style', 'Apple Garamond', Baskerville, 'Times New Roman', serif;

	/* ---- Fluid type scale (clamp) ---------------------------------------- */
	/* Min ≥ 1rem, max ≥ 2× min on body → WCAG 1.4.4 friendly */
	--fs-xs:      clamp(0.8rem,   0.75rem + 0.20vw, 0.95rem);
	--fs-sm:      clamp(0.875rem, 0.84rem + 0.18vw, 1rem);
	--fs-base:    clamp(1rem,     0.95rem + 0.30vw, 1.125rem);
	--fs-md:      clamp(1.125rem, 1.05rem + 0.40vw, 1.25rem);
	--fs-lg:      clamp(1.25rem,  1.10rem + 0.60vw, 1.5rem);
	--fs-xl:      clamp(1.5rem,   1.30rem + 1.00vw, 1.875rem);
	--fs-2xl:     clamp(1.875rem, 1.50rem + 1.70vw, 2.5rem);
	--fs-3xl:     clamp(2.25rem,  1.80rem + 2.20vw, 3rem);
	--fs-display: clamp(2.5rem,   1.80rem + 3.40vw, 4.5rem);
	--fs-stat:    clamp(2.5rem,   1.60rem + 4.00vw, 4.5rem);

	/* ---- Spacing — 4px base ---------------------------------------------- */
	--sp-1:  0.25rem;
	--sp-2:  0.5rem;
	--sp-3:  0.75rem;
	--sp-4:  1rem;
	--sp-5:  1.25rem;
	--sp-6:  1.5rem;
	--sp-8:  2rem;
	--sp-10: 2.5rem;
	--sp-12: 3rem;
	--sp-16: 4rem;
	--sp-20: 5rem;
	--sp-24: 6rem;
	--sp-32: 8rem;

	/* ---- Section padding (fluid) ---------------------------------------- */
	--section-y:       clamp(3rem, 2rem + 5vw, 6rem);
	--section-y-tight: clamp(2rem, 1.5rem + 3vw, 4rem);
	--gutter:          clamp(1rem, 0.5rem + 2vw, 2rem);

	/* ---- Radius ---------------------------------------------------------- */
	--radius-sm:   4px;
	--radius-md:   8px;
	--radius-lg:   16px;
	--radius-xl:   24px;
	--radius-pill: 999px;

	/* ---- Shadows --------------------------------------------------------- */
	--shadow-sm:    0 1px 2px  rgba(14, 79, 79, 0.06);
	--shadow-md:    0 4px 12px rgba(14, 79, 79, 0.08);
	--shadow-lg:    0 12px 40px rgba(14, 79, 79, 0.14);
	--shadow-hover: 0 8px 28px rgba(14, 79, 79, 0.18);

	/* ---- Transitions ----------------------------------------------------- */
	--ease:      cubic-bezier(.2, .8, .2, 1);
	--dur-fast:  0.15s;
	--dur-base:  0.25s;
	--dur-slow:  0.4s;

	/* ---- Layout ---------------------------------------------------------- */
	--container:        1200px;
	--container-narrow: 760px;
	--container-wide:   1400px;
	--header-h:         64px;  /* Phones default — overridden at breakpoints below */

	color-scheme: light;
}

/* Header height grows with viewport */
@media (min-width: 36em) { :root { --header-h: 72px; } }
@media (min-width: 64em) { :root { --header-h: 80px; } }