/**
 * Boostage Online — Design system « Tech Blue » : variables globales.
 * Toutes les couleurs du thème proviennent de ces variables.
 */

:root {
	/* Palette officielle Tech Blue */
	--bo-primary: #2563EB;
	--bo-navy: #0B1220;
	--bo-cyan: #06B6D4;
	--bo-bg: #F8FAFC;
	--bo-white: #FFFFFF;
	--bo-gray: #64748B;
	--bo-text: #334155;
	--bo-line: #E2E8F0;
	--bo-success: #059669;
	--bo-error: #DC2626;
	--bo-warning: #D97706;

	/* Nuances dérivées de la palette (états de survol, fonds légers, textes à fort contraste) */
	--bo-border-strong: #CBD5E1;
	--bo-cyan-strong: #0B7285;
	--bo-success-strong: #046C4E;
	--bo-error-strong: #B91C1C;
	--bo-warning-strong: #9A5406;
	--bo-primary-hover: #1E4FD0;
	--bo-primary-soft: #EEF3FE;
	--bo-cyan-soft: #E6F8FB;
	--bo-navy-2: #111A2E;
	--bo-navy-3: #1A2540;
	--bo-on-dark: rgba(255, 255, 255, 0.92);
	--bo-on-dark-muted: rgba(255, 255, 255, 0.68);
	--bo-on-dark-border: rgba(255, 255, 255, 0.12);
	--bo-success-soft: #E7F6F1;
	--bo-error-soft: #FDECEC;
	--bo-warning-soft: #FDF3E6;

	/* Teintes translucides (survols, anneaux, fonds légers) */
	--bo-primary-a12: rgba(37, 99, 235, 0.12);
	--bo-primary-a18: rgba(37, 99, 235, 0.18);
	--bo-primary-a25: rgba(37, 99, 235, 0.25);
	--bo-primary-a35: rgba(37, 99, 235, 0.35);
	--bo-cyan-a12: rgba(6, 182, 212, 0.12);
	--bo-cyan-a25: rgba(6, 182, 212, 0.25);
	--bo-navy-a60: rgba(11, 18, 32, 0.6);
	--bo-white-a06: rgba(255, 255, 255, 0.06);
	--bo-white-a08: rgba(255, 255, 255, 0.08);
	--bo-white-a45: rgba(255, 255, 255, 0.45);
	--bo-success-a35: rgba(5, 150, 105, 0.35);
	--bo-error-a15: rgba(220, 38, 38, 0.15);
	--bo-error-a30: rgba(220, 38, 38, 0.3);
	--bo-warning-a30: rgba(217, 119, 6, 0.3);

	/* Rôles sémantiques */
	--bo-muted: var(--bo-gray);
	--bo-border: var(--bo-line);
	--bo-border-input: #94A3B8;
	--bo-heading: var(--bo-navy);
	--bo-link: var(--bo-primary);
	--bo-link-hover: var(--bo-primary-hover);
	--bo-focus: var(--bo-primary);
	--bo-surface: var(--bo-white);
	--bo-tile-bg: var(--bo-primary-soft);
	--bo-tile-color: var(--bo-primary);
	--bo-badge-bg: var(--bo-primary-soft);
	--bo-badge-color: var(--bo-primary-hover);
	--bo-eyebrow-color: var(--bo-primary);

	/* Contrôles de formulaire et boutons : une seule hauteur de référence */
	--bo-control-h: 48px;
	--bo-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

	/* Typographie : Inter si installée, sinon police système moderne (aucun téléchargement) */
	--bo-font: "Inter", "InterVariable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--bo-font-mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

	--bo-text-xs: 0.75rem;
	--bo-text-sm: 0.875rem;
	--bo-text-base: 1rem;
	--bo-text-md: 1.0625rem;
	--bo-text-lg: 1.125rem;
	--bo-text-xl: clamp(1.25rem, 1.1rem + 0.5vw, 1.375rem);
	--bo-h4: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
	--bo-h3: clamp(1.25rem, 1.12rem + 0.55vw, 1.5rem);
	--bo-h2: clamp(1.625rem, 1.35rem + 1.2vw, 2.25rem);
	--bo-h1: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
	--bo-display: clamp(2.25rem, 1.55rem + 3vw, 3.75rem);

	--bo-leading: 1.65;
	--bo-leading-tight: 1.2;
	--bo-weight-regular: 400;
	--bo-weight-medium: 500;
	--bo-weight-semibold: 600;
	--bo-weight-bold: 700;

	/* Espacements (échelle de 4 px) */
	--bo-space-1: 0.25rem;
	--bo-space-2: 0.5rem;
	--bo-space-3: 0.75rem;
	--bo-space-4: 1rem;
	--bo-space-5: 1.25rem;
	--bo-space-6: 1.5rem;
	--bo-space-8: 2rem;
	--bo-space-10: 2.5rem;
	--bo-space-12: 3rem;
	--bo-space-16: 4rem;
	--bo-section: clamp(3.5rem, 2.5rem + 4vw, 6rem);

	/* Mise en page */
	--bo-container: 1200px;
	--bo-container-narrow: 760px;
	--bo-gutter: clamp(1rem, 0.6rem + 1.6vw, 2rem);
	--bo-header-height: 72px;

	/* Formes et profondeur */
	--bo-radius-sm: 6px;
	--bo-radius: 10px;
	--bo-radius-md: 12px;
	--bo-radius-lg: 16px;
	--bo-radius-xl: 24px;
	--bo-radius-pill: 999px;
	--bo-shadow-sm: 0 1px 2px rgba(11, 18, 32, 0.06);
	--bo-shadow: 0 1px 2px rgba(11, 18, 32, 0.05), 0 6px 18px -6px rgba(11, 18, 32, 0.10);
	--bo-shadow-lg: 0 2px 4px rgba(11, 18, 32, 0.04), 0 20px 40px -12px rgba(11, 18, 32, 0.18);
	--bo-ring: 0 0 0 3px var(--bo-primary-a18);

	/* Animations */
	--bo-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--bo-duration: 180ms;
	--bo-duration-slow: 320ms;
}

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