/* ==========================================================================
   EUROMED GÉNIE CLIMATIQUE — variables.css
   Jetons de design : couleurs, typographies, espacements, ombres, rayons.
   Palette issue de la direction artistique du cahier des charges.
   ========================================================================== */

:root {
  /* --- Couleurs de marque --- */
  --navy: #071A2E;          /* Bleu nuit principal */
  --navy-700: #0C2640;      /* Variante navy plus claire (cartes, surfaces) */
  --navy-600: #12324F;
  --blue: #1F9FE5;          /* Bleu froid */
  --blue-600: #1789c9;
  --blue-light: #DFF4FF;    /* Bleu clair */
  --orange: #F47B20;        /* Orange chaleur (à utiliser avec modération) */
  --orange-600: #e06a12;
  --white: #FFFFFF;
  --gray-light: #F4F6F8;    /* Gris clair (fonds de sections) */
  --gray-200: #E3E8EE;
  --gray-300: #cdd5de;
  --gray-500: #6B7785;      /* Texte secondaire */
  --text: #18202A;          /* Texte foncé */
  --text-soft: #44515f;

  /* --- Dégradés --- */
  --grad-cold: linear-gradient(135deg, var(--navy) 0%, var(--navy-600) 45%, var(--blue-600) 100%);
  --grad-hero: linear-gradient(120deg, rgba(7,26,46,0.92) 0%, rgba(7,26,46,0.72) 42%, rgba(7,26,46,0.30) 100%);
  --grad-warm: linear-gradient(135deg, var(--orange) 0%, #f59b45 100%);
  --grad-line: linear-gradient(90deg, var(--blue) 0%, var(--orange) 100%);

  /* --- Typographies --- */
  --font-title: "Sora", "Manrope", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "DM Sans", "Segoe UI", system-ui, sans-serif;

  /* Échelle typographique fluide */
  --fs-hero: clamp(2.1rem, 1.3rem + 3.4vw, 3.85rem);
  --fs-h1: clamp(1.9rem, 1.3rem + 2.5vw, 3rem);
  --fs-h2: clamp(1.55rem, 1.15rem + 1.6vw, 2.3rem);
  --fs-h3: clamp(1.2rem, 1rem + 0.7vw, 1.5rem);
  --fs-lead: clamp(1.05rem, 0.98rem + 0.4vw, 1.22rem);
  --fs-base: 1rem;
  --fs-sm: 0.9rem;
  --fs-xs: 0.78rem;

  /* --- Espacements --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --section-y: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);

  /* --- Largeurs --- */
  --container: 1200px;
  --container-narrow: 820px;

  /* --- Rayons --- */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* --- Ombres légères --- */
  --shadow-xs: 0 1px 2px rgba(7,26,46,0.06);
  --shadow-sm: 0 4px 14px rgba(7,26,46,0.07);
  --shadow: 0 10px 30px rgba(7,26,46,0.10);
  --shadow-lg: 0 24px 60px rgba(7,26,46,0.16);
  --shadow-orange: 0 10px 28px rgba(244,123,32,0.30);
  --shadow-blue: 0 10px 28px rgba(31,159,229,0.28);

  /* --- Transitions --- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 0.18s ease;
  --t: 0.32s var(--ease);
  --t-slow: 0.6s var(--ease);

  /* --- Header --- */
  --header-h: 76px;
  --z-header: 1000;
  --z-overlay: 1100;
  --z-modal: 1200;
  --z-fab: 900;
}