/**
 * 01 - Jetons de design
 *
 * Traduction directe du systeme de design Nocturne Royale en variables CSS.
 * Aucune valeur de couleur, de police ou d espacement ne doit etre ecrite
 * en dur ailleurs dans le theme : tout passe par ces jetons.
 */

:root {

	/* Couleurs de fond, du plus profond au plus eleve. */
	--otb-nuit: #070C1E;
	--otb-surface: #0E1735;
	--otb-surface-haute: #16224A;

	/* Encre. */
	--otb-blanc: #F4F6FC;
	--otb-gris: #A3AECB;

	/* Accent unique du site. */
	--otb-or: #C8A248;
	--otb-or-clair: #E4C97E;

	/* Bleu de marque, jamais utilise comme second accent. */
	--otb-royal: #2A4BD8;
	--otb-royal-profond: #16268C;

	/* Filets et separateurs. */
	--otb-filet: #232F5C;
	--otb-filet-clair: rgba(244, 246, 252, 0.12);

	/* Resultat sportif. */
	--otb-victoire: #2E9E6B;
	--otb-defaite: #C4483F;

	/* Familles typographiques. */
	--otb-titre: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
	--otb-texte: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Echelle typographique fluide. Le texte s adapte a la largeur reelle
	   de l ecran sans point de rupture visible. */
	--otb-t-petit: 0.875rem;
	--otb-t-normal: 1.0625rem;
	--otb-t-moyen: clamp(1.125rem, 0.4vw + 1rem, 1.375rem);
	--otb-t-grand: clamp(1.625rem, 1.6vw + 1.1rem, 2.25rem);
	--otb-t-titre: clamp(2.125rem, 3.4vw + 1.2rem, 3.5rem);
	--otb-t-affiche: clamp(2.75rem, 7vw + 0.5rem, 6rem);
	--otb-t-geant: clamp(4rem, 13vw, 11rem);

	/* Espacement. */
	--otb-e-xs: 4px;
	--otb-e-s: 8px;
	--otb-e-m: 16px;
	--otb-e-l: 32px;
	--otb-e-xl: 64px;
	--otb-e-xxl: clamp(64px, 9vw, 112px);

	/* Rayons. Une seule echelle, tenue partout. */
	--otb-r-s: 4px;
	--otb-r-m: 14px;
	--otb-r-l: 24px;
	--otb-r-pill: 999px;

	/* Profondeur. Les ombres sont teintees bleu, jamais noires. */
	--otb-ombre: 0 24px 60px rgba(7, 12, 30, 0.55);
	--otb-ombre-courte: 0 8px 24px rgba(7, 12, 30, 0.45);

	/* Verre depoli, reserve a l en-tete et a la carte du prochain match. */
	--otb-verre: rgba(14, 23, 53, 0.72);
	--otb-flou: blur(18px);

	/* Mise en page. */
	--otb-largeur: 1240px;

	/* La barre collante a sa propre largeur : elle deborde la colonne de
	   contenu, sinon la marque, neuf entrees de menu et l appel a l action
	   ne tiennent pas sur une seule ligne. */
	--otb-entete-largeur: 1520px;
	--otb-entete-marge: clamp(20px, 4vw, 40px);
	--otb-entete-gap: var(--otb-e-l);
	--otb-nav-taille: 0.8rem;
	--otb-nav-gap: clamp(16px, 1.6vw, 26px);
	--otb-cta-pad: 11px 22px;
	--otb-cta-taille: 0.74rem;
	--otb-largeur-texte: 68ch;
	--otb-marge: clamp(20px, 5vw, 48px);
	--otb-entete-h: 76px;

	/* Mouvement. Une seule courbe pour tout le site. */
	--otb-courbe: cubic-bezier(0.22, 0.61, 0.36, 1);
	--otb-vite: 180ms;
	--otb-moyen: 420ms;
	--otb-lent: 780ms;
}

/* Sections claires : les memes jetons, inverses. Utilise ponctuellement
   pour rompre le rythme sombre sans introduire de nouvelle couleur. */
.otb-clair {
	--otb-nuit: #F4F6FC;
	--otb-surface: #FFFFFF;
	--otb-surface-haute: #E9EDF7;
	--otb-blanc: #070C1E;
	--otb-gris: #4A5878;
	--otb-filet: #D3DAEA;
	--otb-filet-clair: rgba(7, 12, 30, 0.12);
	background: var(--otb-nuit);
	color: var(--otb-blanc);
}