:root {

	/* Colours */

	--color-background: #f7f4ed;
	--color-background-soft: #f1ede3;
	--color-background-warm: #ebe4d6;

	--color-surface: #ffffff;
	--color-surface-dark: #243a34;

	--color-text: #1e1e1e;
	--color-text-soft: #343434;
	--color-muted: #666666;
	--color-muted-light: #88867f;

	--color-green: #2f4a42;
	--color-green-dark: #213630;
	--color-green-soft: #dce4df;

	--color-gold: #b88a3d;
	--color-gold-dark: #936c2d;
	--color-gold-soft: #e7d7b8;

	--color-accent: var(--color-gold);

	--color-border: rgba(30, 30, 30, 0.14);
	--color-border-light: rgba(30, 30, 30, 0.08);
	--color-border-dark: rgba(247, 244, 237, 0.20);

	/* Typography */

	--font-heading: "Cormorant Garamond", serif;
	--font-body: "Inter", sans-serif;

	--font-hi-serif:
		"Noto Serif Devanagari",
		"Cormorant Garamond",
		serif;

	--font-hi-sans:
		"Noto Sans Devanagari",
		"Inter",
		sans-serif;

	--h1: clamp(3.6rem, 7vw, 6.5rem);
	--h2: clamp(2.8rem, 5vw, 4.8rem);
	--h3: clamp(2.1rem, 3.4vw, 3.35rem);
	--h4: clamp(1.65rem, 2.4vw, 2.35rem);

	--body-large: clamp(1.05rem, 1.4vw, 1.25rem);
	--body: clamp(1rem, 1.15vw, 1.125rem);
	--small: 0.9375rem;
	--tiny: 0.75rem;

	--line-heading: 1.08;
	--line-body: 1.8;

	/* Widths */

	--container-wide: 1480px;
	--container: 1320px;
	--container-text: 760px;
	--container-narrow: 620px;
	--reading-width: 68ch;

	--gutter: clamp(20px, 4vw, 64px);

	/* Spacing */

	--space-1: 8px;
	--space-2: 16px;
	--space-3: 24px;
	--space-4: 40px;
	--space-5: 64px;
	--space-6: 96px;
	--space-7: 160px;

	--section-space: clamp(100px, 12vw, 180px);
	--section-space-small: clamp(72px, 8vw, 120px);

	--grid-gap: clamp(36px, 5vw, 72px);
	--grid-gap-large: clamp(52px, 8vw, 120px);

	/* Image ratios */

	--ratio-landscape: 16 / 10;
	--ratio-editorial: 4 / 5;
	--ratio-portrait: 3 / 4;
	--ratio-square: 1 / 1;
	--ratio-cinematic: 21 / 9;

	/* Motion */

	--motion-fast: 0.2s;
	--motion-normal: 0.35s;
	--motion-slow: 0.8s;
	--motion-cinematic: 1.2s;

	--ease-editorial: cubic-bezier(0.22, 0.61, 0.19, 1);
	--ease-cinematic: cubic-bezier(0.22, 1, 0.36, 1);

	--transition: var(--motion-normal) ease;
	--transition-editorial:
		var(--motion-normal) var(--ease-editorial);
	--transition-cinematic:
		var(--motion-slow) var(--ease-cinematic);

	/* Layers */

	--z-base: 1;
	--z-content: 10;
	--z-header: 100;
	--z-overlay: 200;
	--z-modal: 300;
}