/*
 * Design tokens from Figma, concept 01 "Premium Egyptian Journey",
 * frame "00 — Foundations & presentation notes". Variable names match the
 * Figma variables (--color-ivory, --space-72, ...).
 *
 * Use these everywhere instead of raw values.
 */

:root {
	/* Colours. Contrast on ivory: ink 13:1, nile 8.5:1, muted 5.6:1.
	   Sea (2.2:1) and terra (3.2:1) are too pale for body text: use them
	   for surfaces, large text and decoration only. */
	--color-ivory: #f7f2e8;  /* main background */
	--color-sand: #dcc9a7;   /* secondary surfaces */
	--color-sea: #6faec0;    /* accent surfaces */
	--color-nile: #174c5c;   /* structure, links, buttons */
	--color-terra: #c96f45;  /* rare accent */
	--color-ink: #252a2b;    /* text */
	--color-muted: #596363;  /* secondary text */

	/* Tints built from the palette (not in Figma). */
	--color-sand-soft: #ece1cc;   /* quiet section background */
	--color-ivory-deep: #f1e9da;  /* cards on ivory */
	--color-line: #d9cdb6;        /* hairlines (decorative only) */
	--color-field-border: #948569; /* form controls: 3.5:1, meets the 3:1 rule for UI */
	--color-nile-deep: #103a46;   /* primary button hover */
	--color-error: #a3361a;       /* 6.1:1 on ivory */
	--color-success: #2f6b3a;     /* 6.0:1 on ivory */
	--color-overlay: rgb(16 42 50 / 55%);

	/* Type: Lora for headings, DM Sans for body and UI. */
	--font-serif: "Lora", Georgia, "Times New Roman", serif;
	--font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	--text-display: 4rem;       /* 64 / 74 */
	--leading-display: 1.15625;
	--text-h1: 3rem;            /* 48 / 58 */
	--leading-h1: 1.2083;
	--text-h2: 2.25rem;         /* 36 / 46 */
	--leading-h2: 1.2778;
	--text-h3: 1.625rem;        /* 26 / 34 */
	--leading-h3: 1.3077;
	--text-body: 1.0625rem;     /* 17 / 28 */
	--leading-body: 1.647;
	--text-small: 0.9375rem;    /* 15 / 22 */
	--text-caption: 0.875rem;   /* 14 / 22 */
	--leading-tight: 1.4667;

	/* Spacing: 8px rhythm. */
	--space-0: 0;
	--space-4: 0.25rem;
	--space-8: 0.5rem;
	--space-12: 0.75rem;
	--space-16: 1rem;
	--space-24: 1.5rem;
	--space-32: 2rem;
	--space-40: 2.5rem;
	--space-48: 3rem;
	--space-56: 3.5rem;
	--space-64: 4rem;
	--space-72: 4.5rem;
	--space-96: 6rem;

	/* Radius: cards 20, buttons and inputs 12, images 20, modals 24. */
	--radius-12: 12px;
	--radius-16: 16px;
	--radius-20: 20px;
	--radius-24: 24px;
	--radius-pill: 999px;

	/* Layout. */
	--container: 1296px;
	--gutter: var(--space-72);
	--header-height: 96px;
	--section-space: var(--space-72);

	/* Elevation: only where it means something (sticky card, panel, menus). */
	--shadow-raised: 0 18px 48px rgb(37 42 43 / 12%), 0 2px 8px rgb(37 42 43 / 6%);
	--shadow-header: 0 1px 0 var(--color-line), 0 8px 24px rgb(37 42 43 / 6%);

	/* Motion: calm only. */
	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--duration: 240ms;
	--duration-slow: 700ms;
}

/* Tablet: 768 to 1199px. */
@media (max-width: 1199px) {
	:root {
		--gutter: var(--space-40);
		--section-space: var(--space-56);
		--text-display: 3.25rem;
		--text-h1: 2.5rem;
		--text-h2: 2rem;
	}
}

/* Mobile: up to 767px. */
@media (max-width: 767px) {
	:root {
		--gutter: var(--space-24);
		--section-space: var(--space-48);
		--header-height: 72px;
		--text-display: 2.5rem;
		--text-h1: 2.125rem;
		--text-h2: 1.75rem;
		--text-h3: 1.375rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--duration: 0ms;
		--duration-slow: 0ms;
	}
}