/*
 * Design tokens. Every value used anywhere else in the theme is declared here
 * and nowhere else: no component file may contain a raw hex code or a raw
 * pixel size.
 */

:root {
	color-scheme: dark;

	/* --- Couleurs ------------------------------------------------------- */
	--ccc-color-bg: #121214;
	--ccc-color-surface: #1a1a1e;
	--ccc-color-surface-raised: #232329;
	--ccc-color-border: #32323a;
	--ccc-color-border-strong: #4a4a55;

	/*
	 * Les trois niveaux passent le AA (4.5:1) sur le fond comme sur les
	 * surfaces : 16.0, 8.0 et 5.9. Le gris le plus sombre était à 3.7 et
	 * échouait sur les métadonnées de film ; ne pas l'assombrir à nouveau
	 * sans recalculer.
	 */
	--ccc-color-text: #ededf0;
	--ccc-color-text-muted: #a9a9b3;
	--ccc-color-text-faint: #90909a;

	/*
	 * Rouge de fauteuil de cinéma, en deux jetons parce qu'un seul ne peut
	 * pas faire les deux métiers :
	 *
	 *   --accent       #f2555f  5.6:1 sur le fond  -> textes, bordures, marques
	 *   --accent-deep  #8e1a22  2.1:1 sur le fond  -> APLATS UNIQUEMENT
	 *
	 * Le velours profond est illisible en texte sur noir, mais porte du blanc
	 * à 9.0:1. Ne jamais l'utiliser comme couleur de texte sur le fond.
	 */
	--ccc-color-accent: #f2555f;
	--ccc-color-accent-strong: #ff6b74;
	--ccc-color-accent-deep: #8e1a22;
	--ccc-color-accent-deep-strong: #a62029;
	--ccc-color-accent-dim: rgba(242, 85, 95, 0.14);
	--ccc-color-on-accent: #ffffff;

	/* Orange brûlé : l'accent étant rouge, une alerte rouge ne se verrait plus. */
	--ccc-color-danger: #e8734a;
	--ccc-color-success: #56b98a;
	--ccc-color-focus: #78c4ff;

	/* --- Typographie ---------------------------------------------------- */
	--ccc-font-title: "The Aliens", "Courier Prime", ui-monospace, monospace;
	--ccc-font-display: "Courier Prime", ui-monospace, "Courier New", Courier, monospace;
	--ccc-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

	--ccc-text-2xs: 0.6875rem;
	--ccc-text-xs: 0.75rem;
	--ccc-text-sm: 0.875rem;
	--ccc-text-base: 1rem;
	--ccc-text-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
	--ccc-text-xl: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
	--ccc-text-2xl: clamp(1.5rem, 1.25rem + 1.2vw, 2rem);
	--ccc-text-3xl: clamp(2rem, 1.5rem + 2.4vw, 3rem);
	--ccc-text-4xl: clamp(2.5rem, 1.7rem + 3.6vw, 4rem);

	--ccc-leading-tight: 1.15;
	--ccc-leading-snug: 1.35;
	--ccc-leading-normal: 1.6;

	--ccc-tracking-wide: 0.08em;
	--ccc-tracking-wider: 0.16em;

	/*
	 * Correction optique des capitales.
	 *
	 * Flexbox centre la boite em, pas l'encre. Courier Prime mesure 0.78em
	 * d'ascendante pour 0.34em de descendante, et ses capitales culminent a
	 * 0.59em sans aucun jambage : l'encre occupe donc le haut de la boite et
	 * le texte parait remonte dans tout conteneur a padding symetrique.
	 *
	 *   decalage = (capHeight - emAscent + emDescent) / 2
	 *            = (0.59 - 0.78 + 0.34) / 2 = 0.075em
	 *
	 * Mesure au navigateur en dessinant la fonte a 200px de corps. A ne
	 * recalculer que si la fonte de titrage change.
	 */
	--ccc-caps-nudge: 0.075em;

	/* --- Espacements, base 4px ------------------------------------------ */
	--ccc-space-1: 0.25rem;
	--ccc-space-2: 0.5rem;
	--ccc-space-3: 0.75rem;
	--ccc-space-4: 1rem;
	--ccc-space-5: 1.25rem;
	--ccc-space-6: 1.5rem;
	--ccc-space-7: 1.75rem;
	--ccc-space-8: 2rem;
	--ccc-space-10: 2.5rem;
	--ccc-space-12: 3rem;
	--ccc-space-16: 4rem;
	--ccc-space-20: 5rem;

	/* --- Mise en page --------------------------------------------------- */
	--ccc-shell-max: 72rem;
	--ccc-shell-narrow: 42rem;
	--ccc-shell-gutter: clamp(1rem, 4vw, 2.5rem);
	--ccc-poster-ratio: 2 / 3;
	--ccc-poster-min: 9rem;

	/* --- Formes et profondeur ------------------------------------------- */
	--ccc-radius-sm: 4px;
	--ccc-radius-md: 8px;
	--ccc-radius-lg: 14px;
	--ccc-radius-full: 999px;

	--ccc-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.28);
	--ccc-shadow-raised: 0 2px 4px rgba(0, 0, 0, 0.45), 0 16px 40px rgba(0, 0, 0, 0.35);

	/* --- Mouvement ------------------------------------------------------ */
	--ccc-ease: cubic-bezier(0.2, 0.6, 0.3, 1);
	--ccc-duration: 160ms;
	--ccc-transition: var(--ccc-duration) var(--ccc-ease);
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--ccc-duration: 0ms;
	}
}