/* ===========================================================
 * Design tokens — source de vérité partagée.
 * Chargé en front (avant screen.css) et dans les éditeurs
 * (classique + Gutenberg). Ne contient QUE des variables CSS
 * et des @font-face. Pas de règles sur des sélecteurs.
 * =========================================================== */

:root {
	/* color */
	--wh: #ffffff;
	--blk: #000000;
	--vert1: #05443B;
	--vert2: #B4C7C4;
	--vert3: #D9E3E1;
	--tc: #C5785B;
	--rose: #DFAE9C;
	--gris1: #F7F6F2;
	--focus-outline-color: #07F;
	/* fonts */
	--default-font: 'figtree', sans-serif;
	--title-font: 'crimson', serif;
	/* radius */
	--r5: 5px;
	--r10: 10px;
	--r20: 20px;
	--r90: 90px;
	--r180: 180px;
	/* gap */
	--g2: 2px;
	--g5: 5px;
	--g12: 12px;
	--g20: 20px;
	--g24: 24px;
	--g29: 29px;
	--g30: 30px;
	--g37: 37px;
	--g40: 40px;
	--g49: 49px;
	--g60: 60px;
	--g77: 77px;
	--g90: 90px;
	--g115: 115px;
	--col-gap: var(--g12);
	/* cols */
	--c1: 1;
	--c2: 2;
	--c3: 3;
	--c4: 4;
	--c6: 6;
	/* width */
	--1-12: calc((100% / var(--c1)) - var(--g12) + (var(--g12) / var(--c1)));
	--2-12: calc((100% / var(--c2)) - var(--g12) + (var(--g12) / var(--c2)));
	--3-12: calc((100% / var(--c3)) - var(--g12) + (var(--g12) / var(--c3)));
	--4-12: calc((100% / var(--c4)) - var(--g12) + (var(--g12) / var(--c4)));
	--6-12: calc((100% / var(--c6)) - var(--g12) + (var(--g12) / var(--c6)));
	--2-20: calc((100% / var(--c2)) - var(--g20) + (var(--g20) / var(--c2)));
}

/* ---------- Crimson Pro ---------- */
@font-face {
	font-family: var(--title-font);
	font-style: normal;
	font-weight: 300;
	src: url('../fonts/crimson-pro-v28-latin-300.woff2') format('woff2');
}
@font-face {
	font-family: var(--title-font);
	font-style: italic;
	font-weight: 300;
	src: url('../fonts/crimson-pro-v28-latin-300italic.woff2') format('woff2');
}
@font-face {
	font-family: var(--title-font);
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/crimson-pro-v28-latin-regular.woff2') format('woff2');
}
@font-face {
	font-family: var(--title-font);
	font-style: italic;
	font-weight: 400;
	src: url('../fonts/crimson-pro-v28-latin-italic.woff2') format('woff2');
}
@font-face {
	font-family: var(--title-font);
	font-style: normal;
	font-weight: 700;
	src: url('../fonts/crimson-pro-v28-latin-700.woff2') format('woff2');
}
@font-face {
	font-family: var(--title-font);
	font-style: italic;
	font-weight: 700;
	src: url('../fonts/crimson-pro-v28-latin-700italic.woff2') format('woff2');
}

/* ---------- Figtree ---------- */
@font-face {
	font-family: var(--default-font);
	font-style: normal;
	font-weight: 300;
	src: url('../fonts/figtree-v9-latin-300.woff2') format('woff2');
}
@font-face {
	font-family: var(--default-font);
	font-style: italic;
	font-weight: 300;
	src: url('../fonts/figtree-v9-latin-300italic.woff2') format('woff2');
}
@font-face {
	font-family: var(--default-font);
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/figtree-v9-latin-regular.woff2') format('woff2');
}
@font-face {
	font-family: var(--default-font);
	font-style: italic;
	font-weight: 400;
	src: url('../fonts/figtree-v9-latin-italic.woff2') format('woff2');
}
@font-face {
	font-family: var(--default-font);
	font-style: normal;
	font-weight: 700;
	src: url('../fonts/figtree-v9-latin-700.woff2') format('woff2');
}
@font-face {
	font-family: var(--default-font);
	font-style: italic;
	font-weight: 700;
	src: url('../fonts/figtree-v9-latin-700italic.woff2') format('woff2');
}