/**
 * Jetons de design.
 *
 * Ces variables sont la seule source de vérité du thème : couleurs, échelle
 * typographique, espacements, rayons, ombres, durées. Les valeurs ci-dessous
 * sont les valeurs de repli ; l'outil de personnalisation les écrase en
 * injectant sa propre règle :root juste après ce fichier.
 *
 * Points de rupture utilisés dans tout le thème :
 *   480px  téléphone large
 *   768px  tablette
 *   1024px petit ordinateur
 *   1280px grand écran
 */

:root {
	/* Palette de marque ------------------------------------------------- */
	--ww-color-primary: #FFDB14;
	--ww-color-secondary: #FF93CD;
	--ww-color-accent: #8BE4FE;
	--ww-color-highlight: #FF9200;
	--ww-color-dark: #14161A;
	--ww-color-light: #FFFFFF;
	--ww-color-surface: #F6F6F7;
	--ww-color-muted: #6B7280;
	--ww-color-border: #E5E7EB;

	/* Couleurs de texte lisibles sur chaque fond (calculées côté PHP) ---- */
	--ww-on-primary: var(--ww-color-dark);
	--ww-on-secondary: var(--ww-color-dark);
	--ww-on-accent: var(--ww-color-dark);
	--ww-on-highlight: var(--ww-color-dark);
	--ww-on-dark: var(--ww-color-light);
	--ww-on-light: var(--ww-color-dark);
	--ww-on-surface: var(--ww-color-dark);

	/* Rôles ------------------------------------------------------------- */
	--ww-color-body: var(--ww-color-light);
	--ww-color-text: var(--ww-color-dark);
	--ww-color-heading: var(--ww-color-dark);
	--ww-color-link: var(--ww-color-dark);
	--ww-color-focus: #1D4ED8;
	--ww-header-bg: var(--ww-color-light);
	--ww-header-text: var(--ww-color-dark);
	--ww-footer-bg: var(--ww-color-dark);
	--ww-footer-text: var(--ww-color-light);

	/* Typographie ------------------------------------------------------- */
	--ww-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--ww-font-display: var(--ww-font-sans);
	--ww-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--ww-text-base: 17px;
	--ww-text-xs: 0.8125rem;
	--ww-text-sm: 0.9375rem;
	--ww-text-md: 1rem;
	--ww-text-lg: clamp(1.125rem, 0.4vw + 1rem, 1.375rem);
	--ww-text-xl: clamp(1.375rem, 1vw + 1rem, 1.875rem);
	--ww-text-2xl: clamp(1.75rem, 2vw + 1rem, 2.75rem);
	--ww-text-3xl: clamp(2.125rem, 3vw + 1rem, 3.5rem);
	--ww-text-4xl: clamp(2.5rem, 4.5vw + 1rem, 4.75rem);

	--ww-leading-tight: 1.12;
	--ww-leading-snug: 1.3;
	--ww-leading-normal: 1.65;
	--ww-heading-weight: 800;
	--ww-tracking-tight: -0.02em;

	/* Espacements ------------------------------------------------------- */
	--ww-space-1: 0.25rem;
	--ww-space-2: 0.5rem;
	--ww-space-3: 0.75rem;
	--ww-space-4: 1rem;
	--ww-space-5: 1.5rem;
	--ww-space-6: 2rem;
	--ww-space-7: 2.5rem;
	--ww-space-8: 3rem;
	--ww-space-9: 4rem;
	--ww-space-10: 5rem;
	--ww-space-11: 6.5rem;

	--ww-section-spacing: 80px;
	--ww-gutter: clamp(1.25rem, 4vw, 2.5rem);
	--ww-container: 1200px;
	--ww-container-narrow: 720px;
	--ww-container-content: 900px;

	/* Formes et profondeur ---------------------------------------------- */
	--ww-radius: 14px;
	--ww-radius-sm: calc(var(--ww-radius) * 0.5);
	--ww-radius-lg: calc(var(--ww-radius) * 1.6);
	--ww-radius-pill: 999px;

	--ww-border: 1px solid var(--ww-color-border);
	--ww-shadow-sm: 0 1px 2px rgba(20, 22, 26, 0.06), 0 1px 3px rgba(20, 22, 26, 0.05);
	--ww-shadow: 0 4px 12px rgba(20, 22, 26, 0.07), 0 2px 4px rgba(20, 22, 26, 0.04);
	--ww-shadow-lg: 0 18px 40px rgba(20, 22, 26, 0.11), 0 6px 14px rgba(20, 22, 26, 0.06);

	/* Mouvement --------------------------------------------------------- */
	--ww-duration: 220ms;
	--ww-duration-slow: 620ms;
	--ww-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	/* Divers ------------------------------------------------------------ */
	--ww-header-height: 76px;
	--ww-z-header: 100;
	--ww-z-overlay: 200;
	--ww-z-modal: 300;
}