/*
 * Design tokens — the single source of truth for colour, type, space and motion.
 * Everything else (components.css, home.css, Elementor classes) reads these variables.
 *
 * Fonts are self-hosted (no request to Google): one variable file per family,
 * latin subset only (covers English and French accents), swap while loading.
 */
@font-face {
	font-family: "Cormorant Garamond";
	src: url("../fonts/cormorant-garamond-variable-latin.woff2") format("woff2");
	font-weight: 300 500;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215;
}

@font-face {
	font-family: "Manrope";
	src: url("../fonts/manrope-variable-latin.woff2") format("woff2");
	font-weight: 400 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215;
}

:root {
	/* ---- Colour ---------------------------------------------------- */
	--color-background: #f5f2ec;      /* warm ivory page background */
	--color-surface: #fbfaf7;         /* warm white panels, header after scroll */
	--color-stone: #d8cdbe;           /* stone beige */
	--color-travertine: #c4ad91;      /* travertine */
	--color-warm-gray: #716b64;       /* secondary text (4.7:1 on background) */
	--color-text-quiet: #77716b;      /* quiet text: large type or non-essential only (4.3:1) */
	--color-charcoal: #191817;        /* text, primary buttons, dark sections */
	--color-accent: #735d47;          /* earth accent, used sparingly */
	--color-border: rgba(25, 24, 23, 0.14);

	--color-text: var(--color-charcoal);
	--color-text-muted: var(--color-warm-gray);
	--color-on-dark: #fbfaf7;
	--color-on-dark-muted: rgba(251, 250, 247, 0.74);
	--color-border-dark: rgba(251, 250, 247, 0.22);

	/* ---- Typography ------------------------------------------------ */
	--font-display: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
	--font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* Phones: headlines stay readable on a 375 px screen (never the 64 px desktop minimum) */
	--fs-display: clamp(34px, 9.4vw, 46px);
	--fs-h1: clamp(30px, 8.4vw, 42px);
	--fs-h2: clamp(26px, 7vw, 34px);
	--fs-h3: clamp(21px, 5.6vw, 26px);
	--fs-body-lg: clamp(17px, 0.98rem + 0.2vw, 19px);
	--fs-body: clamp(15.5px, 0.92rem + 0.15vw, 17px);
	--fs-small: 14px;
	--fs-label: 12px;

	--lh-display: 0.98;
	--lh-heading: 1.05;
	--lh-body: 1.65;
	--tracking-label: 0.16em;

	/* ---- Layout ---------------------------------------------------- */
	--container-max: 1320px;
	--container-header: 1480px;
	--content-max: 680px;            /* editorial text column */
	--gutter: clamp(20px, 4vw, 56px);

	/* ---- Spacing scale (8-based) ----------------------------------- */
	--space-1: 0.5rem;   /*   8 */
	--space-2: 1rem;     /*  16 */
	--space-3: 1.5rem;   /*  24 */
	--space-4: 2rem;     /*  32 */
	--space-6: 3rem;     /*  48 */
	--space-8: 4rem;     /*  64 */
	--space-12: 6rem;    /*  96 */
	--space-16: 8rem;    /* 128 */
	--space-20: 10rem;   /* 160 */

	/* Legacy names kept from phase 1 */
	--space-xs: var(--space-1);
	--space-sm: var(--space-2);
	--space-md: var(--space-3);
	--space-lg: var(--space-6);
	--space-xl: var(--space-12);
	--space-2xl: var(--space-20);

	/* Fluid section rhythm */
	--section-y: clamp(56px, 6.6vw, 112px);
	--section-y-sm: clamp(40px, 4.4vw, 72px);

	/* ---- Controls & motion ----------------------------------------- */
	--button-h: 48px;
	--radius: 0;
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--dur-fast: 250ms;
	--dur: 450ms;
	--dur-slow: 700ms;

	/* ---- Moroccan motifs (original geometry inspired by zellige tilework) ----
	   --motif-star-mask: an eight-point star (two squares), used as a mask so it
	   takes the colour of the text next to it.
	   --motif-lattice*: a star lattice of thin lines, as a repeating background. */
	--motif-star-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='3.5' y='3.5' width='13' height='13'/%3E%3Crect x='3.5' y='3.5' width='13' height='13' transform='rotate(45 10 10)'/%3E%3C/svg%3E");
	--motif-lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='57' height='57' viewBox='0 0 56.57 56.57' fill='none' stroke='%23735d47' stroke-width='.8'%3E%3Crect x='8.28' y='8.28' width='40' height='40'/%3E%3Cpolygon points='28.28,0 56.57,28.28 28.28,56.57 0,28.28'/%3E%3C/svg%3E");
	--motif-lattice-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='57' height='57' viewBox='0 0 56.57 56.57' fill='none' stroke='%23fbfaf7' stroke-width='.8'%3E%3Crect x='8.28' y='8.28' width='40' height='40'/%3E%3Cpolygon points='28.28,0 56.57,28.28 28.28,56.57 0,28.28'/%3E%3C/svg%3E");
}

/* Tablet and desktop: the editorial scale of the design brief */
@media (min-width: 768px) {
	:root {
		--fs-display: clamp(48px, 4.6vw, 68px);
		--fs-h1: clamp(40px, 3.5vw, 54px);
		--fs-h2: clamp(32px, 2.7vw, 42px);
		--fs-h3: clamp(24px, 1.9vw, 30px);
	}
}

/*
 * Map the tokens onto Blocksy's own variables so WooCommerce, forms and
 * Blocksy components inherit the same identity (no Customizer edits needed).
 */
:root {
	--theme-palette-color-1: var(--color-accent);
	--theme-palette-color-2: var(--color-charcoal);
	--theme-palette-color-3: var(--color-warm-gray);
	--theme-palette-color-4: var(--color-charcoal);
	--theme-palette-color-5: var(--color-stone);
	--theme-palette-color-6: var(--color-background);
	--theme-palette-color-7: var(--color-surface);
	--theme-palette-color-8: var(--color-surface);

	--theme-font-family: var(--font-sans);
	--theme-text-color: var(--color-text);
	--theme-headings-color: var(--color-text);
	--theme-link-initial-color: var(--color-text);
	--theme-link-hover-color: var(--color-accent);
	--theme-border-color: var(--color-border);

	--theme-button-background-initial-color: var(--color-charcoal);
	--theme-button-background-hover-color: #000;
	--theme-button-text-initial-color: var(--color-on-dark);
	--theme-button-text-hover-color: var(--color-on-dark);
	--theme-button-min-height: var(--button-h);
	--theme-button-padding: 0 32px;
	--theme-button-font-size: 12.5px;
	--theme-button-font-weight: 600;
	--theme-button-transform: uppercase;
	--theme-button-border-radius: 0;
}