/*
 * JDP Theme — Design tokens (CSS variables).
 *
 * Source de vérité : reference/DESIGN-SYSTEM.md (validé 2026-05-17).
 * Préfixe : --jdp-* (raw) + alias sémantiques sans préfixe.
 *
 * Ces tokens sont SCOPÉS au body pour éviter les leak sur wp-admin.
 */

:root {
	/* ====================================================================
	   RAW BRAND TOKENS (Elementor globals + brand book)
	   ==================================================================== */

	/* Brand colors */
	--jdp-orange:        #E68A1C;
	--jdp-orange-hover:  #FBA532;
	--jdp-dark:          #000000;
	--jdp-dark-alt:      #0A0A0A;
	--jdp-turquoise:     #2baab1;
	--jdp-text-light:    #F3F4F6;
	--jdp-campaign:      #C91652;

	/* Neutrals */
	--jdp-black:         #000000;
	--jdp-white:         #FFFFFF;
	--jdp-bg-soft:       #F9F6F1;
	--jdp-text-medium:   #69727D;
	--jdp-text-disabled: #A5ADB8;
	--jdp-separator:     #E9E6ED;
	--jdp-card-alt:      #141414;

	/* Social colors (referenced by .jdp-tag--{platform}, .jdp-platform-{platform}) */
	--jdp-instagram:        #E1306C;
	--jdp-facebook:         #1877F2;
	--jdp-youtube:          #FF0000;
	--jdp-tiktok:           #FE2C55;
	--jdp-tiktok-cyan:      #25F4EE;
	--jdp-twitter:          #0F172A;
	--jdp-twitch:           #9146FF;
	--jdp-spotify:          #1DB954;
	--jdp-snapchat:         #FFFC00;
	--jdp-soundcloud:       #FF5500;
	--jdp-linkedin:         #0A66C2;

	/* Social gradients (used sparingly) */
	--jdp-instagram-grad:   linear-gradient(135deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);

	/* ====================================================================
	   SEMANTIC ALIASES (use these in component code)
	   ==================================================================== */

	--bg:           var(--jdp-white);
	--bg-elevated:  var(--jdp-white);
	--bg-soft:      var(--jdp-bg-soft);
	--bg-dark:      var(--jdp-dark);
	--bg-dark-alt:  var(--jdp-dark-alt);
	--bg-deep:      var(--jdp-black);

	--fg1:          var(--jdp-dark);
	--fg2:          var(--jdp-text-medium);
	--fg3:          var(--jdp-text-disabled);
	--fg-on-dark1: var(--jdp-text-light);
	--fg-on-dark2: var(--jdp-text-disabled);

	--accent:       var(--jdp-orange);
	--accent-hover: var(--jdp-orange-hover);
	--accent-soft:  rgba(230, 138, 28, 0.1);
	/* Orange foncé pour le texte eyebrow sur fond clair (WCAG AA : 5,0 sur blanc, 4,7 sur bg-soft). L'orange vif --accent reste sur fond sombre. */
	--eyebrow-color: #B45309;
	--accent-cool:  var(--jdp-turquoise);
	--signal-hot:   var(--jdp-campaign);

	--border:       var(--jdp-separator);
	--border-dark:  rgba(255,255,255,0.08);

	/* ====================================================================
	   SIZING
	   ==================================================================== */

	/* Radius scale (8 / 12 / 20 ONLY per brand book) */
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 20px;
	--radius-full: 9999px;

	/* Shadow scale (alpha ≤ 0.20 per brand book) */
	--shadow-sm: 0 2px 6px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
	--shadow-md: 0 10px 30px rgba(0,0,0,.12), 0 4px 10px rgba(0,0,0,.06);
	--shadow-lg: 0 25px 50px rgba(0,0,0,.15), 0 10px 20px rgba(0,0,0,.08);
	--shadow-xl: 0 35px 70px rgba(0,0,0,.20), 0 15px 30px rgba(0,0,0,.10);

	/* Échelle d'espacement, base 4px (1 à 16 complète, multiples de 4px) */
	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-5: 20px;
	--sp-6: 24px;
	--sp-7: 28px;
	--sp-8: 32px;
	--sp-9: 36px;
	--sp-10: 40px;
	--sp-11: 44px;
	--sp-12: 48px;
	--sp-13: 52px;
	--sp-14: 56px;
	--sp-15: 60px;
	--sp-16: 64px;

	/* Container max-widths */
	--container-sm: 640px;
	--container-md: 960px;
	--container-lg: 1280px;
	--container-xl: 1440px;

	/* ====================================================================
	   TYPOGRAPHY
	   ==================================================================== */

	--font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	/* Type scale */
	--fs-display: 56px;
	--fs-h1:      40px;
	--fs-h2:      28px;
	--fs-h3:      22px;
	--fs-h4:      18px;
	--fs-body:    15px;
	--fs-small:   13px;
	--fs-micro:   11px;

	/* Line heights */
	--lh-tight:  1.15;
	--lh-snug:   1.3;
	--lh-normal: 1.55;
	--lh-loose:  1.7;

	/* Letter spacing */
	--tracking-tight:  -0.02em;
	--tracking-normal: 0;
	--tracking-wide:   0.02em;
	--tracking-caps:   0.08em;

	/* ====================================================================
	   ANIMATION
	   ==================================================================== */

	--ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
	--ease-in:     cubic-bezier(0.6, 0, 0.8, 0.2);
	--ease-in-out: cubic-bezier(0.6, 0, 0.4, 1);

	/* Courbes v2 (refonte design home) */
	--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
	--ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
	--ease-drawer:    cubic-bezier(0.32, 0.72, 0, 1);

	--dur-fast:   150ms;
	--dur-normal: 220ms;
	--dur-slow:   400ms;

	/* ====================================================================
	   Z-INDEX scale
	   ==================================================================== */
	--z-dropdown:  100;
	--z-sticky:    200;
	--z-overlay:   300;
	--z-modal:     400;
	--z-toast:     500;
	--z-tooltip:   600;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}