:root,
[data-theme="space"],
[data-theme="default"] {

  /* ==================== Notifications ======================= */

  --notif-success-background: #3fb950;
  --notif-success-text: #fff;

  --notif-error-background: #f85149;
  --notif-error-text: #fff;

  --notif-warning-background: #d29922;
  --notif-warning-text: #000;

  --notif-info-background: #58a6ff;
  --notif-info-text: #fff;


  /* ==================== Core palette ===================== */

  --primary-color: #0e0320; /*Fond*/
  --secondary-color: #152425; /*Menu*/
  
  --quinary-color: #110935; /*Workplace*/
  --senary-color: #111a24; /*Map*/
  --septenary-color: #1f2627; /*Knowledge*/
  --octonary-color: #0e0431; /*Relation*/

  /*contrast*/

  --primary-contrast: rgb(255, 255, 255);
  --secondary-contrast: white;
  
  --quinary-contrast: white;
  --senary-contrast: white;
  --septenary-contrast: white;
  --octonary-contrast: white;

  /* ====================  Mix - setting ===================== */

    --far-mix-1:3%;
    --far-mix-2:6%;
    --far-mix-3:9%;
    --far-mix-4:12%;
    --far-mix-5:15%;
    --far-mix-6:18%;
    --far-mix-7:21%;
    --far-mix-8:24%;

    --moderate-mix-1:40%;
    --moderate-mix-2:43%;
    --moderate-mix-3:46%;
    --moderate-mix-4:49%;
    --moderate-mix-5:51%;
    --moderate-mix-6:54%;
    --moderate-mix-7:57%;
    --moderate-mix-8:60%;

    --close-mix-1:76%;
    --close-mix-2:79%;
    --close-mix-3:82%;
    --close-mix-4:85%;
    --close-mix-5:88%;
    --close-mix-6:91%;
    --close-mix-7:94%;
    --close-mix-8:97%;

  /* ==================== Structure palette ===================== */

  --back-1: var(--primary-color); /*3*/
    --far-1-1: color-mix(in oklab, var(--primary-color) var(--far-mix-1), var(--primary-contrast));
    --far-1-2: color-mix(in oklab, var(--primary-color) var(--far-mix-2), var(--primary-contrast));
    --far-1-3: color-mix(in oklab, var(--primary-color) var(--far-mix-3), var(--primary-contrast));
  
    --far-1-4: color-mix(in oklab, var(--primary-color) var(--far-mix-4), var(--primary-contrast));
  
    --far-1-8: color-mix(in oklab, var(--primary-color) var(--far-mix-8), var(--primary-contrast));
  

    --moderate-1-1: color-mix(in oklab, var(--primary-color) var(--moderate-mix-1), var(--primary-contrast));
    --moderate-1-2: color-mix(in oklab, var(--primary-color) var(--moderate-mix-2), var(--primary-contrast));
    --moderate-1-3: color-mix(in oklab, var(--primary-color) var(--moderate-mix-3), var(--primary-contrast));
  
    --moderate-1-4: color-mix(in oklab, var(--primary-color) var(--moderate-mix-2), var(--primary-contrast));
  
    --moderate-1-8: color-mix(in oklab, var(--primary-color) var(--moderate-mix-3), var(--primary-contrast));
  

    --close-1-1: color-mix(in oklab, var(--primary-color) var(--close-mix-1), var(--primary-contrast));
    --close-1-2: color-mix(in oklab, var(--primary-color) var(--close-mix-2), var(--primary-contrast));
    --close-1-3: color-mix(in oklab, var(--primary-color) var(--close-mix-3), var(--primary-contrast));
  
    --close-1-4: color-mix(in oklab, var(--primary-color) var(--close-mix-4), var(--primary-contrast));
  
    --close-1-8: color-mix(in oklab, var(--primary-color) var(--close-mix-8), var(--primary-contrast));
  
  --back-2:var(--secondary-color); /*3*/
    --far-2-1:color-mix(in oklab, var(--secondary-color) var(--far-mix-1), var(--secondary-contrast));
    --far-2-2:color-mix(in oklab, var(--secondary-color) var(--far-mix-2), var(--secondary-contrast));
    --far-2-3:color-mix(in oklab, var(--secondary-color) var(--far-mix-3), var(--secondary-contrast));

    --moderate-2-1:color-mix(in oklab, var(--secondary-color) var(--moderate-mix-1), var(--secondary-contrast));
    --moderate-2-2:color-mix(in oklab, var(--secondary-color) var(--moderate-mix-2), var(--secondary-contrast));
    --moderate-2-3:color-mix(in oklab, var(--secondary-color) var(--moderate-mix-3), var(--secondary-contrast));

    --close-2-1:color-mix(in oklab, var(--secondary-color) var(--close-mix-1), var(--secondary-contrast));
    --close-2-2:color-mix(in oklab, var(--secondary-color) var(--close-mix-2), var(--secondary-contrast));
    --close-2-3:color-mix(in oklab, var(--secondary-color) var(--close-mix-3), var(--secondary-contrast));

    --close-2-4:color-mix(in oklab, var(--secondary-color) var(--close-mix-4), var(--secondary-contrast));

    --close-2-6:color-mix(in oklab, var(--secondary-color) var(--close-mix-6), var(--secondary-contrast));

  --back-5:var(--quinary-color); /*8*/
    --far-5-1:color-mix(in oklab, var(--quinary-color) var(--far-mix-1), var(--quinary-contrast));
    --far-5-2:color-mix(in oklab, var(--quinary-color) var(--far-mix-2), var(--quinary-contrast));
    --far-5-3:color-mix(in oklab, var(--quinary-color) var(--far-mix-3), var(--quinary-contrast));
    --far-5-4:color-mix(in oklab, var(--quinary-color) var(--far-mix-4), var(--quinary-contrast));
    --far-5-5:color-mix(in oklab, var(--quinary-color) var(--far-mix-5), var(--quinary-contrast));
    --far-5-6:color-mix(in oklab, var(--quinary-color) var(--far-mix-6), var(--quinary-contrast));
    --far-5-7:color-mix(in oklab, var(--quinary-color) var(--far-mix-7), var(--quinary-contrast));
    --far-5-8:color-mix(in oklab, var(--quinary-color) var(--far-mix-8), var(--quinary-contrast));

    --moderate-5-1:color-mix(in oklab, var(--quinary-color) var(--moderate-mix-1), var(--quinary-contrast));
    --moderate-5-2:color-mix(in oklab, var(--quinary-color) var(--moderate-mix-2), var(--quinary-contrast));
    --moderate-5-3:color-mix(in oklab, var(--quinary-color) var(--moderate-mix-3), var(--quinary-contrast));
    --moderate-5-4:color-mix(in oklab, var(--quinary-color) var(--moderate-mix-4), var(--quinary-contrast));
    --moderate-5-5:color-mix(in oklab, var(--quinary-color) var(--moderate-mix-5), var(--quinary-contrast));
    --moderate-5-6:color-mix(in oklab, var(--quinary-color) var(--moderate-mix-6), var(--quinary-contrast));
    --moderate-5-7:color-mix(in oklab, var(--quinary-color) var(--moderate-mix-7), var(--quinary-contrast));
    --moderate-5-8:color-mix(in oklab, var(--quinary-color) var(--moderate-mix-8), var(--quinary-contrast));

    --close-5-1:color-mix(in oklab, var(--quinary-color) var(--close-mix-1), var(--quinary-contrast));
    --close-5-2:color-mix(in oklab, var(--quinary-color) var(--close-mix-2), var(--quinary-contrast));
    --close-5-3:color-mix(in oklab, var(--quinary-color) var(--close-mix-3), var(--quinary-contrast));
    --close-5-4:color-mix(in oklab, var(--quinary-color) var(--close-mix-4), var(--quinary-contrast));
    --close-5-5:color-mix(in oklab, var(--quinary-color) var(--close-mix-5), var(--quinary-contrast));
    --close-5-6:color-mix(in oklab, var(--quinary-color) var(--close-mix-6), var(--quinary-contrast));
    --close-5-7:color-mix(in oklab, var(--quinary-color) var(--close-mix-7), var(--quinary-contrast));
    --close-5-8:color-mix(in oklab, var(--quinary-color) var(--close-mix-8), var(--quinary-contrast));
  
  --back-6:var(--senary-color); /*8*/
    --far-6-1:color-mix(in oklab, var(--senary-color) var(--far-mix-1), var(--senary-contrast));
    --far-6-2:color-mix(in oklab, var(--senary-color) var(--far-mix-2), var(--senary-contrast));
    --far-6-3:color-mix(in oklab, var(--senary-color) var(--far-mix-3), var(--senary-contrast));
    --far-6-4:color-mix(in oklab, var(--senary-color) var(--far-mix-4), var(--senary-contrast));
    --far-6-5:color-mix(in oklab, var(--senary-color) var(--far-mix-5), var(--senary-contrast));
    --far-6-6:color-mix(in oklab, var(--senary-color) var(--far-mix-6), var(--senary-contrast));
    --far-6-7:color-mix(in oklab, var(--senary-color) var(--far-mix-7), var(--senary-contrast));
    --far-6-8:color-mix(in oklab, var(--senary-color) var(--far-mix-8), var(--senary-contrast));

    --moderate-6-1:color-mix(in oklab, var(--senary-color) var(--moderate-mix-1), var(--senary-contrast));
    --moderate-6-2:color-mix(in oklab, var(--senary-color) var(--moderate-mix-2), var(--senary-contrast));
    --moderate-6-3:color-mix(in oklab, var(--senary-color) var(--moderate-mix-3), var(--senary-contrast));
    --moderate-6-4:color-mix(in oklab, var(--senary-color) var(--moderate-mix-4), var(--senary-contrast));
    --moderate-6-5:color-mix(in oklab, var(--senary-color) var(--moderate-mix-5), var(--senary-contrast));
    --moderate-6-6:color-mix(in oklab, var(--senary-color) var(--moderate-mix-6), var(--senary-contrast));
    --moderate-6-7:color-mix(in oklab, var(--senary-color) var(--moderate-mix-7), var(--senary-contrast));
    --moderate-6-8:color-mix(in oklab, var(--senary-color) var(--moderate-mix-8), var(--senary-contrast));

    --close-6-1:color-mix(in oklab, var(--senary-color) var(--close-mix-1), var(--senary-contrast));
    --close-6-2:color-mix(in oklab, var(--senary-color) var(--close-mix-2), var(--senary-contrast));
    --close-6-3:color-mix(in oklab, var(--senary-color) var(--close-mix-3), var(--senary-contrast));
    --close-6-4:color-mix(in oklab, var(--senary-color) var(--close-mix-4), var(--senary-contrast));
    --close-6-5:color-mix(in oklab, var(--senary-color) var(--close-mix-5), var(--senary-contrast));
    --close-6-6:color-mix(in oklab, var(--senary-color) var(--close-mix-6), var(--senary-contrast));
    --close-6-7:color-mix(in oklab, var(--senary-color) var(--close-mix-7), var(--senary-contrast));
    --close-6-8:color-mix(in oklab, var(--senary-color) var(--close-mix-8), var(--senary-contrast));

  --back-7:var(--septenary-color); /*8*/
    --far-7-1:color-mix(in oklab, var(--septenary-color) var(--far-mix-1), var(--septenary-contrast));
    --far-7-2:color-mix(in oklab, var(--septenary-color) var(--far-mix-2), var(--septenary-contrast));
    --far-7-3:color-mix(in oklab, var(--septenary-color) var(--far-mix-3), var(--septenary-contrast));
    --far-7-4:color-mix(in oklab, var(--septenary-color) var(--far-mix-4), var(--septenary-contrast));
    --far-7-5:color-mix(in oklab, var(--septenary-color) var(--far-mix-5), var(--septenary-contrast));
    --far-7-6:color-mix(in oklab, var(--septenary-color) var(--far-mix-6), var(--septenary-contrast));
    --far-7-7:color-mix(in oklab, var(--septenary-color) var(--far-mix-7), var(--septenary-contrast));
    --far-7-8:color-mix(in oklab, var(--septenary-color) var(--far-mix-8), var(--septenary-contrast));

    --moderate-7-1:color-mix(in oklab, var(--septenary-color) var(--moderate-mix-1), var(--septenary-contrast));
    --moderate-7-2:color-mix(in oklab, var(--septenary-color) var(--moderate-mix-2), var(--septenary-contrast));
    --moderate-7-3:color-mix(in oklab, var(--septenary-color) var(--moderate-mix-3), var(--septenary-contrast));
    --moderate-7-4:color-mix(in oklab, var(--septenary-color) var(--moderate-mix-4), var(--septenary-contrast));
    --moderate-7-5:color-mix(in oklab, var(--septenary-color) var(--moderate-mix-5), var(--septenary-contrast));
    --moderate-7-6:color-mix(in oklab, var(--septenary-color) var(--moderate-mix-6), var(--septenary-contrast));
    --moderate-7-7:color-mix(in oklab, var(--septenary-color) var(--moderate-mix-7), var(--septenary-contrast));
    --moderate-7-8:color-mix(in oklab, var(--septenary-color) var(--moderate-mix-8), var(--septenary-contrast));

    --close-7-1:color-mix(in oklab, var(--septenary-color) var(--close-mix-1), var(--septenary-contrast));
    --close-7-2:color-mix(in oklab, var(--septenary-color) var(--close-mix-2), var(--septenary-contrast));
    --close-7-3:color-mix(in oklab, var(--septenary-color) var(--close-mix-3), var(--septenary-contrast));
    --close-7-4:color-mix(in oklab, var(--septenary-color) var(--close-mix-4), var(--septenary-contrast));
    --close-7-5:color-mix(in oklab, var(--septenary-color) var(--close-mix-5), var(--septenary-contrast));
    --close-7-6:color-mix(in oklab, var(--septenary-color) var(--close-mix-6), var(--septenary-contrast));
    --close-7-7:color-mix(in oklab, var(--septenary-color) var(--close-mix-7), var(--septenary-contrast));
    --close-7-8:color-mix(in oklab, var(--septenary-color) var(--close-mix-8), var(--septenary-contrast));

  --back-8:var(--octonary-color); /*1*/
    --far-8-1:color-mix(in oklab, var(--octonary-color) var(--far-mix-1), var(--octonary-contrast));

    --moderate-8-1:color-mix(in oklab, var(--octonary-color) var(--moderate-mix-1), var(--octonary-contrast));

    --close-8-1:color-mix(in oklab, var(--octonary-color) var(--far-mix-1), var(--octonary-contrast));


  /* ==================== Background ======================= */

  /* Self */
  --background: var(--back-1);
  --text-color: var(--far-1-1);
  --hr-color: var(--moderate-1-1);

  /* Button */
  --button-border: solid 1px var(--moderate-1-1);
  --button-background: var(--close-1-1);
  --button-text-color: var(--far-1-1);

  --button-hover-border: solid 1px var(--moderate-1-4);
  --button-hover-background: var(--close-1-4);
  --button-hover-text-color: var(--far-1-4);

  /* Text Input */
  --text-input-border: solid 1px var(--moderate-1-8);
  --text-input-background: var(--close-1-8);
  --text-input-text-color: var(--far-1-8);

  /* ==================== Menu ============================= */

  /* Button */
  --menu-button-border: none;
  --menu-button-background: var(--back-2);
  --menu-button-text-color: var(--far-2-1);

  --menu-button-hover-border: none;
  --menu-button-hover-background: var(--close-2-4);
  --menu-button-hover-text-color: var(--far-2-4);

  /* Button - Current */
  --menu-button-current-border: none;
  --menu-button-current-background: var(--close-2-6);
  --menu-button-current-text-color: var(--far-2-6);

  /* Text Input */
  --menu-text-input-border: solid 1px var(--moderate-2-6);
  --menu-text-input-background: var(--close-2-6);
  --menu-text-input-text-color: var(--far-2-6);

  /* ============== Toolbar - Workplace ==================== */

  /* Self */
  --workplace-toolbar-background: var(--back-5);
  --workplace-toolbar-border: solid 1px var(--close-5-1);
  --workplace-toolbar-text-color: var(--far-5-1);

  /* Button */
  --workplace-toolbar-button-border: solid 1px var(--moderate-5-2);
  --workplace-toolbar-button-background: var(--close-5-2);
  --workplace-toolbar-button-text-color: var(--far-5-2);

  --workplace-toolbar-button-hover-border: solid 1px var(--moderate-5-5);
  --workplace-toolbar-button-hover-background: var(--close-5-5);
  --workplace-toolbar-button-hover-text-color: var(--far-5-5);

  /* Text Input */
  --workplace-toolbar-text-input-border: solid 1px var(--far-5-4);
  --workplace-toolbar-text-input-background: var(--close-5-4);
  --workplace-toolbar-text-input-text-color: var(--far-5-4);

  /* ==================== Toolbar - Map ==================== */

  /* Self */
  --map-toolbar-background: var(--back-6);
  --map-toolbar-border: solid 1px var(--close-6-1);
  --map-toolbar-text-color: var(--far-6-1);

  /* Button */
  --map-toolbar-button-border: solid 1px var(--moderate-6-2);
  --map-toolbar-button-background: var(--close-6-2);
  --map-toolbar-button-text-color: var(--far-6-2);

  --map-toolbar-button-hover-border: solid 1px var(--far-6-5);
  --map-toolbar-button-hover-background: var(--close-6-5);
  --map-toolbar-button-hover-text-color: var(--far-6-5);

  /* Text Input */
  --map-toolbar-text-input-border: solid 1px var(--moderate-6-4);
  --map-toolbar-text-input-background: var(--close-6-4);
  --map-toolbar-text-input-text-color: var(--far-6-4);

    /* ============ Workplace - Window ======================= */

  /* Self */
  --workplace-window-background: var(--back-5);
  --workplace-window-border: solid 1px var(--close-5-1);
  --workplace-window-text-color: var(--far-5-1);

  --workplace-window-active-border: solid 1px var(--moderate-5-2);

  /* Button */
  --workplace-window-button-border: solid 1px var(--moderate-5-3);
  --workplace-window-button-background: var(--close-5-3);
  --workplace-window-button-text-color: var(--far-5-3);

  --workplace-window-button-hover-border: solid 1px var(--far-5-5);
  --workplace-window-button-hover-background: var(--close-5-5);
  --workplace-window-button-hover-text-color: var(--far-5-5);

  /* Text Input */
  --workplace-window-text-input-border: solid 1px var(--moderate-5-5);
  --workplace-window-text-input-background: var(--close-5-5);
  --workplace-window-text-input-text-color: var(--far-5-5);

  /* ===== Workplace - Window - Bar ======================== */

  /* Self */
  --workplace-window-bar-background: var(--close-5-6);
  --workplace-window-bar-border: solid 1px var(--moderate-5-6);
  --workplace-window-bar-text-color: var(--far-5-6);

  /* Button */
  --workplace-window-bar-button-border: none;
  --workplace-window-bar-button-background: var(--close-5-8);
  --workplace-window-bar-button-text-color: var(--far-5-8);

  --workplace-window-bar-button-hover-border:none;
  --workplace-window-bar-button-hover-background: var(--close-5-1);
  --workplace-window-bar-button-hover-text-color: var(--far-5-1);

  /* ==================== Map - Window ===================== */

  /* Self */
  --map-window-background: var(--back-6);
  --map-window-border: solid 1px var(--close-6-1);
  --map-window-text-color: var(--far-6-1);

  --map-window-active-border: solid 1px var(--moderate-6-2);

  /* Button */
  --map-window-button-border: solid 1px var(--moderate-6-3);
  --map-window-button-background: var(--close-6-3);
  --map-window-button-text-color: var(--far-6-3);

  --map-window-button-hover-border: solid 1px var(--far-6-5);
  --map-window-button-hover-background: var(--close-6-5);
  --map-window-button-hover-text-color: var(--far-6-5);

  /* Text Input */
  --map-window-text-input-border: solid 1px var(--moderate-6-5);
  --map-window-text-input-background: var(--close-6-5);
  --map-window-text-input-text-color: var(--far-6-5);

  /* ============== Map - Window - Bar ===================== */

  /* Self */
  --map-window-bar-background: var(--close-6-6);
  --map-window-bar-border: solid 1px var(--moderate-6-6);
  --map-window-bar-text-color: var(--far-6-6);

  /* Button */
  --map-window-bar-button-border: none;
  --map-window-bar-button-background: var(--close-6-8);
  --map-window-bar-button-text-color: var(--far-6-8);

  --map-window-bar-button-hover-border: none;
  --map-window-bar-button-hover-background: var(--close-6-1);
  --map-window-bar-button-hover-text-color: var(--far-6-1);

  /* ==================== Knowledge ======================== */

  /* Self */
  --knowledge-background: var(--back-7);
  --knowledge-border: solid 1px var(--moderate-7-1);
  --knowledge-text-color: var(--far-7-1);

  --knowledge-active-border: solid 1px var(--moderate-7-2);
  --knowledge-active-background: var(--close-7-2);
  --knowledge-active-text-color: var(--far-7-2);

  /* Button */
  --knowledge-button-border: solid 1px var(--moderate-7-3);
  --knowledge-button-background: var(--close-7-3);
  --knowledge-button-text-color: var(--far-7-3);

  --knowledge-button-hover-border: solid 1px var(--far-7-6);
  --knowledge-button-hover-background: var(--close-7-6);
  --knowledge-button-hover-text-color: var(--far-7-6);

  /* Text Input */
  --knowledge-text-input-border: solid 1px var(--moderate-7-5);
  --knowledge-text-input-background: var(--close-7-5);
  --knowledge-text-input-text-color: var(--far-7-5);

  /* ==================== Knowledge - Bar ================== */

  /* Self */
  --knowledge-bar-border: solid 1px var(--moderate-7-6);
  --knowledge-bar-background: var(--close-7-6);
  --knowledge-bar-text-color: var(--far-7-6);

  /* Button */
  --knowledge-bar-button-border: solid 1px var(--moderate-7-1);
  --knowledge-bar-button-background: var(--close-7-1);
  --knowledge-bar-button-text-color: var(--far-7-1);

  --knowledge-bar-button-hover-border: solid 1px var(--moderate-7-8);
  --knowledge-bar-button-hover-background: var(--close-7-8);
  --knowledge-bar-button-hover-text-color: var(--far-7-8);

  /* ==================== Relations ======================== */
  --relation-background: var(--back-8);
  --relation-border: solid 1px var(--moderate-8-1);
  --relation-text-color: var(--far-8-1);

  --relation-line-color: var(--far-1-1);
  --relation-line-hover-color: var(--moderate-1-1);
}

[data-theme="paper"] {

  --primary-color: rgb(255,255,255);
  --secondary-color: rgb(230,230,230);
  
  --quinary-color: rgb(215,215,215);
  --senary-color: rgb(200,200,200);
  --septenary-color: rgb(185,185,185);
  --octonary-color: rgb(170,170,170);

  /*contrast*/

  --primary-contrast: rgb(0, 0, 0);
  --secondary-contrast: rgb(0, 0, 0);
  
  --quinary-contrast: black;
  --senary-contrast: black;
  --septenary-contrast: black;
  --octonary-contrast: black;

}

[data-theme="debug"] {

  --primary-color: #4f2b92;
  --secondary-color: #532112;
  
  --quinary-color: #dfd150;
  --senary-color: #e09d79;
  --septenary-color: #d16eb3;
  --octonary-color: #50df9a;

  /*contrast*/

  --primary-contrast: white;
  --secondary-contrast: white;
  
  --quinary-contrast: black;
  --senary-contrast: black;
  --septenary-contrast: black;
  --octonary-contrast: black;

}