/* ==========================================================================
   Design tokens - The Perfect Look
   Values taken from the Visual Identity Guidelines V1.0 and verified against
   the supplied logo/icon/pattern SVG sources.
   ========================================================================== */

/* --- Self-hosted brand faces -------------------------------------------- */
/* Subset from the supplied licensed TTFs to Latin, Latin Extended,
   punctuation, currency and arrows, then packed as WOFF2: 2243KB -> 129KB.
   Kerning and ligatures are retained and unitsPerEm is unchanged, so metrics
   match the originals exactly.
   The supplied statics register as separate families ("Cormorant Garamond
   Medium"), so they are normalised here into one family per weight.
   unicode-range keeps these files out of Arabic runs entirely - the browser
   never downloads them for an Arabic-only page. */

@font-face {
	font-family: "Cormorant Garamond";
	src: url("../fonts/CormorantGaramond-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-024F, U+0259, U+1E00-1EFF, U+2000-20BF, U+2122, U+2190-21BB, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Cormorant Garamond";
	src: url("../fonts/CormorantGaramond-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-024F, U+0259, U+1E00-1EFF, U+2000-20BF, U+2122, U+2190-21BB, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Montserrat";
	src: url("../fonts/Montserrat-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-024F, U+0259, U+1E00-1EFF, U+2000-20BF, U+2122, U+2190-21BB, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Montserrat";
	src: url("../fonts/Montserrat-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-024F, U+0259, U+1E00-1EFF, U+2000-20BF, U+2122, U+2190-21BB, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	/* --- Colour ---------------------------------------------------------- */
	--c-forest: #173D35;        /* primary ink, dark fields - 10.61:1 on ivory */
	--c-forest-700: #285045;    /* tonal detail on dark fields */
	--c-forest-900: #0F2A25;    /* hover / pressed */
	--c-sage: #91A184;          /* accent only - 2.75:1 on white, never small text */
	--c-sage-200: #DDE4D6;
	--c-sage-300: #CCD6C3;
	--c-ivory: #F5F1E8;         /* primary warm background */
	--c-white: #FFFFFF;
	--c-muted: #66746D;

	--c-text: var(--c-forest);
	--c-text-muted: var(--c-muted);
	--c-bg: var(--c-ivory);
	--c-line: rgba(23, 61, 53, 0.14);
	--c-line-dark: rgba(245, 241, 232, 0.22);

	/* --- Typography ------------------------------------------------------- */
	--font-display: "Cormorant Garamond", "Times New Roman", serif;
	--font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

	--fs-eyebrow: 0.75rem;
	--fs-small: 0.875rem;
	--fs-body: 1rem;
	--fs-lead: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	--fs-h3: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
	--fs-h2: clamp(1.625rem, 1.35rem + 1.3vw, 2.5rem);
	--fs-h1: clamp(2.375rem, 1.6rem + 3.4vw, 4rem);
	--fs-price: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);

	--lh-tight: 1.1;
	--lh-snug: 1.3;
	--lh-body: 1.65;
	--ls-eyebrow: 0.18em;
	--ls-label: 0.06em;

	/* Display weight: Cormorant reads well at 500, Arabic needs more mass. */
	--fw-display: 500;

	/* Navigation weight. Montserrat holds the header at 400; the Arabic block
	   below raises it, because IBM Plex Sans Arabic renders noticeably lighter
	   at the same nominal weight and 14px. */
	--fw-nav: 400;

	/* --- Spacing: 8px rhythm (guidelines p.25) ---------------------------- */
	--sp-1: 8px;
	--sp-2: 16px;
	--sp-3: 24px;
	--sp-4: 32px;
	--sp-5: 48px;
	--sp-6: 64px;
	--sp-7: 96px;

	/* --- Layout ----------------------------------------------------------- */
	/* Inner measure for every band. The bands themselves are full-bleed; this
	   only governs where their content sits. */
	--container: 1440px;
	--gutter: 16px;
	--utility-h: 40px;
	--header-h: 88px;

	/* --- Form ------------------------------------------------------------- */
	--radius-sm: 8px;
	--radius-md: 16px;
	--radius-lg: 24px;
	--radius-pill: 999px;
	--tap: 44px;                /* minimum touch target (guidelines p.24) */

	--shadow-sm: 0 1px 2px rgba(23, 61, 53, 0.06);
	--shadow-md: 0 8px 24px rgba(23, 61, 53, 0.08);

	--ease: cubic-bezier(0.2, 0.6, 0.2, 1);
	--speed: 220ms;
}

@media (min-width: 768px) {
	:root {
		--gutter: 32px;
	}
}

@media (min-width: 1200px) {
	:root {
		--gutter: 48px;
	}
}

/* --- Arabic ------------------------------------------------------------- */
/* Cormorant Garamond and Montserrat carry zero Arabic glyphs (verified in the
   cmap tables), so Arabic uses one family across display and body. */

html[lang^="ar"] {
	--font-display: "IBM Plex Sans Arabic", "Noto Naskh Arabic", Tahoma, sans-serif;
	--font-body: "IBM Plex Sans Arabic", "Noto Naskh Arabic", Tahoma, sans-serif;

	/* Arabic needs more leading than Latin for ascenders and marks, but the
	   display sizes were too loose - headlines now hold together as a block. */
	--lh-tight: 1.28;
	--lh-snug: 1.45;
	--lh-body: 1.85;
	--ls-eyebrow: 0.06em;       /* Arabic is cursive: heavy tracking breaks joins */
	--ls-label: 0;

	/* 600 is already in the IBM Plex Sans Arabic request (400;500;600;700), so
	   this costs no extra font file. */
	--fw-nav: 600;

	/* One step down from the Latin scale: Arabic letterforms carry more weight
	   per point, so matching Cormorant's size makes headings shout. */
	--fs-h1: clamp(1.875rem, 1.35rem + 2.3vw, 3rem);
	--fs-h2: clamp(1.4rem, 1.2rem + 1vw, 2rem);
	--fs-h3: clamp(1.125rem, 1.05rem + 0.45vw, 1.35rem);
	--fs-lead: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);

	--fw-display: 600;
}