@use 'sass:color';
/* Latte Theme */
$latte-rosewater: rgb(220, 138, 120);
$latte-flamingo: rgb(221, 120, 120);
$latte-pink: rgb(234, 118, 203);
$latte-mauve: rgb(136, 57, 239);
$latte-red: rgb(210, 15, 57);
$latte-maroon: rgb(230, 69, 83);
$latte-peach: rgb(254, 100, 11);
$latte-yellow: rgb(223, 142, 29);
$latte-green: rgb(64, 160, 43);
$latte-teal: rgb(23, 146, 153);
$latte-sky: rgb(4, 165, 229);
$latte-sapphire: rgb(32, 159, 181);
$latte-blue: rgb(30, 102, 245);
$latte-lavender: rgb(114, 135, 253);
$latte-text: rgb(76, 79, 105);
$latte-subtext1: rgb(92, 95, 119);
$latte-subtext0: rgb(108, 111, 133);
$latte-overlay2: rgb(124, 127, 147);
$latte-overlay1: rgb(140, 143, 161);
$latte-overlay0: rgb(156, 160, 176);
$latte-surface2: rgb(172, 176, 190);
$latte-surface1: rgb(188, 192, 204);
$latte-surface0: rgb(204, 208, 218);
$latte-base: rgb(239, 241, 245);
$latte-mantle: rgb(230, 233, 239);
$latte-crust: rgb(220, 224, 232);

/* Frappe Theme */
$frappe-rosewater: rgb(242, 213, 207); 
$frappe-flamingo: rgb(238, 190, 190);
$frappe-pink: rgb(244, 184, 228);
$frappe-mauve: rgb(202, 158, 230);
$frappe-red: rgb(231, 130, 132);
$frappe-maroon: rgb(234, 153, 156);
$frappe-peach: rgb(239, 159, 118);
$frappe-yellow: rgb(229, 200, 144);
$frappe-green: rgb(166, 209, 137);
$frappe-teal: rgb(129, 200, 190);
$frappe-sky: rgb(153, 209, 219);
$frappe-sapphire: rgb(133, 193, 220);
$frappe-blue: rgb(140, 170, 238);
$frappe-lavender: rgb(186, 187, 241);
$frappe-text: rgb(198, 208, 245);
$frappe-subtext1: rgb(181, 191, 226);
$frappe-subtext0: rgb(165, 173, 206);
$frappe-overlay2: rgb(148, 156, 187);
$frappe-overlay1: rgb(131, 139, 167);
$frappe-overlay0: rgb(115, 121, 148);
$frappe-surface2: rgb(98, 104, 128);
$frappe-surface1: rgb(81, 87, 109);
$frappe-surface0: rgb(65, 69, 89);
$frappe-base: rgb(48, 52, 70);
$frappe-mantle: rgb(41, 44, 60);
$frappe-crust: rgb(35, 38, 52);

/* Macchiato Theme */
$macchiato-rosewater: rgb(244, 219, 214);
$macchiato-flamingo: rgb(240, 198, 198);
$macchiato-pink: rgb(245, 189, 230);
$macchiato-mauve: rgb(198, 160, 246);
$macchiato-red: rgb(237, 135, 150);
$macchiato-maroon: rgb(238, 153, 160);
$macchiato-peach: rgb(245, 169, 127);
$macchiato-yellow: rgb(238, 212, 159);
$macchiato-green: rgb(166, 218, 149);
$macchiato-teal: rgb(139, 213, 202);
$macchiato-sky: rgb(145, 215, 227);
$macchiato-sapphire: rgb(125, 196, 228);
$macchiato-blue: rgb(138, 173, 244);
$macchiato-lavender: rgb(183, 189, 248);
$macchiato-text: rgb(202, 211, 245);
$macchiato-subtext1: rgb(184, 192, 224);
$macchiato-subtext0: rgb(165, 173, 203);
$macchiato-overlay2: rgb(147, 154, 183);
$macchiato-overlay1: rgb(128, 135, 162);
$macchiato-overlay0: rgb(110, 115, 141);
$macchiato-surface2: rgb(91, 96, 120);
$macchiato-surface1: rgb(73, 77, 100);
$macchiato-surface0: rgb(54, 58, 79);
$macchiato-base: rgb(36, 39, 58);
$macchiato-mantle: rgb(30, 32, 48);
$macchiato-crust: rgb(24, 25, 38);

/* Mocha Theme */
$mocha-rosewater: rgb(245, 224, 220);
$mocha-flamingo: rgb(242, 205, 205);
$mocha-pink: rgb(245, 194, 231);
$mocha-mauve: rgb(203, 166, 247);
$mocha-red: rgb(243, 139, 168);
$mocha-maroon: rgb(235, 160, 172);
$mocha-peach: rgb(250, 179, 135);
$mocha-yellow: rgb(249, 226, 175);
$mocha-green: rgb(166, 227, 161);
$mocha-teal: rgb(148, 226, 213);
$mocha-sky: rgb(137, 220, 235);
$mocha-sapphire: rgb(116, 199, 236);
$mocha-blue: rgb(137, 180, 250);
$mocha-lavender: rgb(180, 190, 254);
$mocha-text: rgb(205, 214, 244);
$mocha-subtext1: rgb(186, 194, 222);
$mocha-subtext0: rgb(166, 173, 200);
$mocha-overlay2: rgb(147, 153, 178);
$mocha-overlay1: rgb(127, 132, 156);
$mocha-overlay0: rgb(108, 112, 134);
$mocha-surface2: rgb(88, 91, 112);
$mocha-surface1: rgb(69, 71, 90);
$mocha-surface0: rgb(49, 50, 68);
$mocha-base: rgb(30, 30, 46);
$mocha-mantle: rgb(24, 24, 37);
$mocha-crust: rgb(17, 17, 27);


[data-theme-light] {
  //+0.05,
      --color-main-background: #{rgba($latte-base, 0.93)} ;
      --color-main-background-rgb: #{$latte-base};
      --color-main-background-translucent: #{rgba($latte-base, .97)};
      --color-main-background-blur: #{rgba($latte-base, .8)};
      --filter-background-blur: #{blur(25px)};
      --gradient-main-background: var(--color-main-background) 0%, var(--color-main-background-translucent) 85%, transparent 100%;
      --color-background-hover: #{$latte-surface1};
      --color-background-dark:  #{color.scale($latte-surface0, $lightness: 5%)};
      --color-background-darker: #{$latte-surface0};
      --color-placeholder-light: #{color.scale($latte-surface2, $lightness: 5%)};
      --color-placeholder-dark: #{$latte-surface2};
      --color-main-text: #{$latte-text};
      --color-text-maxcontrast: #{$latte-subtext1};
      --color-text-maxcontrast-default: #{color.scale($latte-subtext0, $lightness: 5%)};
      --color-text-maxcontrast-background-blur: #{$latte-subtext0};
      --color-text-light: #{var(--color-main-text)};
      --color-text-lighter: #{var(--color-text-maxcontrast)};
      --color-scrollbar: #{$latte-mauve};
      --color-error: #{$latte-red};
      --color-error-rgb: #{$latte-red};
      --color-error-hover: #{color.scale($latte-red, $lightness: 5%)};
      --color-error-text: #{color.scale($latte-red, $lightness: -10%)};
      --color-warning: #{$latte-peach};
      --color-warning-rgb: #{$latte-peach};
      --color-warning-hover: #{color.scale($latte-peach, $lightness: 5%)};
      --color-warning-text: #{color.scale($latte-peach, $lightness: -10%)};
      --color-success: #{$latte-green};
      --color-success-rgb: #{$latte-green};
      --color-success-hover: #{color.scale($latte-green, $lightness: 5%)};
      --color-success-text: #{color.scale($latte-green, $lightness: -10%)};
      --color-info: #{$latte-blue};
      --color-info-rgb: #{$latte-blue};
      --color-info-hover: #{color.scale($latte-blue, $lightness: 5%)};
      --color-info-text: #{color.scale($latte-blue, $lightness: -10%)};
      --color-loading-light: #{$latte-overlay0};
      --color-loading-dark: #{$latte-subtext1};
      --color-box-shadow-rgb: #{color.scale($latte-crust, $lightness: 10%)};
      --color-box-shadow: #{color.scale($latte-crust, $lightness: 15%)};
      --color-border: #{$latte-crust};
      --color-border-dark: #{color.scale($latte-crust, $lightness: 5%)};
      --color-border-maxcontrast: #{color.scale($latte-crust, $lightness: -10%)};
  
  
      --color-primary: #{$latte-maroon};
      --color-primary-default: #{$latte-maroon};
      --color-primary-text: #{$latte-crust};
      --color-primary-hover: #{color.scale($latte-maroon, $lightness: -5%)};
    
      --color-primary-light: #{$latte-green};
      --color-primary-light-text: #{$latte-crust};
      --color-primary-light-hover: #{color.scale($latte-green, $lightness: -5%)};
    
      --color-primary-element: #{$latte-maroon};
      --color-primary-element-hover: #{color.scale($latte-maroon, $lightness: -5%)};
      --color-primary-element-text: #{$latte-crust};
      --color-primary-element-text-dark: #{$latte-mantle};
    
      --color-primary-element-light: #{$latte-blue};
      --color-primary-element-light-hover: #{color.scale($latte-blue, $lightness: -5%)};
      --color-primary-element-light-text: #{$latte-crust};
      --gradient-primary-background: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
      
      //Unchanged
      --font-face: system-ui, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Cantarell, Ubuntu, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
      --default-font-size: 15px;
      --animation-quick: 100ms;
      --animation-slow: 300ms;
      --border-radius: 3px;
      --border-radius-large: 10px;
      --border-radius-rounded: 28px;
      --border-radius-pill: 100px;
      --default-clickable-area: 44px;
      --default-line-height: 24px;
      --default-grid-baseline: 4px;
      --header-height: 50px;
      --navigation-width: 300px;
      --sidebar-min-width: 300px;
      --sidebar-max-width: 500px;
      --list-min-width: 200px;
      --list-max-width: 300px;
      --header-menu-item-height: 44px;
      --header-menu-profile-item-height: 66px;
      --breakpoint-mobile: 1024px;
      --background-invert-if-dark: invert(100%);
      --background-invert-if-bright: no;
      --background-image-invert-if-bright: no;
      --primary-invert-if-bright: no;
      --primary-invert-if-dark: invert(100%);
}
[data-theme-dark] {
//+0.05,
    --color-main-background: #{rgba($frappe-base, 0.93)} ;
    --color-main-background-rgb: #{$frappe-base};
    --color-main-background-translucent: #{rgba($frappe-base, .97)};
    --color-main-background-blur: #{rgba($frappe-base, .8)};
    --filter-background-blur: #{blur(25px)};
    --gradient-main-background: var(--color-main-background) 0%, var(--color-main-background-translucent) 85%, transparent 100%;
    --color-background-hover: #{$frappe-surface1};
    --color-background-dark:  #{color.scale($frappe-surface0, $lightness: 5%)};
    --color-background-darker: #{$frappe-surface0};
    --color-placeholder-light: #{color.scale($frappe-surface2, $lightness: 5%)};
    --color-placeholder-dark: #{$frappe-surface2};
    --color-main-text: #{$frappe-text};
    --color-text-maxcontrast: #{$frappe-subtext1};
    --color-text-maxcontrast-default: #{color.scale($frappe-subtext0, $lightness: 5%)};
    --color-text-maxcontrast-background-blur: #{$frappe-subtext0};
    --color-text-light: #{var(--color-main-text)};
    --color-text-lighter: #{var(--color-text-maxcontrast)};
    --color-scrollbar: #{$frappe-mauve};
    --color-error: #{$frappe-red};
    --color-error-rgb: #{$frappe-red};
    --color-error-hover: #{color.scale($frappe-red, $lightness: 5%)};
    --color-error-text: #{color.scale($frappe-red, $lightness: -10%)};
    --color-warning: #{$frappe-peach};
    --color-warning-rgb: #{$frappe-peach};
    --color-warning-hover: #{color.scale($frappe-peach, $lightness: 5%)};
    --color-warning-text: #{color.scale($frappe-peach, $lightness: -10%)};
    --color-success: #{$frappe-green};
    --color-success-rgb: #{$frappe-green};
    --color-success-hover: #{color.scale($frappe-green, $lightness: 5%)};
    --color-success-text: #{color.scale($frappe-green, $lightness: -10%)};
    --color-info: #{$frappe-blue};
    --color-info-rgb: #{$frappe-blue};
    --color-info-hover: #{color.scale($frappe-blue, $lightness: 5%)};
    --color-info-text: #{color.scale($frappe-blue, $lightness: -10%)};
    --color-loading-light: #{$frappe-overlay0};
    --color-loading-dark: #{$frappe-subtext1};
    --color-box-shadow-rgb: #{color.scale($frappe-crust, $lightness: 10%)};
    --color-box-shadow: #{color.scale($frappe-crust, $lightness: 15%)};
    --color-border: #{$frappe-crust};
    --color-border-dark: #{color.scale($frappe-crust, $lightness: 5%)};
    --color-border-maxcontrast: #{color.scale($frappe-crust, $lightness: -10%)};


    --color-primary: #{$frappe-maroon};
    --color-primary-default: #{$frappe-maroon};
    --color-primary-text: #{$frappe-crust};
    --color-primary-hover: #{color.scale($frappe-maroon, $lightness: -5%)};
  
    --color-primary-light: #{$frappe-green};
    --color-primary-light-text: #{$frappe-crust};
    --color-primary-light-hover: #{color.scale($frappe-green, $lightness: -5%)};
  
    --color-primary-element: #{$frappe-maroon};
    --color-primary-element-hover: #{color.scale($frappe-maroon, $lightness: -5%)};
    --color-primary-element-text: #{$frappe-crust};
    --color-primary-element-text-dark: #{$frappe-mantle};
  
    --color-primary-element-light: #{$frappe-blue};
    --color-primary-element-light-hover: #{color.scale($frappe-blue, $lightness: -5%)};
    --color-primary-element-light-text: #{$frappe-crust};
    --gradient-primary-background: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
    
    //Unchanged
    --font-face: system-ui, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Cantarell, Ubuntu, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --default-font-size: 15px;
    --animation-quick: 100ms;
    --animation-slow: 300ms;
    --border-radius: 3px;
    --border-radius-large: 10px;
    --border-radius-rounded: 28px;
    --border-radius-pill: 100px;
    --default-clickable-area: 44px;
    --default-line-height: 24px;
    --default-grid-baseline: 4px;
    --header-height: 50px;
    --navigation-width: 300px;
    --sidebar-min-width: 300px;
    --sidebar-max-width: 500px;
    --list-min-width: 200px;
    --list-max-width: 300px;
    --header-menu-item-height: 44px;
    --header-menu-profile-item-height: 66px;
    --breakpoint-mobile: 1024px;
    --background-invert-if-dark: invert(100%);
    --background-invert-if-bright: no;
    --background-image-invert-if-bright: no;
    --primary-invert-if-bright: no;
    --primary-invert-if-dark: invert(100%);
}
[data-theme-dark-highcontrast] {
  //+0.05,
      --color-main-background: #{rgba($mocha-base, 0.93)} ;
      --color-main-background-rgb: #{$mocha-base};
      --color-main-background-translucent: #{rgba($mocha-base, .97)};
      --color-main-background-blur: #{rgba($mocha-base, .8)};
      --filter-background-blur: #{blur(25px)};
      --gradient-main-background: var(--color-main-background) 0%, var(--color-main-background-translucent) 85%, transparent 100%;
      --color-background-hover: #{$mocha-surface1};
      --color-background-dark:  #{color.scale($mocha-surface0, $lightness: 5%)};
      --color-background-darker: #{$mocha-surface0};
      --color-placeholder-light: #{color.scale($mocha-surface2, $lightness: 5%)};
      --color-placeholder-dark: #{$mocha-surface2};
      --color-main-text: #{$mocha-text};
      --color-text-maxcontrast: #{$mocha-subtext1};
      --color-text-maxcontrast-default: #{color.scale($mocha-subtext0, $lightness: 5%)};
      --color-text-maxcontrast-background-blur: #{$mocha-subtext0};
      --color-text-light: #{var(--color-main-text)};
      --color-text-lighter: #{var(--color-text-maxcontrast)};
      --color-scrollbar: #{$mocha-mauve};
      --color-error: #{$mocha-red};
      --color-error-rgb: #{$mocha-red};
      --color-error-hover: #{color.scale($mocha-red, $lightness: 5%)};
      --color-error-text: #{color.scale($mocha-red, $lightness: -10%)};
      --color-warning: #{$mocha-peach};
      --color-warning-rgb: #{$mocha-peach};
      --color-warning-hover: #{color.scale($mocha-peach, $lightness: 5%)};
      --color-warning-text: #{color.scale($mocha-peach, $lightness: -10%)};
      --color-success: #{$mocha-green};
      --color-success-rgb: #{$mocha-green};
      --color-success-hover: #{color.scale($mocha-green, $lightness: 5%)};
      --color-success-text: #{color.scale($mocha-green, $lightness: -10%)};
      --color-info: #{$mocha-blue};
      --color-info-rgb: #{$mocha-blue};
      --color-info-hover: #{color.scale($mocha-blue, $lightness: 5%)};
      --color-info-text: #{color.scale($mocha-blue, $lightness: -10%)};
      --color-loading-light: #{$mocha-overlay0};
      --color-loading-dark: #{$mocha-subtext1};
      --color-box-shadow-rgb: #{color.scale($mocha-crust, $lightness: 10%)};
      --color-box-shadow: #{color.scale($mocha-crust, $lightness: 15%)};
      --color-border: #{$mocha-crust};
      --color-border-dark: #{color.scale($mocha-crust, $lightness: 5%)};
      --color-border-maxcontrast: #{color.scale($mocha-crust, $lightness: -10%)};
  
  
      --color-primary: #{$mocha-maroon};
      --color-primary-default: #{$mocha-maroon};
      --color-primary-text: #{$mocha-crust};
      --color-primary-hover: #{color.scale($mocha-maroon, $lightness: -5%)};
    
      --color-primary-light: #{$mocha-green};
      --color-primary-light-text: #{$mocha-crust};
      --color-primary-light-hover: #{color.scale($mocha-green, $lightness: -5%)};
    
      --color-primary-element: #{$mocha-maroon};
      --color-primary-element-hover: #{color.scale($mocha-maroon, $lightness: -5%)};
      --color-primary-element-text: #{$mocha-crust};
      --color-primary-element-text-dark: #{$mocha-mantle};
    
      --color-primary-element-light: #{$mocha-blue};
      --color-primary-element-light-hover: #{color.scale($mocha-blue, $lightness: -5%)};
      --color-primary-element-light-text: #{$mocha-crust};
      --gradient-primary-background: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
      
      //Unchanged
      --font-face: system-ui, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Cantarell, Ubuntu, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
      --default-font-size: 15px;
      --animation-quick: 100ms;
      --animation-slow: 300ms;
      --border-radius: 3px;
      --border-radius-large: 10px;
      --border-radius-rounded: 28px;
      --border-radius-pill: 100px;
      --default-clickable-area: 44px;
      --default-line-height: 24px;
      --default-grid-baseline: 4px;
      --header-height: 50px;
      --navigation-width: 300px;
      --sidebar-min-width: 300px;
      --sidebar-max-width: 500px;
      --list-min-width: 200px;
      --list-max-width: 300px;
      --header-menu-item-height: 44px;
      --header-menu-profile-item-height: 66px;
      --breakpoint-mobile: 1024px;
      --background-invert-if-dark: invert(100%);
      --background-invert-if-bright: no;
      --background-image-invert-if-bright: no;
      --primary-invert-if-bright: no;
      --primary-invert-if-dark: invert(100%);
}
[data-theme-light-highcontrast] {
  //+0.05,
      --color-main-background: #{rgba($macchiato-base, 0.93)} ;
      --color-main-background-rgb: #{$macchiato-base};
      --color-main-background-translucent: #{rgba($macchiato-base, .97)};
      --color-main-background-blur: #{rgba($macchiato-base, .8)};
      --filter-background-blur: #{blur(25px)};
      --gradient-main-background: var(--color-main-background) 0%, var(--color-main-background-translucent) 85%, transparent 100%;
      --color-background-hover: #{$macchiato-surface1};
      --color-background-dark:  #{color.scale($macchiato-surface0, $lightness: 5%)};
      --color-background-darker: #{$macchiato-surface0};
      --color-placeholder-light: #{color.scale($macchiato-surface2, $lightness: 5%)};
      --color-placeholder-dark: #{$macchiato-surface2};
      --color-main-text: #{$macchiato-text};
      --color-text-maxcontrast: #{$macchiato-subtext1};
      --color-text-maxcontrast-default: #{color.scale($macchiato-subtext0, $lightness: 5%)};
      --color-text-maxcontrast-background-blur: #{$macchiato-subtext0};
      --color-text-light: #{var(--color-main-text)};
      --color-text-lighter: #{var(--color-text-maxcontrast)};
      --color-scrollbar: #{$macchiato-mauve};
      --color-error: #{$macchiato-red};
      --color-error-rgb: #{$macchiato-red};
      --color-error-hover: #{color.scale($macchiato-red, $lightness: 5%)};
      --color-error-text: #{color.scale($macchiato-red, $lightness: -10%)};
      --color-warning: #{$macchiato-peach};
      --color-warning-rgb: #{$macchiato-peach};
      --color-warning-hover: #{color.scale($macchiato-peach, $lightness: 5%)};
      --color-warning-text: #{color.scale($macchiato-peach, $lightness: -10%)};
      --color-success: #{$macchiato-green};
      --color-success-rgb: #{$macchiato-green};
      --color-success-hover: #{color.scale($macchiato-green, $lightness: 5%)};
      --color-success-text: #{color.scale($macchiato-green, $lightness: -10%)};
      --color-info: #{$macchiato-blue};
      --color-info-rgb: #{$macchiato-blue};
      --color-info-hover: #{color.scale($macchiato-blue, $lightness: 5%)};
      --color-info-text: #{color.scale($macchiato-blue, $lightness: -10%)};
      --color-loading-light: #{$macchiato-overlay0};
      --color-loading-dark: #{$macchiato-subtext1};
      --color-box-shadow-rgb: #{color.scale($macchiato-crust, $lightness: 10%)};
      --color-box-shadow: #{color.scale($macchiato-crust, $lightness: 15%)};
      --color-border: #{$macchiato-crust};
      --color-border-dark: #{color.scale($macchiato-crust, $lightness: 5%)};
      --color-border-maxcontrast: #{color.scale($macchiato-crust, $lightness: -10%)};
  
  
      --color-primary: #{$macchiato-maroon};
      --color-primary-default: #{$macchiato-maroon};
      --color-primary-text: #{$macchiato-crust};
      --color-primary-hover: #{color.scale($macchiato-maroon, $lightness: -5%)};
    
      --color-primary-light: #{$macchiato-green};
      --color-primary-light-text: #{$macchiato-crust};
      --color-primary-light-hover: #{color.scale($macchiato-green, $lightness: -5%)};
    
      --color-primary-element: #{$macchiato-maroon};
      --color-primary-element-hover: #{color.scale($macchiato-maroon, $lightness: -5%)};
      --color-primary-element-text: #{$macchiato-crust};
      --color-primary-element-text-dark: #{$macchiato-mantle};
    
      --color-primary-element-light: #{$macchiato-blue};
      --color-primary-element-light-hover: #{color.scale($macchiato-blue, $lightness: -5%)};
      --color-primary-element-light-text: #{$macchiato-crust};
      --gradient-primary-background: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
      
      //Unchanged
      --font-face: system-ui, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Cantarell, Ubuntu, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
      --default-font-size: 15px;
      --animation-quick: 100ms;
      --animation-slow: 300ms;
      --border-radius: 3px;
      --border-radius-large: 10px;
      --border-radius-rounded: 28px;
      --border-radius-pill: 100px;
      --default-clickable-area: 44px;
      --default-line-height: 24px;
      --default-grid-baseline: 4px;
      --header-height: 50px;
      --navigation-width: 300px;
      --sidebar-min-width: 300px;
      --sidebar-max-width: 500px;
      --list-min-width: 200px;
      --list-max-width: 300px;
      --header-menu-item-height: 44px;
      --header-menu-profile-item-height: 66px;
      --breakpoint-mobile: 1024px;
      --background-invert-if-dark: invert(100%);
      --background-invert-if-bright: no;
      --background-image-invert-if-bright: no;
      --primary-invert-if-bright: no;
      --primary-invert-if-dark: invert(100%);
}

/*Theme selection hide old description*/
.theming__preview .checkbox-radio-switch__text,
.theming__preview--light h3, .theming__preview--light p,
.theming__preview--dark h3, .theming__preview--dark p,
.theming__preview--light-highcontrast h3, .theming__preview--light-highcontrast p,
.theming__preview--dark-highcontrast h3, .theming__preview--dark-highcontrast p {
  visibility: hidden;
}

//Replace old radio btn. lable
.theming__preview .checkbox-radio-switch__text::before {
  visibility: visible;
  content: "Enable this theme";
}

//Show new theme description
.theming__preview--light h3::before {
  content: "Latte theme";
  visibility: visible;
}
.theming__preview--light p::before {
  content: "The catppuccino light theme";
  visibility: visible;
}
.theming__preview--light .theming__preview-image,
.theming__preview--dark .theming__preview-image,
.theming__preview--light-highcontrast .theming__preview-image,
.theming__preview--dark-highcontrast .theming__preview-image {
  //background-image: TODO; !important;
  display: none;
}

//Show new theme description
.theming__preview--dark h3::before {
  content: "Frappe Theme";
  visibility: visible;
}
.theming__preview--dark p::before {
  content: "The milde and cozy catppuccino dark theme";
  visibility: visible;
}

//Show new theme description
.theming__preview--light-highcontrast h3::before {
  content: "Macchiato Theme";
  visibility: visible;
}
.theming__preview--light-highcontrast p::before {
  content: "Catpuccinos perfect mix between Mocha and Frappe";
  visibility: visible;
}

//Show new theme description
.theming__preview--dark-highcontrast h3::before {
  content: "Mocha Theme";
  visibility: visible;
}
.theming__preview--dark-highcontrast p::before {
  content: "Catppuccinos dark theme withe bright colors";
  visibility: visible;
}


/*Setting left nav Pannel to be transparent without blur*/
.app-navigation {
  background-color: var(--color-main-background) !important;
  backdrop-filter: None !important;
  }

/*Setting markdown editor link color to primary light*/
.paragraph-content a {
color: var(--color-primary-element-light) !important; 
}

/*Fixing Dashboards toggel item widget visibility (e.g. weather)*/
.action-item__menutoggle{
background-color: var(--color-primary-element-light) !important;
}
/*Fixing Dashboard Welcome msg visibility*/
.app-dashboard h2:nth-child(1) {
  color: var(--color-main-text) !important;
  }

/*Fixing Mail sidebar 1 text visibility when selected*/
.app-navigation-entry.active a{
  color: var(--color-primary-element-text) !important;
}
/*Fixing Mail sidebar 2 text visibility when selected*/
.list-item__wrapper.list-item__wrapper--active .list-item-content__main span,
.list-item__wrapper.list-item__wrapper--active .list-item-content__main span .envelope__preview-text{
  color: var(--color-primary-element-text) !important;
}

/*Fixing visibility of left header label and right header icons*/
.header-right .header-menu button,
.headeu-main li .app-menu-entry--label{
  color: var(--color-main-text) !important;
}

/*Fixing share link folder icon*/
.files-public-content .thumbnail
{
    filter: brightness(0) saturate(100%) invert(93%) sepia(17%) saturate(7243%) hue-rotate(295deg) brightness(97%) contrast(89%);
}

.files-public-content .files-fileList .date {
  color: var(--color-main-text) !important;
}