/**
 * Salam — Design tokens (100 % Figma salam-v2)
 *
 * Source cloud (MCP Figma) :
 *   https://www.figma.com/design/qRTphjArgqamEbqpgvSDuX/salam-v2
 *
 * Composants analysés : Menu (1:57), Footer (1:11)
 * Frames : Desktop 1440px · Mobile 430px
 */

:root {
	/* ── Couleurs (rgb extraits Figma MCP) ──────────────────────────── */
	--salam-color-primary: #e6122a;
	--salam-color-primary-dark: #b80e21;
	--salam-color-primary-light: #ff1a35;
	--salam-color-accent: #ecb213;
	--salam-color-accent-light: #f5c842;

	--salam-color-text: #1a1a1a;
	--salam-color-text-muted: rgba(255, 255, 255, 0.6);
	--salam-color-text-inverse: #ffffff;

	--salam-color-bg: #ffffff;
	--salam-color-bg-dark: #333333;
	--salam-color-bg-cream: #f7f6f2;
	--salam-color-bg-page: #e8e0d5;
	--salam-color-border: #e0dcd4;

	/* Accueil (maquette Figma 1:189) */
	--salam-color-section-cream: #f7f6f2;
	--salam-color-gold: #c1a037;
	--salam-color-heading-red: #841b15;
	--salam-color-product-title: #664a24;
	--salam-color-recipe-card: #fbf8ee;
	--salam-color-ink: #13110c;

	/* Header / footer — dégradé Figma Menu & Footer */
	--salam-gradient-header: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0.3) 100%
	),
	linear-gradient(90deg, #e6122a 0%, #e6122a 100%);

	--salam-overlay-hero-start: rgba(0, 0, 0, 0.12);
	--salam-overlay-hero-end: rgba(0, 0, 0, 0.48);
	--salam-overlay-page-start: rgba(0, 0, 0, 0.35);
	--salam-overlay-page-end: rgba(0, 0, 0, 0.58);

	--salam-footer-border: rgba(255, 255, 255, 0.22);
	--salam-footer-label: rgba(255, 255, 255, 0.6);

	/* ── Typographie Figma ──────────────────────────────────────────── */
	/* Contenu courant : Open Sans · Titres display / nav : Salam Display */
	--salam-font-open: "Open Sans", "Segoe UI", system-ui, sans-serif;
	--salam-font-heading: var(--salam-font-open);
	--salam-font-body: var(--salam-font-open);
	--salam-font-nav: "Salam Display", "Segoe UI", "Helvetica Neue", sans-serif;
	--salam-font-display: "Salam Display", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	--salam-font-optima: var(--salam-font-open);

	--salam-font-size-body: 1rem;
	--salam-font-size-body-lg: 1.0625rem;
	--salam-font-size-nav: 1.125rem; /* 18px Figma Menu 1:57 */
	--salam-font-size-footer-title: 1.125rem;
	--salam-font-size-footer-link: 0.875rem;
	--salam-font-size-button: 0.9375rem;
	--salam-font-size-small: 0.875rem;
	--salam-font-size-caption: 0.8125rem;

	--salam-line-height-body: 1.6;
	--salam-line-height-content: 1.75;
	--salam-line-height-heading: 1.1;
	--salam-line-height-nav: 1.1;
	--salam-line-height-footer: 1.2;

	--salam-font-size-h1: clamp(2.25rem, 4.5vw, 4rem);
	--salam-font-size-h2: clamp(1.75rem, 3.2vw, 2.75rem);
	--salam-font-size-h3: clamp(1.375rem, 2.4vw, 2rem);
	--salam-font-size-page-hero: clamp(2rem, 4vw, 3.25rem);

	--salam-letter-spacing-nav: 0.1125rem; /* 1.8px Figma */
	--salam-letter-spacing-button: 0.05em;
	--salam-letter-spacing-badge: 0.06em;
	--salam-letter-spacing-footer-title: -0.04em;
	--salam-letter-spacing-footer-link: -0.04em;

	/* ── Layout Figma ───────────────────────────────────────────────── */
	--salam-design-width: 1440px;
	--salam-container-max: 1248px;
	--salam-container-padding: 6rem;

	--salam-spacing-section: 5rem;
	--salam-spacing-block: 2.5rem;
	--salam-spacing-gap: 2rem;
	--salam-spacing-gap-sm: 1rem;
	--salam-spacing-footer-col: 1.5rem;
	--salam-spacing-footer-link: 0.75rem;

	--salam-header-height: 72px;
	--salam-header-bg-height: clamp(64px, 7.986vw, 115px); /* menu_bg.png @ 1440px */
	--salam-header-border: 4px solid var(--salam-color-accent);
	--salam-bg-menu: image-set(
		url("../images/figma/v2/menu_bg.webp") type("image/webp"),
		url("../images/figma/v2/menu_bg.png") type("image/png")
	);
	--salam-bg-menu-mobile: url("../images/figma/v2/bg_menu_mobile.png");
	--salam-logo-max-height: calc(115px * 0.95); /* −5 % · 109.25px */
	--salam-header-nav-gap: 1.5rem;
	--salam-header-panel-gap-start: clamp(1rem, 4vw, 3.25rem);
	--salam-header-panel-gap-end: clamp(1rem, 5vw, 4rem);

	--salam-hero-min-height: 600px;
	--salam-page-hero-min-height: clamp(220px, 32vh, 320px);

	--salam-footer-height: 327px;
	--salam-footer-padding-x: 6rem;

	/* ── Formes & effets ────────────────────────────────────────────── */
	--salam-radius-sm: 4px;
	--salam-radius-md: 8px;
	--salam-radius-lg: 12px;
	--salam-radius-pill: 999px;
	--salam-radius-social: 40px;

	--salam-shadow-card: 0 4px 24px rgba(26, 26, 26, 0.07);
	--salam-shadow-card-hover: 0 8px 32px rgba(26, 26, 26, 0.11);
	--salam-shadow-header: 0 2px 16px rgba(26, 26, 26, 0.06);

	--salam-transition: 0.25s ease;

	/* ── Grilles responsive ─────────────────────────────────────────── */
	--salam-grid-products: repeat(4, 1fr);
	--salam-grid-recipes: repeat(3, 1fr);
	--salam-grid-gammes: repeat(4, 1fr);
	--salam-grid-footer: repeat(4, 1fr);

	--salam-bp-tablet: 768px;
	--salam-bp-desktop: 1024px;
	--salam-bp-wide: 1440px;
	--salam-mobile-frame: 430px;

	/* ── Assets Figma local (textures) ──────────────────────────────── */
	--salam-bg-footer-texture: image-set(
		url("../images/figma/v2/footer-texture.webp") type("image/webp"),
		url("../images/figma/v2/footer-texture.png") type("image/png")
	);
	--salam-bg-footer-mobile: url("../images/figma/v2/footer_mobile_.webp");
	--salam-bg-section-divider: url("../images/figma/v2/salam-mark.svg");
	--salam-bg-section-texture: image-set(
		url("../images/figma/v2/section-pattern.webp") type("image/webp"),
		url("../images/figma/v2/section-pattern.png") type("image/png")
	);
	--salam-bg-hero-default: var(--salam-bg-section-texture);
	--salam-bg-hero-pattern: var(--salam-bg-section-texture);
	--salam-bg-texture-cream: var(--salam-bg-section-texture);

	/* Décors accueil (maquette Figma 1:189) */
	--salam-img-mark: url("../images/figma/v2/salam-mark.svg");
	--salam-img-flourish: url("../images/figma/v2/title-flourish.svg");
	--salam-img-tab-wing: url("../images/figma/v2/tab-wing.svg");
	--salam-img-btn: url("../images/figma/v2/btn.png");
	--salam-img-btn-gauche: url("../images/figma/v2/btn_gauche.png");
	--salam-img-btn-centre: url("../images/figma/v2/btn_centre.png");
	--salam-img-btn-droite: url("../images/figma/v2/btn_droite.png");
	--salam-btn-height: 57px;
	--salam-tab-height: 41px;
	--salam-tab-height-hover: 45px;
	--salam-btn-cap-width: 35px;
	--salam-btn-cap-overlap: 3px;
	--salam-btn-fill: #c4a441;
	--salam-img-section-pattern: var(--salam-bg-section-texture);
	--salam-img-recipes-bg: image-set(
		url("../images/figma/v2/bg-recette.webp") type("image/webp"),
		url("../images/figma/v2/bg-recette.png") type("image/png")
	);
	--salam-img-recipes-bg-mobile: url("../images/figma/v2/bg_recette_mobile.webp");
	--salam-img-wave: url("../images/figma/v2/footer-border-top.svg");

	/* Alias rétrocompatibles */
	--color-primary: var(--salam-color-primary);
	--color-primary-dark: var(--salam-color-primary-dark);
	--color-primary-light: var(--salam-color-primary-light);
	--color-accent: var(--salam-color-accent);
	--color-accent-light: var(--salam-color-accent-light);
	--color-text: var(--salam-color-text);
	--color-text-muted: var(--salam-color-text-muted);
	--color-bg: var(--salam-color-bg);
	--color-bg-alt: var(--salam-color-bg-cream);
	--color-border: var(--salam-color-border);
	--color-white: var(--salam-color-text-inverse);
	--color-gold: var(--salam-color-accent);
	--color-gray-200: #e8e8e8;
	--color-gray-600: #666666;
	--color-gray-900: #1a1a1a;
	--color-off-white: var(--salam-color-bg-cream);
	--font-heading: var(--salam-font-heading);
	--font-body: var(--salam-font-body);
	--font-sans: var(--salam-font-body);
	--font-serif: var(--salam-font-heading);
	--header-height: var(--salam-header-height);
	--section-spacing: var(--salam-spacing-section);
	--radius: var(--salam-radius-sm);
	--shadow: var(--salam-shadow-card);
	--container-max: var(--salam-container-max);
	--container-padding: var(--salam-container-padding);
	--spacing-section: var(--salam-spacing-section);
	--spacing-block: var(--salam-spacing-block);
	--radius-sm: var(--salam-radius-sm);
	--radius-md: var(--salam-radius-md);
	--radius-lg: var(--salam-radius-lg);
	--shadow-card: var(--salam-shadow-card);
	--transition: var(--salam-transition);
}

@media (max-width: 1023px) {
	:root {
		--salam-container-padding: 2.5rem;
		--salam-footer-padding-x: 2.5rem;
		--salam-spacing-section: 4rem;
		--salam-grid-products: repeat(2, 1fr);
		--salam-grid-recipes: repeat(2, 1fr);
		--salam-grid-gammes: repeat(2, 1fr);
		--salam-grid-footer: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	:root {
		--salam-container-padding: 1.25rem;
		--salam-footer-padding-x: 1.25rem;
		--salam-spacing-section: 3rem;
		--salam-spacing-block: 1.75rem;
		--salam-header-height: 64px;
		--salam-grid-products: repeat(2, 1fr);
		--salam-grid-recipes: 1fr;
		--salam-grid-gammes: repeat(2, 1fr);
		--salam-grid-footer: 1fr;
		--salam-hero-min-height: 678px;
		--salam-page-hero-min-height: clamp(180px, 25vh, 280px);
		--salam-font-size-page-hero: 26px;
	}
}

@media (max-width: 479px) {
	:root {
		--salam-grid-products: 1fr;
	}
}