/**
 * CBS Theme — tokens CSS (design-system.md §9)
 * Toutes les variables du design system — aucun style appliqué ici.
 * Couleurs : 4 sources (principale, secondaire, corps, blanc), le reste est dérivé.
 */

:root {
	/* === COULEURS === */
	/* Quatre couleurs sources, éditables depuis Réglages du thème > Couleurs
	   (inc/palette.php). Tout le reste en dérive : ne jamais mettre un hexa
	   ailleurs dans ce bloc. */
	--cbs-primary: #034251;   /* principale : pied de page, sous-menus */
	--cbs-secondary: #895138; /* secondaire : accent, liens, filets, survols */
	--cbs-body: #000000;      /* corps : texte courant, fonds sombres, overlays, base des gris */
	--cbs-white: #ffffff;     /* blanc : fonds clairs, texte sur sombre */

	/* Principale éclaircie : survol des boutons bleus. Assombrie : boutons secondaires. */
	--cbs-primary-light: color-mix(in srgb, var(--cbs-primary) 80%, var(--cbs-white));
	--cbs-primary-dark: color-mix(in srgb, var(--cbs-primary) 75%, var(--cbs-body));

	/* Silver : échelle de gris dérivée du corps et du blanc.
	   900 = fonds sombres (header, sections, overlays), 850 = cartes sur sombre. */
	--cbs-silver-50: color-mix(in srgb, var(--cbs-body) 3%, var(--cbs-white));
	--cbs-silver-100: color-mix(in srgb, var(--cbs-body) 5%, var(--cbs-white));
	--cbs-silver-200: color-mix(in srgb, var(--cbs-body) 13%, var(--cbs-white));
	--cbs-silver-300: color-mix(in srgb, var(--cbs-body) 19%, var(--cbs-white));
	--cbs-silver-350: color-mix(in srgb, var(--cbs-body) 25%, var(--cbs-white));
	--cbs-silver-400: color-mix(in srgb, var(--cbs-body) 32%, var(--cbs-white));
	--cbs-silver-500: color-mix(in srgb, var(--cbs-body) 47%, var(--cbs-white));
	--cbs-silver-600: color-mix(in srgb, var(--cbs-body) 69%, var(--cbs-white));
	--cbs-silver-700: color-mix(in srgb, var(--cbs-body) 78%, var(--cbs-white));
	--cbs-silver-800: var(--cbs-body);
	--cbs-silver-850: color-mix(in srgb, var(--cbs-body) 90%, var(--cbs-white));
	--cbs-silver-900: var(--cbs-body);

	/* Or : accent hérité de l'ancienne charte, désormais dérivé de la secondaire. */
	--cbs-gold-light: color-mix(in srgb, var(--cbs-secondary) 15%, var(--cbs-white));
	--cbs-gold: var(--cbs-secondary);
	--cbs-gold-dark: color-mix(in srgb, var(--cbs-secondary) 75%, var(--cbs-body));
	--cbs-gold-muted: color-mix(in srgb, var(--cbs-secondary) 45%, var(--cbs-white));
	--cbs-gold-warm: var(--cbs-secondary);

	/* Neutres */
	--cbs-black: var(--cbs-body);
	--cbs-dark: var(--cbs-silver-900);

	/* Sémantiques : les états ne sont pas exposés dans le BO. */
	--cbs-text-primary: var(--cbs-silver-800);
	--cbs-success: #2d6a4f;
	--cbs-error: #c0392b;
	--cbs-error-dark: #a93226;
	--cbs-warning: #d4a017;
	--cbs-info: #4a6fa5;

	/* Pôles */
	--cbs-pole-conseil-bg: var(--cbs-silver-900);
	--cbs-pole-conseil-accent: var(--cbs-gold);
	--cbs-pole-conseil-text: var(--cbs-white);
	--cbs-pole-gestion-bg: var(--cbs-silver-50);
	--cbs-pole-gestion-accent: var(--cbs-gold-dark);
	--cbs-pole-gestion-text: var(--cbs-silver-800);

	/* === TYPOGRAPHIE === */
	--cbs-font-serif: "Cormorant Garamond", Georgia, serif;
	--cbs-font-sans: "Montserrat", system-ui, sans-serif;

	--cbs-text-display: clamp(3rem, 6vw, 5.5rem);
	--cbs-text-h1: clamp(2.25rem, 4vw, 3.75rem);
	--cbs-text-h2: clamp(1.75rem, 3vw, 2.75rem);
	--cbs-text-h3: clamp(1.375rem, 2vw, 1.875rem);
	--cbs-text-h4: clamp(1.125rem, 1.5vw, 1.375rem);
	--cbs-text-lead: clamp(1.0625rem, 1.5vw, 1.25rem);
	--cbs-text-body: 1rem;
	--cbs-text-small: 0.875rem;
	--cbs-text-xs: 0.75rem;

	--cbs-leading-tight: 1.15;
	--cbs-leading-snug: 1.3;
	--cbs-leading-normal: 1.5;
	--cbs-leading-relaxed: 1.7;

	--cbs-tracking-tight: -0.02em;
	--cbs-tracking-normal: 0em;
	--cbs-tracking-wide: 0.08em;
	--cbs-tracking-wider: 0.15em;

	/* === ESPACEMENTS === */
	--cbs-space-1: 0.25rem;
	--cbs-space-2: 0.5rem;
	--cbs-space-3: 0.75rem;
	--cbs-space-4: 1rem;
	--cbs-space-5: 1.25rem;
	--cbs-space-6: 1.5rem;
	--cbs-space-8: 2rem;
	--cbs-space-10: 2.5rem;
	--cbs-space-12: 3rem;
	--cbs-space-16: 4rem;
	--cbs-space-20: 5rem;
	--cbs-space-24: 6rem;
	--cbs-space-32: 8rem;

	--cbs-section-py: clamp(4rem, 8vw, 8rem);
	--cbs-section-px: clamp(1.5rem, 5vw, 4rem);
	--cbs-container-max: 1280px;
	--cbs-container-wide: 1440px;

	/* === LAYOUT === */
	--cbs-grid-cols: 12;
	--cbs-grid-gap: clamp(1rem, 2.5vw, 2rem);

	/* === EFFETS === */
	--cbs-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
	--cbs-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
	--cbs-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.14);
	--cbs-shadow-gold: 0 4px 24px color-mix(in srgb, var(--cbs-gold) 22%, transparent);

	--cbs-radius-sm: 4px;
	--cbs-radius-md: 8px;
	--cbs-radius-lg: 16px;
	--cbs-radius-full: 9999px;

	--cbs-divider-gold: 1px solid var(--cbs-gold-muted);
	--cbs-overlay-dark: color-mix(in srgb, var(--cbs-silver-900) 55%, transparent);
	--cbs-overlay-silver: color-mix(in srgb, var(--cbs-silver-900) 35%, transparent);
	--cbs-overlay-bento-fade: rgba(0, 0, 0, 0.7);
	--cbs-overlay-bento-hover-bottom: rgba(0, 0, 0, 0.82);
	--cbs-overlay-bento-hover-mid: rgba(0, 0, 0, 0.15);

	/* Page références — grille bento */
	--cbs-layout-ref-bento-large: 32.5rem;
	--cbs-layout-ref-bento-small: 16.25rem;
	--cbs-layout-ref-bento-mobile: 17.5rem;
	--cbs-layout-ref-seo-media-min-h: 26.25rem;

	/* Citations page références */
	--cbs-text-pullquote-mark: clamp(3rem, 10vw, 5rem);
	--cbs-text-ref-citation: clamp(1.2rem, 2.5vw, 1.8rem);
	--cbs-text-attribution-cite: 0.6875rem;
	--cbs-leading-quote-mark: 0.5;

	/* === TRANSITIONS === */
	--cbs-transition-fast: 0.15s ease;
	--cbs-transition-base: 0.25s ease;
	--cbs-transition-slow: 0.4s ease;
	--cbs-transition-reveal: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
	--cbs-transition-bento-scale: transform 0.5s ease;
	--cbs-transition-bento-overlay-bg: background 0.3s ease;
}