/* ==========================================================================
   ELECTRO TUNISIE — Design Tokens
   Palette dérivée du brief : bleu électrique / blanc / gris foncé / jaune sécurité
   ========================================================================== */

:root {
  /* Couleurs de marque */
  --et-navy:        #0B1F3A;  /* gris-bleu foncé — texte fort, fonds sombres */
  --et-navy-soft:    #14294D;  /* variante plus claire pour cartes sur fond sombre */
  --et-blue:         #2E8FFF;  /* bleu électrique — accent primaire, CTA */
  --et-blue-dark:    #1768D1;  /* hover / pression */
  --et-yellow:       #F4B400;  /* jaune sécurité — accent secondaire, usage restreint */
  --et-yellow-dark:  #C98F00;
  --et-white:        #FFFFFF;
  --et-mist:         #E8EDF5;  /* fond de section clair, gris-bleu très pâle */
  --et-mist-2:       #F6F8FC;
  --et-gray-700:     #44516A;  /* texte secondaire sur fond clair */
  --et-gray-500:     #7C8AA5;
  --et-line:         #D6DEEC;  /* hairlines / bordures discrètes */

  /* États système (signature "tableau électrique") */
  --et-status-on:    #34D399;  /* point "disponible" */
  --et-status-busy:  #F4B400;

  /* Typographie */
  --et-font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --et-font-body:     'Inter', 'Helvetica Neue', Arial, sans-serif;
  --et-font-mono:     'IBM Plex Mono', 'Courier New', monospace; /* étiquettes techniques, repères */

  /* Échelle typographique */
  --et-size-xs:   0.8125rem;  /* 13px */
  --et-size-sm:   0.9375rem;  /* 15px */
  --et-size-base: 1.0625rem;  /* 17px */
  --et-size-lg:   1.25rem;    /* 20px */
  --et-size-xl:   1.625rem;   /* 26px */
  --et-size-2xl:  2.25rem;    /* 36px */
  --et-size-3xl:  3.25rem;    /* 52px */
  --et-size-4xl:  4.5rem;     /* 72px */

  /* Espacements */
  --et-space-1: 0.5rem;
  --et-space-2: 1rem;
  --et-space-3: 1.5rem;
  --et-space-4: 2rem;
  --et-space-5: 3rem;
  --et-space-6: 4.5rem;
  --et-space-7: 7rem;

  /* Rayons & ombres */
  --et-radius-sm: 6px;
  --et-radius-md: 12px;
  --et-radius-lg: 20px;
  --et-shadow-sm: 0 2px 8px rgba(11, 31, 58, 0.06);
  --et-shadow-md: 0 12px 32px rgba(11, 31, 58, 0.10);
  --et-shadow-yellow: 0 8px 24px rgba(244, 180, 0, 0.25);

  /* Largeurs de mise en page */
  --et-container: 1240px;
  --et-container-narrow: 860px;

  /* Transitions */
  --et-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --et-speed-fast: 160ms;
  --et-speed-base: 280ms;
}

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