/* =========================================================
   VARIABLES
========================================================= */

:root {

  /* ==========================================
     Z-INDEX
  ========================================== */

  --z-out: 2000;
  --z-header: 1000;

  --z-hero: 10;
  --z-hero-caption: 100;

  --z-service-image: 50;
  --z-services: 150;

  --body-margin: 100px;

  /* ==========================================
     PALETTE
  ========================================== */

  --bg-light: #ffffff;
  --bg-dark: #121212;

  --text-light: #f0f0f0;
  --text-dark: #1f1f1f;

  --text-grey: #9c9c9c;

  /* ==========================================
     THEME ACTIF (LIGHT PAR DÉFAUT)
  ========================================== */

  --bg: var(--bg-light);

  --text: var(--text-dark);

  --text-muted: rgba(0,0,0,.4);
  --text-secondary: rgba(0,0,0,.6);

  --border: rgba(0,0,0,.08);

  --line: rgba(0,0,0,.15);

  /* ==========================================
     LAYOUT
  ========================================== */

  --space: 40px;

  --gap: 20px;

  --grid-gap: 40px;

  --grid-margin: 120px;

  --border-rad: 8px;

  --border-color: rgba(200,200,200,.5);

}


/* ==========================================
   DARK MODE
========================================== */

body.dark{

  --bg: var(--bg-dark);

  --text: var(--text-light);

  --text-muted: rgba(255,255,255,.4);

  --text-secondary: rgba(255,255,255,.6);

  --border: rgba(255,255,255,.08);

  --line: rgba(255,255,255,.15);

}