/*
 * Tokens Animal-Rit - DA2 « L'Écurie »
 *
 * Deux couches, à ne jamais confondre :
 *
 *   1. PALETTE DE MARQUE (--od-*) : les valeurs exactes de la charte
 *      graphique, page « Les couleurs ». Elles ne changent JAMAIS, ni selon
 *      le thème, ni selon l'écran. Aucune valeur nouvelle ne s'ajoute ici
 *      sans passer par la charte.
 *
 *   2. TOKENS SÉMANTIQUES (--c-*) : ce que les composants utilisent. Ils
 *      pointent vers la palette et changent selon le thème clair ou sombre.
 *      Un composant ne référence JAMAIS --od-* directement, toujours --c-*.
 *      C'est ce qui rend le double thème tenable.
 *
 * Contrastes vérifiés au calcul WCAG 2.1, détail dans
 * PLAN-EXECUTION-DA2-ECURIE-2026-07-30.md section 4.
 */

:root {
	/* ---------------------------------------------------------------
	 * 1. PALETTE DE MARQUE - valeurs de la charte, immuables
	 * --------------------------------------------------------------- */
	--od-navy: #020645;   /* Bleu foncé   - Pantone 2768C */
	--od-eblue: #011DBB;  /* Bleu électrique - Pantone 2736C */
	--od-orange: #E87032; /* Orange       - Pantone 151C */
	--od-gold: #CFAF63;   /* Doré doux    - Pantone 4525C */
	--od-ivory: #F8F4E3;  /* Ivoire       - Pantone 4545C */
	--od-white: #fff;

	/* Dérivés de la palette, obtenus par assombrissement ou éclaircissement
	 * d'une couleur de la charte. Ils existent pour une seule raison :
	 * rendre une couleur de marque lisible là où elle échoue au contraste.
	 * Ce ne sont pas de nouvelles couleurs de marque. */
	--od-gold-ink: #8A6B1F;   /* doré assombri, seul doré lisible en texte sur fond clair (4.8:1) */
	--od-eblue-lift: #6C8CFF; /* bleu électrique éclairci, lisible sur fond sombre (6.6:1) */
	--od-paper: #FDFBF3;      /* ivoire éclairci, fond de page du thème clair */
	--od-navy-deep: #01031F;  /* navy assombri, fond de page du thème sombre */
	--od-navy-elev: #0A0F35;  /* navy relevé, surfaces en relief du thème sombre */

	/* ---------------------------------------------------------------
	 * 2. TOKENS SÉMANTIQUES - thème clair (défaut)
	 * --------------------------------------------------------------- */

	/* Fonds */
	--c-bg: var(--od-paper);
	--c-bg-elev: var(--od-ivory);      /* plaques, cellules produit, encarts */
	--c-bg-invert: var(--od-navy);     /* sections à contre-emploi (bloc sellerie) */
	--c-plate: var(--od-ivory);        /* fond des packshots, toujours clair dans les 2 thèmes */

	/* Encres */
	--c-ink: var(--od-navy);                   /* texte courant - 18.4:1 AAA */
	--c-ink-soft: rgba(2, 6, 69, .68);         /* texte secondaire - 10.6:1 AAA */
	--c-ink-faint: rgba(2, 6, 69, .46);        /* mentions, légendes - 5.6:1 AA */
	--c-ink-invert: var(--od-ivory);           /* texte sur --c-bg-invert */
	--c-ink-invert-soft: rgba(248, 244, 227, .72);

	/* Filets et bordures */
	--c-line: rgba(2, 6, 69, .14);
	--c-line-strong: rgba(2, 6, 69, .32);
	--c-line-gold: rgba(207, 175, 99, .55);

	/* Accent interactif - liens, survols, chiffres mis en avant */
	--c-accent: var(--od-eblue);       /* 10.7:1 sur papier AAA */
	--c-accent-ink: var(--od-white);   /* texte posé SUR l'accent */

	/* Appel à l'action - un seul niveau orange par vue */
	--c-cta: var(--od-orange);
	--c-cta-ink: var(--od-navy);       /* 6.3:1 AA */
	--c-cta-hover: #D25F22;

	/* Doré : décoratif dans les deux thèmes, texte seulement quand lisible */
	--c-deco: var(--od-gold);          /* filets, bordures, aplats - jamais du texte en clair */
	--c-deco-ink: var(--od-gold-ink);  /* le doré quand il porte du texte - 4.8:1 AA */

	/* États */
	--c-focus: var(--od-eblue);
	--c-success: #1E7A4C;
	--c-danger: #B3261E;
	--c-muted: rgba(2, 6, 69, .06);    /* fond de zone désactivée, squelette */

	/* Ombres - discrètes, la DA2 travaille au filet, pas à l'ombre portée */
	--c-shadow-sm: 0 1px 2px rgba(2, 6, 69, .06);
	--c-shadow-md: 0 12px 28px -18px rgba(2, 6, 69, .38);

	/* Traitement photo : plein rendu en thème clair */
	--c-photo-filter: saturate(.94) contrast(1.02);

	/* Indique au navigateur quel thème natif utiliser pour les champs de
	 * formulaire, listes déroulantes et barres de défilement. */
	color-scheme: light;

	/* ---------------------------------------------------------------
	 * 3. TYPOGRAPHIE
	 * --------------------------------------------------------------- */

	/* La police de titre de la charte est Audela. Elle n'est pas encore en
	 * notre possession : la charte indique page 33 qu'elle est fournie avec
	 * les livrables de marque, elle est donc à réclamer à l'agence, pas à
	 * acheter. Spectral tient la place en attendant, c'est le serif libre le
	 * plus proche de son dessin. Le remplacement se fait ICI, sur cette seule
	 * ligne, sans toucher un seul écran. */
	--od-serif: "Spectral", Georgia, "Times New Roman", serif;
	--od-sans: "Poppins", system-ui, -apple-system, sans-serif;
	--od-hand: "Shadows Into Light", cursive;

	/* Échelle fluide. Les bornes basses sont calées pour rester lisibles à
	 * 320px, les bornes hautes pour ne pas exploser au-delà de 1600px. */
	--t-display: clamp(2.6rem, 5.4vw, 4.75rem);
	--t-h1: clamp(2.15rem, 4.4vw, 3.85rem);
	--t-h2: clamp(1.7rem, 3.4vw, 3rem);
	--t-h3: clamp(1.25rem, 1.9vw, 1.7rem);
	--t-h4: clamp(1.05rem, 1.3vw, 1.2rem);
	--t-body: 1rem;
	--t-small: .875rem;
	--t-micro: .75rem;
	--t-num: clamp(3.4rem, 9vw, 8rem);   /* les gros chiffres de la DA2 */

	--lh-tight: 1.02;
	--lh-title: 1.12;
	--lh-body: 1.7;
	--ls-caps: .22em;   /* interlettrage des capitales */

	/* ---------------------------------------------------------------
	 * 4. ESPACEMENT, GRILLE, RAYONS, MOUVEMENT
	 * --------------------------------------------------------------- */
	--sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
	--sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
	--sp-9: 6rem;    --sp-10: 8rem;

	--pad-x: clamp(1.125rem, 4vw, 4rem);      /* gouttière de page */
	--sec-y: clamp(2.75rem, 6.5vw, 5.75rem);  /* respiration verticale d'une section */
	--container: 1280px;
	--rail-w: clamp(17.5rem, 32vw, 29.5rem);  /* colonne éditoriale fixe */
	--measure: 62ch;                          /* longueur de ligne confortable */

	--r-sm: 3px;
	--r-md: 6px;
	--r-pill: 999px;

	--ease: cubic-bezier(.2, .8, .2, 1);
	--dur-1: .18s;
	--dur-2: .4s;
	--dur-3: .95s;

	--z-drawer: 300;
	--z-header: 200;
	--z-grain: 400;
}

/* -------------------------------------------------------------------
 * THÈME SOMBRE
 *
 * Appliqué soit par préférence système, soit par choix explicite du
 * visiteur via data-theme. Le choix explicite prime toujours, dans les
 * deux sens : un visiteur en préférence système sombre qui demande le
 * thème clair doit l'obtenir.
 * ------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--c-bg: var(--od-navy-deep);
		--c-bg-elev: var(--od-navy-elev);
		--c-bg-invert: #000414;
		--c-plate: var(--od-ivory);

		--c-ink: var(--od-ivory);
		--c-ink-soft: rgba(248, 244, 227, .74);
		--c-ink-faint: rgba(248, 244, 227, .52);
		--c-ink-invert: var(--od-ivory);
		--c-ink-invert-soft: rgba(248, 244, 227, .72);

		--c-line: rgba(248, 244, 227, .16);
		--c-line-strong: rgba(248, 244, 227, .34);
		--c-line-gold: rgba(207, 175, 99, .48);

		/* Le bleu électrique de la charte tombe à 1.8:1 sur fond sombre.
		 * Sa version éclaircie tient 6.6:1 tout en restant reconnaissable. */
		--c-accent: var(--od-eblue-lift);
		--c-accent-ink: var(--od-navy);

		--c-cta: var(--od-orange);
		--c-cta-ink: var(--od-navy);
		--c-cta-hover: #F0834A;

		/* Le doré de la charte est excellent sur fond sombre (9.6:1) :
		 * il peut y porter du texte, contrairement au thème clair. */
		--c-deco: var(--od-gold);
		--c-deco-ink: var(--od-gold);

		--c-focus: var(--od-gold);
		--c-success: #4FBF87;
		--c-danger: #F2837B;
		--c-muted: rgba(248, 244, 227, .07);

		--c-shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
		--c-shadow-md: 0 14px 34px -18px rgba(0, 0, 0, .9);

		/* Une photo plein cadre en pleine luminosité sur fond noir éblouit. */
		--c-photo-filter: saturate(.86) contrast(1.04) brightness(.88);

		color-scheme: dark;
	}
}

/* Choix explicite du visiteur - prime sur la préférence système */
:root[data-theme="dark"] {
	--c-bg: var(--od-navy-deep);
	--c-bg-elev: var(--od-navy-elev);
	--c-bg-invert: #000414;
	--c-plate: var(--od-ivory);

	--c-ink: var(--od-ivory);
	--c-ink-soft: rgba(248, 244, 227, .74);
	--c-ink-faint: rgba(248, 244, 227, .52);
	--c-ink-invert: var(--od-ivory);
	--c-ink-invert-soft: rgba(248, 244, 227, .72);

	--c-line: rgba(248, 244, 227, .16);
	--c-line-strong: rgba(248, 244, 227, .34);
	--c-line-gold: rgba(207, 175, 99, .48);

	--c-accent: var(--od-eblue-lift);
	--c-accent-ink: var(--od-navy);

	--c-cta: var(--od-orange);
	--c-cta-ink: var(--od-navy);
	--c-cta-hover: #F0834A;

	--c-deco: var(--od-gold);
	--c-deco-ink: var(--od-gold);

	--c-focus: var(--od-gold);
	--c-success: #4FBF87;
	--c-danger: #F2837B;
	--c-muted: rgba(248, 244, 227, .07);

	--c-shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
	--c-shadow-md: 0 14px 34px -18px rgba(0, 0, 0, .9);

	--c-photo-filter: saturate(.86) contrast(1.04) brightness(.88);

	color-scheme: dark;
}