:root {

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

   /* --test-variable: red; */

   /* SABLE / LIN */
   --cream: #E0D1AA;
   --cream-soft: #C6A86A;
   --butter: #B99A5C;

   /* FEU / BRAISE */
   --honey: #D95727;
   --honey-deep: #B95A32;

   /* CUIR / CUIVRE */
   --cognac: #8B4F32;
   --copper: #8A4F24;
   --gold: #D39554;
   --charcoal: #312F2A;

   /* FORÊT */
   --moss: #24544D;
   --moss-deep: #18352D;

   /* BOIS */
   --bark: #68432C;
   --bark-deep: #0D211E;
   --forest-dark: #0B1710;
   --forest: #14251A;

   /* CLAIR */
   --white: #F0E5C8;

   /* BORDURES */
   --line: rgba(13, 33, 30, 0.18);
   --line-strong: rgba(13, 33, 30, 0.34);


   /* =====================================================
       CAMP
    ====================================================== */

   --camp-cream: #E0D1AA;
   --camp-cream-dark: #C6A86A;

   --camp-dark: #0D211E;

   --camp-green: #24544D;
   --camp-brown: #68432C;

   --camp-white: #F0E5C8;


   /* =====================================================
       DIMENSIONS
    ====================================================== */

   --max: 1240px;


   /* =====================================================
       ANIMATIONS
    ====================================================== */

   --ease: cubic-bezier(.2, .75, .3, 1);


   /* =====================================================
       VARIABLES SÉMANTIQUES
    ====================================================== */

   --background: #E7E1D3;
   --background-soft: #D8D1C1;

   --surface: #F1ECE2;
   --surface-soft: #DDD6C7;

   --text: #17241F;
   --text-soft: #455047;

   --heading: #10221C;

   --accent: #D95727;
   --accent-dark: #B8663F;

   --success: #24544D;
   --success-dark: #18352D;

   --border: var(--line);
   --border-strong: var(--line-strong);

   --shadow: rgba(13, 33, 30, 0.22);

   --overlay: rgba(13, 33, 30, 0.62);


   /* =====================================================
       TRANSITION THÈME
    ====================================================== */

   --theme-transition:
      background-color .3s ease,
      color .3s ease,
      border-color .3s ease,
      box-shadow .3s ease;
}


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

[data-theme="dark"] {

   /* =====================================================
       BACKGROUNDS
    ====================================================== */

   --background: #091713;
   --background-soft: #10251F;

   --surface: #17332C;
   --surface-soft: #20443A;


   /* =====================================================
       TEXTES
    ====================================================== */

   --text: #E0D1AA;
   --text-soft: #C6B88F;

   --heading: #F0E5C8;


   /* =====================================================
       ACCENT FEU
    ====================================================== */

   --accent: #D95727;
   --accent-dark: #F06A31;


   /* =====================================================
       NATURE
    ====================================================== */

   --success: #4D766B;
   --success-dark: #6A9488;


   /* =====================================================
       BORDURES
    ====================================================== */

   --border: rgba(224, 209, 170, 0.14);
   --border-strong: rgba(224, 209, 170, 0.28);


   /* =====================================================
       OMBRES
    ====================================================== */

   --shadow: rgba(0, 0, 0, 0.48);

   --overlay: rgba(0, 0, 0, 0.68);


   /* =====================================================
       CAMP DARK
    ====================================================== */

   --camp-cream: #091713;
   --camp-cream-dark: #17332C;

   --camp-dark: #060F0C;

   --camp-green: #4D766B;
   --camp-brown: #9A6848;

   --camp-white: #F0E5C8;
}