/* ============================================================
   MIL FERMETURES — DESIGN TOKENS
   ============================================================
   Toutes les variables de design sont ici. Modifie ce fichier
   pour changer la charte graphique globale du site.
   ============================================================ */

:root {
  /* ============================================
     1. COULEURS — palette de marque
     ============================================ */

  /* Brand jaune (accent principal — règle 5%) */
  --yellow:        #f5b800;
  --yellow-bright: #ffd233;
  --yellow-soft:   rgba(245, 184, 0, 0.12);

  /* Charbon (accent secondaire neutre) */
  --charcoal:      #1a1a18;
  --charcoal-soft: #3a3a36;

  /* Backgrounds — DARK (par défaut) */
  --bg:    #0a0a0a;
  --bg-2:  #131313;
  --bg-3:  #1a1a1a;

  /* Backgrounds — LIGHT (data-theme="light") */
  --bg-light:    #faf9f6;
  --bg-light-2:  #f1efe9;
  --bg-light-3:  #e8e6df;

  /* Texte — DARK */
  --text:    #f5f5f3;
  --text-2:  #c8c8c3;
  --text-3:  #7a7a75;

  /* Texte — LIGHT */
  --text-light:    #0e0e0c;
  --text-light-2:  #4a4a45;
  --text-light-3:  #888880;

  /* Bordures et lignes */
  --line:    rgba(255, 255, 255, 0.08);
  --line-2:  rgba(255, 255, 255, 0.14);
  --line-light:    rgba(10, 10, 10, 0.09);
  --line-light-2:  rgba(10, 10, 10, 0.16);

  /* Surfaces */
  --surface:        rgba(255, 255, 255, 0.03);
  --surface-hover:  rgba(255, 255, 255, 0.06);
  --surface-light:        rgba(0, 0, 0, 0.025);
  --surface-light-hover:  rgba(0, 0, 0, 0.05);

  /* Effets */
  --accent-glow: rgba(245, 184, 0, 0.12);

  /* Compatibilité (anciennes variables) */
  --gold: var(--charcoal);


  /* ============================================
     2. TYPOGRAPHIE
     ============================================ */

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-serif: "Fraunces", "Times New Roman", serif;

  /* Tailles de base */
  --fs-base: 17px;             /* taille de référence body */
  --fs-small: 14px;
  --fs-tiny: 12px;
  --fs-micro: 11px;

  /* Tailles fluides (responsive auto) */
  --fs-display:  clamp(48px, 8.4vw, 132px);
  --fs-section:  clamp(38px, 5.2vw, 68px);
  --fs-h2:       clamp(28px, 3.4vw, 44px);
  --fs-h3:       clamp(22px, 2.4vw, 30px);
  --fs-lead:     clamp(17px, 1.4vw, 20px);

  /* Line-heights */
  --lh-tight: 1.05;
  --lh-snug: 1.35;
  --lh-base: 1.6;
  --lh-loose: 1.75;


  /* ============================================
     3. ESPACES & LAYOUT
     ============================================ */

  --container:      1340px;
  --container-narrow: 980px;
  --gutter:         clamp(20px, 4vw, 56px);

  /* Section vertical padding */
  --section-pad: clamp(80px, 11vw, 160px);
  --section-pad-sm: clamp(50px, 7vw, 100px);


  /* ============================================
     4. BORDURES & ARRONDIS
     ============================================ */

  --radius-sm: 10px;
  --radius:    18px;
  --radius-lg: 28px;
  --radius-pill: 100px;


  /* ============================================
     5. TRANSITIONS
     ============================================ */

  --t-fast: 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  --t-med:  0.6s  cubic-bezier(0.22, 1, 0.36, 1);
  --t-slow: 1.2s  cubic-bezier(0.22, 1, 0.36, 1);

  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);


  /* ============================================
     6. OMBRES
     ============================================ */

  --shadow-sm: 0 2px 8px -4px rgba(0,0,0,0.08);
  --shadow:    0 4px 24px -8px rgba(0,0,0,0.12);
  --shadow-lg: 0 24px 50px -20px rgba(0,0,0,0.18);
  --shadow-xl: 0 30px 80px -25px rgba(0,0,0,0.25);


  /* ============================================
     7. Z-INDEX
     ============================================ */

  --z-header: 100;
  --z-megamenu: 110;
  --z-drawer-overlay: 199;
  --z-drawer: 200;
  --z-loader: 10000;
}


/* ============================================================
   THEME LIGHT — overrides via data-theme="light"
   ============================================================ */

[data-theme="light"] {
  --bg:    var(--bg-light);
  --bg-2:  var(--bg-light-2);
  --bg-3:  var(--bg-light-3);
  --text:    var(--text-light);
  --text-2:  var(--text-light-2);
  --text-3:  var(--text-light-3);
  --line:    var(--line-light);
  --line-2:  var(--line-light-2);
  --surface:       var(--surface-light);
  --surface-hover: var(--surface-light-hover);
  --gold: var(--text-light);
}