/* ============================================================================
   H12 IMPRESSIONS — DESIGN TOKENS
   Source de vérité des couleurs, typographie, rayons, ombres, espacements.
   Extraits du système de design (Site Web/README.md). Ne pas coder de valeurs
   « en dur » ailleurs : toujours passer par ces variables.
   ========================================================================== */

:root {
	/* ---- Couleurs ---- */
	--h12-red: #C4161C;          /* Accent, CTA, highlights */
	--h12-red-hover: #A21117;    /* Hover CTA rouge */
	--h12-ink: #141414;          /* Texte, sections foncées */
	--h12-footer: #0E0E0E;       /* Noir footer */
	--h12-white: #FFFFFF;
	--h12-bg-gray: #F5F5F5;      /* Sections alternées */
	--h12-placeholder: #EDEDED;  /* Fond image placeholder */
	--h12-placeholder-hatch: #E4E4E4;
	--h12-border: #E4E4E4;
	--h12-text-2: #6B6B6B;       /* Texte secondaire */
	--h12-text-3: #8A8A8A;       /* Texte tertiaire / mono discret */
	--h12-text-4: #9A9A9A;
	--h12-hero-sub: #C4C4C4;     /* Sous-texte sur héros sombre */

	/* Badge « prêt » / succès */
	--h12-ok-bg: #E7F6ED;
	--h12-ok-text: #1B7F45;

	/* Marine (boutique partenaire type) */
	--h12-navy: #1a2540;
	--h12-navy-2: #1F2A44;

	/* Couleurs de vêtement (swatches configurateur) */
	--h12-garment-forest: #22402F;

	/* ---- Typographie ---- */
	--h12-font-display: 'Anton', sans-serif;         /* Titres, prix, chiffres */
	--h12-font-body: 'Inter', system-ui, sans-serif; /* Corps, labels, produits */
	--h12-font-mono: 'Space Mono', monospace;        /* Labels techniques */

	/* Échelle de titres (clamp responsive) */
	--h12-h-hero: clamp(56px, 7vw, 96px);
	--h12-h-section: clamp(38px, 5vw, 58px);
	--h12-h-product: 44px;

	/* ---- Rayons ---- */
	--h12-radius-sm: 2px;   /* Boutons, badges */
	--h12-radius: 3px;      /* Cartes, conteneurs */
	--h12-radius-lg: 4px;   /* Grands conteneurs */

	/* ---- Bordures ---- */
	--h12-bd: 1px solid var(--h12-border);
	--h12-bd-2: 1.5px solid var(--h12-border);

	/* ---- Ombres ---- */
	--h12-shadow-card: 0 18px 40px rgba(0, 0, 0, .13);
	--h12-shadow-partner: 0 20px 44px rgba(0, 0, 0, .14);
	--h12-shadow-dark: 0 16px 40px rgba(0, 0, 0, .35);

	/* ---- Espacements ---- */
	--h12-pad-section-y: 76px;
	--h12-pad-section-x: 40px;
	--h12-maxw: 1440px;
	--h12-maxw-narrow: 1200px;
	--h12-maxw-content: 1360px;

	/* ---- Transitions / easing ---- */
	--h12-ease: cubic-bezier(.16, 1, .3, 1);
	--h12-t-fast: .12s;
	--h12-t-card: .15s;
	--h12-t-reveal: .75s;

	/* ---- Textures (signature « imprimé ») ---- */
	--h12-halftone-red: radial-gradient(var(--h12-red) 22%, transparent 24%);
	--h12-grain: radial-gradient(#fff 1px, transparent 1.2px);
	--h12-hatch-workshop: repeating-linear-gradient(45deg, rgba(0, 0, 0, .1) 0 8px, transparent 8px 16px);
	--h12-placeholder-tex: repeating-linear-gradient(45deg, #E4E4E4 0 10px, #EDEDED 10px 20px);
}