/**
 * Design tokens (variables CSS)
 * Renseignés à l'étape 4, à partir de la capture de référence Shopify.
 * Ne pas coder de valeurs en dur ailleurs dans le thème : tout doit
 * référencer ces variables (couleurs, typographies, espacements, rayons).
 */

:root {
	/* Couleurs -- extraites de la référence Shopify (styles calculés) */
	--baba-color-bg: #ffffff;
	--baba-color-bg-alt: #f7f7f7;
	--baba-color-text: rgba(0, 0, 0, 0.75);
	--baba-color-text-solid: #000000;
	--baba-color-text-inverse: #ffffff;
	--baba-color-accent: #d6b379; /* boutons, liens, éléments de marque */
	/* Liens dans un corps de texte : la référence y emploie une teinte à
	   part, un poil plus claire que l'accent et légèrement transparente
	   (relevée sur les pages éditoriales). */
	--baba-color-link: rgba(215, 187, 139, 0.85);
	--baba-color-accent-text: #ffffff;
	--baba-color-badge-bg: #000000;
	--baba-color-badge-text: #ffffff;
	--baba-color-border: rgba(0, 0, 0, 0.1);

	/* Typographies */
	--baba-font-heading: 'Platypi', serif;
	--baba-font-body: 'Fraunces', serif;

	--baba-text-base: 16.8px;
	--baba-text-sm: 12.6px;
	--baba-text-md: 15.75px;
	--baba-text-lg: 18.9px;
	--baba-text-nav: 14.7px;
	--baba-text-h1: 40px;
	--baba-text-h2: 24px;

	--baba-heading-letter-spacing: 0.6px;
	--baba-nav-letter-spacing: 0.63px;
	--baba-button-letter-spacing: 1.05px;

	--baba-font-weight-normal: 400;
	--baba-font-weight-semibold: 600;
	--baba-font-weight-bold: 800;

	/* Interlignes SANS UNITÉ, pour qu'ils suivent la taille de chaque texte.
	   Ils étaient figés en pixels (29.6px / 31.2px), valeurs justes pour du
	   16.8px et du 24px mais héritées telles quelles par tous les textes
	   plus petits, qui se retrouvaient bien trop aérés — d'où des écarts
	   entre lignes trop grands un peu partout sur le site.
	   Ratios repris de la référence (reference/css/base.css) :
	     corps   : calc(1 + .8 / var(--font-body-scale)),   scale 1.05
	     titres  : calc(1 + .3 / max(1, var(--font-heading-scale))), scale 0.952 */
	--baba-line-height-body: 1.762;
	--baba-line-height-h2: 1.3;

	/* Espacements (échelle modulaire) */
	--baba-space-xs: 8px;
	--baba-space-sm: 16px;
	--baba-space-md: 24px;
	--baba-space-lg: 32px;
	--baba-space-xl: 48px;
	--baba-space-2xl: 64px;
	--baba-space-3xl: 96px;

	/* Conteneur & grille */
	--baba-container-max-width: 1600px;
	--baba-container-padding: 52.5px;
	--baba-container-padding-mobile: 20px;

	/* Rayons / bordures */
	--baba-radius-none: 0px; /* boutons : coins carrés */
	--baba-radius-pill: 42px; /* badges promo : pilule */
	--baba-radius-card: 4px;

	/* Points de rupture (alignés sur la référence Shopify/Dawn) */
	--baba-breakpoint-mobile: 749px;
	--baba-breakpoint-desktop: 989px;
}