/* ==========================================================================
   LLM ECO — DESIGN TOKENS (source de vérité de la charte)
   Couleurs extraites des logos officiels (circulaire + rectangulaire).
   Ne pas écrire de couleur en dur ailleurs : tout passe par ces variables.
   ========================================================================== */

:root {
  /* ---------- MARQUE : dégradé bleu nuit → bleu royal → cyan → violet ---------- */
  --brand-navy-900: #04105c; /* bleu nuit profond (logo) */
  --brand-navy-800: #0a1c7a;
  --brand-blue-700: #1330a8;
  --brand-blue-600: #1e3ad0; /* bleu royal (logo) */
  --brand-blue-500: #2d6bf5; /* bleu vif */
  --brand-cyan-500: #06bbf9; /* cyan électrique (logo) */
  --brand-cyan-400: #2fd2fb;
  --brand-cyan-300: #01dffc; /* cyan clair lumineux (logo) */
  --brand-violet-500: #9e58f0; /* violet accent (logo) */
  --brand-violet-600: #9534fb;

  /* ---------- ENCRES / FONDS SOMBRES (profil : quasi-noir bleuté) ---------- */
  --ink-1000: #020409; /* fond le plus profond */
  --ink-950: #030712;
  --ink-900: #050b1a; /* fond sections */
  --ink-850: #081225;
  --ink-800: #0c1a35; /* cartes / surfaces */
  --ink-700: #0d1c35; /* surface intermédiaire */
  --surface-1: #0a1426; /* surface élevée niveau 1 */
  --surface-2: #0f1d38; /* surface élevée niveau 2 */
  --surface-3: #15294f; /* surface élevée niveau 3 (hover) */
  --line: rgba(141, 178, 255, 0.12); /* bordures discrètes */
  --line-strong: rgba(141, 178, 255, 0.22);

  /* ---------- TEXTE ---------- */
  --text-strong: #f4f8ff; /* titres */
  --text-base: #d7e2f5; /* corps */
  --text-muted: #9fb2d4; /* secondaire */
  --text-faint: #6f82a6; /* tertiaire / légendes */
  --text-on-accent: #04105c; /* texte sur fond cyan vif */

  /* ---------- DÉGRADÉS DE MARQUE ---------- */
  --grad-brand: linear-gradient(135deg, #1e3ad0 0%, #06bbf9 60%, #2fd2fb 100%);
  --grad-brand-violet: linear-gradient(135deg, #1e3ad0 0%, #2d6bf5 45%, #9e58f0 100%);
  --grad-cyan: linear-gradient(135deg, #06bbf9 0%, #01dffc 100%);
  --grad-hero: radial-gradient(120% 120% at 80% -10%, rgba(45,107,245,0.28) 0%, rgba(6,187,249,0.10) 35%, rgba(2,4,9,0) 70%);
  --grad-text: linear-gradient(100deg, #2fd2fb 0%, #2d6bf5 45%, #9e58f0 100%);

  /* ---------- ÉTATS SÉMANTIQUES ---------- */
  --success: #2fd39a;
  --warning: #ffc34d;
  --danger: #ff6b6b;
  --info: var(--brand-cyan-500);

  /* ---------- TYPOGRAPHIE ---------- */
  --font-display: "Sora", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* échelle typographique fluide (clamp) */
  --fs-display: clamp(2.6rem, 6vw, 5rem);
  --fs-h1: clamp(2.1rem, 4.5vw, 3.4rem);
  --fs-h2: clamp(1.6rem, 3vw, 2.4rem);
  --fs-h3: clamp(1.25rem, 2vw, 1.6rem);
  --fs-lead: clamp(1.05rem, 1.6vw, 1.3rem);
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.78rem;

  --lh-tight: 1.08;
  --lh-snug: 1.3;
  --lh-base: 1.65;

  --tracking-tight: -0.02em;
  --tracking-wide: 0.08em;
  --tracking-caps: 0.18em; /* sur-titres en majuscules (cf. "EVENT" du logo) */

  /* ---------- ESPACEMENTS (échelle 4px) ---------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;
  --section-y: clamp(4rem, 9vw, 8rem); /* respiration verticale des sections */
  --container: 1200px;
  --container-wide: 1400px;
  --gutter: clamp(1.2rem, 5vw, 3rem);

  /* ---------- RAYONS ---------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* ---------- OMBRES & LUEURS ---------- */
  --shadow-sm: 0 2px 8px rgba(2, 6, 20, 0.4);
  --shadow-md: 0 12px 30px rgba(2, 6, 20, 0.45);
  --shadow-lg: 0 30px 70px rgba(2, 6, 20, 0.55);
  --glow-cyan: 0 0 0 1px rgba(6, 187, 249, 0.4), 0 8px 40px rgba(6, 187, 249, 0.28);
  --glow-violet: 0 0 40px rgba(158, 88, 240, 0.35);
  --ring-focus: 0 0 0 3px var(--ink-1000), 0 0 0 5px var(--brand-cyan-400);

  /* ---------- MOUVEMENT ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 600ms;

  /* ---------- DIVERS ---------- */
  --header-h: 76px;
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;
}

/* Respect strict de prefers-reduced-motion (accessibilité non négociable) */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
  }
}