/* ============================================================================
   ELI TECH — tokens.css v2
   Source unique de vérité : couleurs, typo, spacing, shadows, radius, easings.

   IMPORTANT — CHARTE ACTUELLE (mise à jour 2026-05-01) :
   La charte officielle Eli Tech est désormais DARK PREMIUM (bleu électrique +
   violet/mauve). La règle « light mode uniquement » est OBSOLÈTE.
   La nouvelle identité globale est appliquée via /assets/theme-dark.css qui
   redéclare les variables :root après tous les CSS de page. Ce fichier reste
   conservé pour compatibilité (cascade) mais ses valeurs claires sont
   surchargées. Pour modifier les couleurs globales, éditer theme-dark.css.

   Compatibilité : conserve TOUTES les variables existantes (--ink-4, --ink-5,
   --fs-xs...--fs-xl, --sh-sm, --sh-xl, --r-pill, --error, --error-bg,
   --ink-soft, --bg-soft, --surface-soft, --border-soft, --gm-surface,
   --gm-muted, --star-base, --sh-media-float, --shadow-sm, --shadow-xl,
   --font, --font-serif, et les utilitaires .u-gap-*, .u-p-*, .u-m-*).
   ============================================================================ */

:root {

  /* ==========================================================================
     1. COULEURS — Surfaces
     ========================================================================== */

  --bg:           #F6F8FB;   /* fond principal page */
  --bg-alt:       #FFFFFF;   /* fond alternatif sections */
  --surface:      #FFFFFF;   /* cartes, modals */
  --surface2:     #EEF3F8;   /* surface élevée subtile */
  --bg-dark:      #10243A;   /* sections dark */
  --bg-dark-2:    #1A3552;   /* sections dark plus claires */

  /* Aliases historiques conservés (utilisés par UI custom portfolio) */
  --bg-soft:      #f9f9fb;
  --surface-soft: #fafafa;
  --border-soft:  #f0f0f2;


  /* ==========================================================================
     2. COULEURS — Encres (texte) — graduation 6 niveaux
     ========================================================================== */

  --ink:    #122133;   /* titres, body fort */
  --ink-2:  #2F435A;   /* body normal */
  --ink-3:  #3F5670;   /* secondaire */
  --ink-4:  #4A6078;   /* meta/captions — WCAG AA garanti sur fond clair */
  --ink-5:  #4D6278;   /* placeholders avec contraste suffisant */

  /* Alias historique conservé (UI portfolio) */
  --ink-soft: #6e6e73;


  /* ==========================================================================
     3. COULEURS — Accents (marque)
     ========================================================================== */

  --accent:        #2E587A;
  --accent-2:      #6E88A6;
  --accent-hover:  #244560;
  --accent-soft:   #EAF1F8;
  --accent-inv:    #FFFFFF;


  /* ==========================================================================
     4. COULEURS — Bordures
     ========================================================================== */

  --border:    #D9E2EC;
  --border-2:  #C5D2DF;
  /* --border-soft conservé plus haut */


  /* ==========================================================================
     5. COULEURS — Sémantique
     ========================================================================== */

  --success:    #10B981;
  --success-bg: #ECFDF5;
  --warning:    #F59E0B;
  --warning-bg: #FFFBEB;
  --error:      #b42318;
  --error-bg:   #fef3f2;


  /* ==========================================================================
     6. COULEURS — Spécifiques portfolio (conservées tel quel)
     ========================================================================== */

  --gm-surface: #e8eaed;
  --gm-muted:   #9aa0a6;
  --star-base:  #e8e8e8;


  /* ==========================================================================
     7. TYPOGRAPHIE — Familles
     ========================================================================== */

  --font:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;
  /* Alias historique pour compat avec règles existantes */
  --f-sans:     var(--font);
  --f-serif:    var(--font-serif);


  /* ==========================================================================
     8. TYPOGRAPHIE — Tailles (rem-based, conservées + complétées)
     ========================================================================== */

  --fs-xs:   0.75rem;   /* 12px */
  --fs-sm:   0.875rem;  /* 14px */
  --fs-base: 1rem;      /* 16px */
  --fs-md:   1.125rem;  /* 18px */
  --fs-lg:   1.375rem;  /* 22px */
  --fs-xl:   clamp(1.75rem, 3vw, 2.5rem);   /* 28→40px */

  /* Ajouts pour titres impactants (utilisés par index.html) */
  --fs-2xl:  clamp(2.25rem, 4vw, 3.25rem);  /* 36→52px */
  --fs-3xl:  clamp(2.75rem, 5.5vw, 4.5rem); /* 44→72px */


  /* ==========================================================================
     9. TYPOGRAPHIE — Line-height & letter-spacing
     ========================================================================== */

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;

  --ls-tight:   -0.04em;
  --ls-snug:    -0.02em;
  --ls-normal:  -0.011em;
  --ls-wide:    0.08em;


  /* ==========================================================================
     10. SPACING — Grille 4/8 px (alignée avec utilitaires .u-* du fichier)
     ========================================================================== */

  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;


  /* ==========================================================================
     11. RADIUS
     ========================================================================== */

  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-2xl:  28px;
  --r-pill: 999px;
  --r-full: 999px;  /* alias */


  /* ==========================================================================
     12. SHADOWS — Multi-layer Apple-style
     ========================================================================== */

  --shadow-xs:   0 1px 2px rgba(15,23,42,0.04);
  --shadow-sm:   0 1px 3px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
  --shadow-md:   0 4px 6px -1px rgba(15,23,42,0.07), 0 2px 4px -2px rgba(15,23,42,0.05);
  --shadow-lg:   0 10px 15px -3px rgba(15,23,42,0.08), 0 4px 6px -4px rgba(15,23,42,0.05);
  --shadow-xl:   0 20px 25px -5px rgba(15,23,42,0.10), 0 8px 10px -6px rgba(15,23,42,0.06);
  --shadow-2xl:  0 25px 50px -12px rgba(15,23,42,0.18);
  --shadow-glow: 0 0 0 1px rgba(46,88,122,0.16), 0 10px 30px -8px rgba(46,88,122,0.24);

  /* Aliases historiques (utilisés par UI portfolio) */
  --sh-sm:          var(--shadow-sm);
  --sh-xl:          var(--shadow-xl);
  --sh-media-float: 0 4px 20px rgba(0, 0, 0, 0.3);


  /* ==========================================================================
     13. LAYOUT
     ========================================================================== */

  --maxw:        1200px;
  --maxw-narrow: 720px;
  --maxw-wide:   1400px;
  --pad-x:       clamp(20px, 4vw, 40px);


  /* ==========================================================================
     14. EASINGS & DURATIONS
     ========================================================================== */

  --ease:     cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in:  cubic-bezier(.4, 0, 1, 1);

  --dur-fast:   150ms;
  --dur-normal: 250ms;
  --dur-slow:   400ms;


  /* ==========================================================================
     15. Z-INDEX (échelle cohérente)
     ========================================================================== */

  --z-base:    1;
  --z-sticky:  100;
  --z-overlay: 1000;
  --z-modal:   1100;
  --z-toast:   1200;
}


/* ============================================================================
   COULEURS FOOTER (conservé tel quel — utilisé par tes pages)
   ============================================================================ */

.site-footer,
.footer-col a,
.footer-col p,
.footer-legal-links a,
.footer-cta p {
  color: #8EA4BC;
}


/* ============================================================================
   UTILITAIRES — Gap, padding, margin (conservés tel quel pour compat)
   ============================================================================ */

.u-gap-1 { gap: var(--s-1); }
.u-gap-2 { gap: var(--s-2); }
.u-gap-3 { gap: var(--s-3); }
.u-gap-4 { gap: var(--s-4); }
.u-gap-6 { gap: var(--s-6); }
.u-gap-8 { gap: var(--s-8); }

.u-p-1 { padding: var(--s-1); }
.u-p-2 { padding: var(--s-2); }
.u-p-3 { padding: var(--s-3); }
.u-p-4 { padding: var(--s-4); }
.u-p-6 { padding: var(--s-6); }
.u-p-8 { padding: var(--s-8); }

.u-m-0 { margin: 0; }
.u-m-1 { margin: var(--s-1); }
.u-m-2 { margin: var(--s-2); }
.u-m-3 { margin: var(--s-3); }
.u-m-4 { margin: var(--s-4); }
.u-m-6 { margin: var(--s-6); }
.u-m-8 { margin: var(--s-8); }

.u-mt-0 { margin-top: 0; }
.u-mt-1 { margin-top: var(--s-1); }
.u-mt-2 { margin-top: var(--s-2); }
.u-mt-3 { margin-top: var(--s-3); }
.u-mt-4 { margin-top: var(--s-4); }
.u-mt-6 { margin-top: var(--s-6); }
.u-mt-8 { margin-top: var(--s-8); }

.u-mb-0 { margin-bottom: 0; }
.u-mb-1 { margin-bottom: var(--s-1); }
.u-mb-2 { margin-bottom: var(--s-2); }
.u-mb-3 { margin-bottom: var(--s-3); }
.u-mb-4 { margin-bottom: var(--s-4); }
.u-mb-6 { margin-bottom: var(--s-6); }
.u-mb-8 { margin-bottom: var(--s-8); }


/* ============================================================================
   DARK MODE — Désactivé par défaut, prêt pour activation future
   Activation : ajouter data-theme="dark" sur <html> ou sur une section donnée

   Exemple : <section data-theme="dark" class="hero-promo">...</section>
   ============================================================================ */

[data-theme="dark"] {
  --bg:        #0a0a0a;
  --bg-alt:    #141518;
  --surface:   #1A1B1F;
  --surface2:  #242528;

  --ink:    #F5F5F5;
  --ink-2:  #D1D3D6;
  --ink-3:  #A0A3A8;
  --ink-4:  #8A8E94;
  --ink-5:  #6E7278;

  --accent:        #6A8EFF;
  --accent-hover:  #8AA8FF;
  --accent-soft:   rgba(106, 142, 255, 0.12);

  --border:    #2A2B30;
  --border-2:  #3A3B40;

  --shadow-sm:   0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md:   0 4px 6px -1px rgba(0,0,0,0.5), 0 2px 4px -2px rgba(0,0,0,0.4);
  --shadow-lg:   0 10px 15px -3px rgba(0,0,0,0.5), 0 4px 6px -4px rgba(0,0,0,0.4);
  --shadow-xl:   0 20px 25px -5px rgba(0,0,0,0.5), 0 8px 10px -6px rgba(0,0,0,0.4);
}


/* ============================================================================
   REDUCED MOTION — Respect des préférences utilisateur
   ============================================================================ */

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