/*
 * tokens.css — KP design tokens (CSS custom properties primitifs).
 *
 * Source unique pour couleurs, typo, spacing, radius, shadows, layout.
 * Importé aussi dans Gutenberg via add_editor_style() (cf. functions.php).
 *
 * Extraits du Figma KP (fichier OZIYMj8KEsKkcUZznJNUO0) le 2026-06-09.
 * DA : site SOMBRE cinématographique, accent orange #DF732E, typo géométrique.
 * Typo maquette = Avenir ; on rend en Nunito Sans (décision Morgan, réuse TDN).
 *
 * Convention prefix : --kp-*  (jamais --tdn-* ni --gk-*).
 */

:root {
	/* === Couleurs === */
	/* Brand */
	--kp-color-brand-primary: #df732e;          /* orange (main) — CTA, accents, dots actifs */
	--kp-color-brand-primary-hover: #c25f1f;    /* orange assombri ~12% pour hover */

	/* Surfaces (thème sombre) */
	--kp-color-black: #000000;                  /* pur — overlays, gradients hero */
	--kp-color-surface-deep: #0a0a0a;           /* fond page (near-black) */
	--kp-color-surface-elevated: #141414;       /* cards / blocs surélevés */

	/* Texte */
	--kp-color-text-inverse: #ffffff;           /* texte principal sur fond sombre */
	--kp-color-near-white: #fdfefe;             /* noms / titres de carte */
	--kp-color-text-on-brand: #191919;          /* texte sur bouton orange */
	--kp-color-text-muted: rgba(255, 255, 255, 0.8);  /* sous-titres */
	--kp-color-text-faint: rgba(255, 255, 255, 0.5);  /* 2e partie de titre, atténué */
	--kp-color-text-caption: #888888;           /* rôles, légendes */

	/* Bordures / dividers */
	--kp-color-border-subtle: rgba(255, 255, 255, 0.16); /* bordure bouton / navbar */
	--kp-color-divider: rgba(255, 255, 255, 0.5);

	/* === Typographies === */
	--kp-font-sans: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	/* Poids (Avenir → Nunito Sans : Book≈300/400, Roman=400, Medium=500/600).
	 * Light 300 = direction "less bold / more class" sur les grands titres + wordmark. */
	--kp-font-weight-light: 300;
	--kp-font-weight-regular: 400;
	--kp-font-weight-medium: 500;
	--kp-font-weight-semibold: 600;
	--kp-font-weight-bold: 700;

	/* Tailles (échelle Figma KP) */
	--kp-font-size-14: 0.875rem;  /* eyebrow uppercase */
	--kp-font-size-16: 1rem;      /* nav, body small */
	--kp-font-size-18: 1.125rem;  /* sous-titre hero, body */
	--kp-font-size-20: 1.25rem;
	--kp-font-size-24: 1.5rem;    /* body large, nom de carte */
	--kp-font-size-32: 2rem;      /* H3 */
	--kp-font-size-40: 2.5rem;    /* H2 small */
	--kp-font-size-48: 3rem;
	--kp-font-size-62: 3.875rem;  /* H2 section */
	--kp-font-size-110: 6.875rem; /* H1 hero (desktop) */

	/* Line-heights */
	--kp-line-height-hero: 0.91;     /* 100/110 */
	--kp-line-height-tight: 1.06;    /* 66/62 (H2) */
	--kp-line-height-snug: 1.3;      /* sous-titre */
	--kp-line-height-normal: 1.5;
	--kp-line-height-body: 1.67;     /* 40/24 body large */

	/* Letter-spacing (la DA KP serre fort les titres) */
	--kp-letter-spacing-hero: -0.05em;     /* -5.5px / 110px */
	--kp-letter-spacing-h2: -0.06em;       /* -3.72px / 62px */
	--kp-letter-spacing-tight: -0.015em;   /* body large -0.36px / 24px */
	--kp-letter-spacing-eyebrow: 2px;      /* eyebrow uppercase */

	/* === Espacements (échelle 8px + valeurs section Figma) === */
	--kp-space-2: 0.5rem;    /* 8px */
	--kp-space-3: 0.75rem;   /* 12px */
	--kp-space-4: 1rem;      /* 16px */
	--kp-space-5: 1.25rem;   /* 20px */
	--kp-space-6: 1.5rem;    /* 24px */
	--kp-space-8: 2rem;      /* 32px */
	--kp-space-10: 2.5rem;   /* 40px */
	--kp-space-12: 3rem;     /* 48px */
	--kp-space-16: 4rem;     /* 64px */
	--kp-space-18: 4.5rem;   /* 72px — padding latéral section */
	--kp-space-20: 5rem;     /* 80px */
	--kp-space-25: 6.25rem;  /* 100px — gap inter-bloc section */
	--kp-space-37: 9.375rem; /* 150px — padding vertical section */

	/* === Radius === */
	--kp-radius-sm: 4px;     /* boutons */
	--kp-radius-md: 8px;
	--kp-radius-lg: 16px;
	--kp-radius-nav: 40px;   /* pill item nav */
	--kp-radius-nav-outer: 56px; /* conteneur nav */
	--kp-radius-pill: 999px;

	/* === Shadows === */
	--kp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
	--kp-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
	--kp-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);

	/* === Effets === */
	--kp-blur-navbar: 20px;
	--kp-blur-nav-pills: 10px;

	/* === Layout === */
	--kp-content-max-width: 1296px; /* largeur navbar / conteneur sur canvas 1440 */
	--kp-section-padding-x: 4.5rem; /* 72px */
	--kp-section-padding-y: 9.375rem; /* 150px */
	--kp-navbar-offset-top: 2rem;   /* 32px */
}