/*
 * Tokens de design.
 *
 * Toute la charte est ici, sous forme de variables : couleurs, typographie,
 * rayons, ombres, densité. Aucun sélecteur de composant ne doit contenir de
 * couleur en dur — c'est la règle qui permet de retoucher l'ensemble du site
 * depuis ce seul fichier.
 *
 * Les jetons --c-alt-* décrivent les bandes de couleur pleine : .section--alt,
 * l'appel à l'action et les en-têtes de page y réécrivent la palette locale.
 */

:root {
	color-scheme: light;

	/* Surfaces */
	--c-bg: #f8f6f2;
	--c-bg-alt: #eef1f5;
	--c-surface: #fdfdfb;
	--c-surface-2: #f1f0ec;
	--c-border: #e6e3db;
	--c-border-strong: #d5d1c7;

	/* Texte */
	--c-text: #16202e;
	--c-text-soft: #3f4c60;
	--c-text-muted: #4c5a70;

	/* Accents */
	--c-accent: #1a4f9c;
	--c-accent-hover: #143c78;
	--c-accent-text: #ffffff;
	--c-accent-soft: rgba(26, 79, 156, 0.09);
	--c-accent-2: #8a6a12;
	--c-accent-2-soft: rgba(255, 176, 32, 0.16);

	/* Bouton principal. Par défaut c'est l'accent, mais certaines chartes
	   veulent un aplat vif que l'accent ne peut pas porter : l'accent sert
	   aussi de couleur de lien, il doit rester lisible sur le fond. */
	--c-cta: #ffb020;
	--c-cta-hover: #ffc04d;
	--c-cta-text: #2a1a00;

	/* Appel à l'action final de la page d'accueil. */
	--c-contact-bg: #ffc861;
	--c-contact-text: #16202e;
	--c-contact-text-soft: #3f4c60;
	--c-contact-button-hover: #243954;
	--c-contact-button-text: #ffffff;

	/* Sections alternées.
	   Par défaut, une bande alternée n'est qu'une nuance du fond : ces jetons
	   recopient les jetons de base ; les valeurs ci-dessous posent au contraire
	   un aplat franc, et .section--alt rebascule tout son contenu — surfaces,
	   bordures, accent — sans qu'aucun composant n'ait à le savoir. */
	--c-alt-bg: #152742;
	--c-alt-page: #152742;
	--c-alt-text: #f4f1ee;
	--c-alt-text-soft: rgba(244, 241, 238, 0.86);
	--c-alt-text-muted: rgba(244, 241, 238, 0.7);
	--c-alt-surface: rgba(0, 0, 0, 0.2);
	--c-alt-surface-2: rgba(255, 255, 255, 0.08);
	--c-alt-border: rgba(255, 255, 255, 0.16);
	--c-alt-border-strong: rgba(255, 255, 255, 0.34);
	--c-alt-accent: #ffc861;
	--c-alt-accent-hover: #ffd88f;
	--c-alt-accent-text: #2a1a00;
	--c-alt-accent-soft: rgba(255, 200, 97, 0.16);
	--c-alt-cta: #ffb020;
	--c-alt-cta-hover: #ffc04d;
	--c-alt-cta-text: #2a1a00;

	/* États */
	--c-success: #12805a;
	--c-warning: #a06a08;
	--c-danger: #c0392b;

	/* Décor */
	--hero-glow-1: rgba(255, 176, 32, 0.1);
	--hero-glow-2: rgba(90, 140, 220, 0.22);
	--grid-line: rgba(255, 255, 255, 0.035);

	/* Typographie */
	--font-body: "Inter", "Segoe UI Variable Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-display: var(--font-body);
	--font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;

	--fw-body: 400;
	--fw-medium: 500;
	--fw-strong: 600;
	--fw-display: 700;

	--tracking-display: -0.03em;
	--tracking-eyebrow: 0.12em;
	--leading-display: 1.02;
	--leading-body: 1.6;

	/* Échelle fluide : min 360px, max 1280px */
	--fs-eyebrow: 0.78rem;
	--fs-sm: 0.9rem;
	--fs-base: clamp(1rem, 0.97rem + 0.15vw, 1.075rem);
	--fs-lead: clamp(1.09rem, 1rem + 0.42vw, 1.32rem);
	--fs-h4: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
	--fs-h3: clamp(1.2rem, 1.08rem + 0.55vw, 1.5rem);
	--fs-h2: clamp(1.65rem, 1.35rem + 1.35vw, 2.5rem);
	--fs-h1: clamp(2rem, 1.5rem + 2.2vw, 3.35rem);
	--fs-display: clamp(2.15rem, 1.55rem + 2.6vw, 3.9rem);

	/* Rythme */
	--space-3xs: 0.25rem;
	--space-2xs: 0.5rem;
	--space-xs: 0.75rem;
	--space-sm: 1rem;
	--space-md: 1.5rem;
	--space-lg: 2.25rem;
	--space-xl: 3.5rem;
	--space-2xl: 5rem;
	--section-py: clamp(3.25rem, 2rem + 5vw, 6.5rem);

	/* Formes */
	--radius-xs: 8px;
	--radius-sm: 10px;
	--radius-md: 14px;
	--radius-lg: 18px;
	--radius-pill: 999px;
	--border-width: 1px;

	--shadow-sm: 0 1px 2px rgba(29, 48, 41, 0.05);
	--shadow-md: 0 4px 24px rgba(18, 33, 28, 0.09);
	--shadow-lg: 0 12px 40px rgba(18, 33, 28, 0.13);
	--shadow-accent: 0 4px 20px rgba(255, 176, 32, 0.2);

	/* Structure */
	--wrap: 1180px;
	--wrap-narrow: 760px;
	--wrap-wide: 1400px;
	--gutter: clamp(1.15rem, 0.6rem + 2.4vw, 2.5rem);
	--header-h: 72px;

	--transition: 320ms cubic-bezier(0.22, 1, 0.36, 1);
}