/* ============================================================
   LSF Énergie — Espacements, rayons, ombres, mouvement
   Grille de base : 4px
   ============================================================ */
:root {
  /* ---- Espacements ---- */
  --space-0:  0;
  --space-1:  0.25rem;  /* 4  */
  --space-2:  0.5rem;   /* 8  */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.25rem;  /* 20 */
  --space-6:  1.5rem;   /* 24 */
  --space-8:  2rem;     /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-20: 5rem;     /* 80 */
  --space-24: 6rem;     /* 96 */

  /* ---- Rayons de courbure ---- */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;   /* boutons, inputs, tags */
  --radius-lg:  16px;   /* cartes */
  --radius-xl:  22px;   /* grandes cartes, panneaux */
  --radius-2xl: 32px;
  --radius-full:999px;

  /* ---- Ombres ---- (teintées pétrole, douces) */
  --shadow-xs: 0 1px 2px rgba(18, 59, 58, 0.06);
  --shadow-sm: 0 2px 6px -2px rgba(18, 59, 58, 0.10);
  --shadow-md: 0 8px 20px -8px rgba(18, 59, 58, 0.16);
  --shadow-lg: 0 16px 40px -18px rgba(18, 59, 58, 0.24);
  --shadow-xl: 0 28px 64px -28px rgba(18, 59, 58, 0.30);

  /* Anneau de focus (terracotta) */
  --focus-ring: 0 0 0 3px rgba(199, 98, 61, 0.32);

  /* ---- Mouvement ---- (sobre : fondus + petits déplacements) */
  --duration-fast:   120ms;  /* @kind other */
  --duration-normal: 200ms;  /* @kind other */
  --duration-slow:   360ms;  /* @kind other */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);   /* @kind other */
  --ease-emphasis: cubic-bezier(0.34, 1.2, 0.5, 1);     /* @kind other */
}