/* Design tokens — single source of truth for colours, type, spacing.
   Values and rationale: docs/design-decisions.md
   Breakpoints (media queries can't read custom properties):
   576 / 768 / 992 / 1200 / 1400 px */

:root {
	/* Colour */
	--color-bg: #ffffff;
	--color-text: #7d5f24;             /* dark gold — 5.94:1 on white, 5.55:1 on surface */
	--color-heading: #181818;
	--color-brand: #b68c5a;            /* decorative only — never body text on white (3.05:1) */
	--color-brand-tint: rgb(182 140 90 / 0.1);
	--color-icon: #000000;
	--color-surface: #f9f7f3;
	--color-dark: #181818;
	--color-on-dark: #ffffff;
	--color-border: rgb(86 86 86 / 0.3);
	--color-border-strong: #bdbdbd;
	--color-btn-bg: #000000;
	--color-btn-text: #ffffff;
	--color-btn-hover-bg: #b68c5a;
	--color-btn-hover-text: #000000;   /* 6.9:1 */
	--color-focus: #000000;
	--color-error: #b3261e;
	--color-success: #1e6b3a;

	/* Type */
	--font-heading: "Prata", Georgia, "Times New Roman", serif;
	--font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--fw-regular: 400;
	--fw-semibold: 600;
	--fw-heading: 400;

	--fs-h1: clamp(2.5rem, 1.6rem + 3.8vw, 5.625rem);   /* 40 → 90 */
	--fs-h2: clamp(2rem, 1.55rem + 1.9vw, 3.25rem);     /* 32 → 52 */
	--fs-h3: clamp(1.25rem, 0.95rem + 1.3vw, 2.25rem);  /* 20 → 36 */
	--fs-h4: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);   /* 20 → 24 */
	--fs-h5: clamp(1.125rem, 1.05rem + 0.3vw, 1.375rem);/* 18 → 22 */
	--fs-h6: 1.125rem;
	--fs-body: 1rem;
	--fs-small: 0.875rem;
	--fs-label: 0.875rem;

	--lh-body: 1.75;      /* 28 / 16 */
	--lh-heading: 1.2;

	/* Space */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 3rem;
	--space-8: 4rem;
	--space-section: clamp(5rem, 3.4rem + 4.2vw, 7.5rem);  /* 80 → 120 */

	/* Layout */
	--container: 1320px;
	--container-wide: 1410px;
	--container-text: 760px;
	--gutter: clamp(1rem, 0.6rem + 1.6vw, 1.5rem);

	/* Shape */
	--radius-0: 0;
	--radius-sm: 4px;
	--radius-round: 999px;
	--shadow-card: 0 1px 14px rgb(0 0 0 / 0.13);
	--shadow-soft: 0 8px 24px rgb(149 157 165 / 0.2);

	/* Motion */
	--ease: 0.3s ease-in-out;
	--ease-btn: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

/* Arabic: Cairo for headings and text (owner's choice), a little more air. */
:root:lang(ar) {
	--font-heading: "Cairo", Tahoma, "Segoe UI", sans-serif;
	--font-body: "Cairo", Tahoma, "Segoe UI", sans-serif;
	--fw-heading: 700;
	--fw-semibold: 700;
	--lh-body: 1.85;
	--lh-heading: 1.35;
	--fs-h1: clamp(2.125rem, 1.45rem + 2.9vw, 4rem);    /* 34 → 64 */
	--fs-h2: clamp(1.625rem, 1.3rem + 1.4vw, 2.5rem);   /* 26 → 40 */
	--fs-h3: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem);  /* 20 → 28 */
	--fs-body: 1.0625rem;                                /* 17px */
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--ease: 0s;
		--ease-btn: 0s;
	}
}