/*
 * Spartan Nutrition — jetons de design.
 *
 * Ces valeurs sont les valeurs de repli : l'outil de personnalisation injecte
 * ensuite un bloc :root en ligne qui écrase les couleurs, la typographie,
 * l'arrondi et la largeur du conteneur.
 */

:root {
	/* --- Couleurs de marque ------------------------------------------- */
	--sp-primary: #E1251B;
	--sp-primary-dark: #B41C14;
	--sp-primary-soft: rgba(225, 37, 27, 0.12);
	--sp-primary-rgb: 225, 37, 27;
	--sp-accent: #F2A11B;
	--sp-accent-soft: rgba(242, 161, 27, 0.14);
	--sp-sale: #D01C4C;
	--sp-success: #12854B;
	--sp-warning: #9A5B00;

	/* --- Surfaces sombres --------------------------------------------- */
	--sp-black: #0B0D0F;
	--sp-anthracite: #16191D;
	--sp-surface-2: #1F2429;
	--sp-line-dark: #2C333A;

	/* --- Surfaces claires --------------------------------------------- */
	--sp-white: #FFFFFF;
	--sp-off: #F6F7F9;
	--sp-grey-50: #FAFBFC;
	--sp-grey-100: #EFF1F4;
	--sp-grey-200: #E2E5EA;
	--sp-grey-300: #CBD0D8;
	--sp-grey-400: #9BA3AE;

	/* --- Texte --------------------------------------------------------- */
	--sp-ink: #14171A;
	--sp-ink-soft: #5A626C;
	--sp-ink-invert: #FFFFFF;
	--sp-ink-invert-soft: rgba(255, 255, 255, 0.72);

	/* --- Boutons ------------------------------------------------------- */
	--sp-btn-bg: var(--sp-primary);
	--sp-btn-bg-hover: var(--sp-primary-dark);
	--sp-btn-text: #FFFFFF;

	/* --- Typographie --------------------------------------------------- */
	--sp-font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--sp-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--sp-fs-xs: 0.75rem;    /* 12px */
	--sp-fs-sm: 0.8125rem;  /* 13px */
	--sp-fs-base: 0.9375rem;/* 15px */
	--sp-fs-md: 1rem;       /* 16px */
	--sp-fs-lg: 1.125rem;   /* 18px */
	--sp-fs-xl: clamp(1.25rem, 1.05rem + 0.8vw, 1.5rem);
	--sp-fs-2xl: clamp(1.5rem, 1.15rem + 1.6vw, 2.125rem);
	--sp-fs-3xl: clamp(1.9rem, 1.3rem + 2.8vw, 3rem);
	--sp-fs-hero: clamp(2.2rem, 1.2rem + 4.6vw, 4.25rem);

	--sp-lh-tight: 1.08;
	--sp-lh-snug: 1.28;
	--sp-lh-base: 1.62;

	--sp-tracking-tight: -0.02em;
	--sp-tracking-wide: 0.08em;

	/* --- Espacements ---------------------------------------------------- */
	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 0.75rem;
	--sp-4: 1rem;
	--sp-5: 1.25rem;
	--sp-6: 1.5rem;
	--sp-8: 2rem;
	--sp-10: 2.5rem;
	--sp-12: 3rem;
	--sp-16: 4rem;
	--sp-20: 5rem;
	--sp-section: clamp(2.75rem, 1.5rem + 5vw, 5rem);

	/* --- Structure ------------------------------------------------------ */
	--sp-container: 1320px;
	--sp-container-narrow: 860px;
	--sp-gutter: clamp(1rem, 0.6rem + 1.6vw, 2rem);
	--sp-radius: 10px;
	--sp-radius-sm: 5px;
	--sp-radius-lg: 18px;
	--sp-radius-pill: 999px;

	/* --- Ombres --------------------------------------------------------- */
	--sp-shadow-xs: 0 1px 2px rgba(11, 13, 15, 0.06);
	--sp-shadow-sm: 0 2px 8px rgba(11, 13, 15, 0.07);
	--sp-shadow-md: 0 8px 24px rgba(11, 13, 15, 0.09);
	--sp-shadow-lg: 0 18px 48px rgba(11, 13, 15, 0.14);
	--sp-shadow-dark: 0 20px 60px rgba(0, 0, 0, 0.45);

	/* --- Transitions ---------------------------------------------------- */
	--sp-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--sp-t-fast: 140ms var(--sp-ease);
	--sp-t: 220ms var(--sp-ease);

	/* --- Couches -------------------------------------------------------- */
	--sp-z-header: 100;
	--sp-z-overlay: 200;
	--sp-z-panel: 210;
	--sp-z-sticky: 150;
	--sp-z-top: 300;

	/* --- Dimensions fixes ------------------------------------------------ */
	--sp-header-h: 68px;
	--sp-header-h-total: 68px;
	--sp-mobile-bar-h: 60px;
	--sp-tap: 44px; /* cible tactile minimale */
}

@media (min-width: 1024px) {
	:root {
		--sp-header-h: 78px;
		--sp-header-h-total: 131px;
	}
}