/*----------------*/
/* Dynamic Themes */
/*----------------*/

html {
  
             --bg:   var(--color); 
             --fg: var(--L75);
      --bg-filter:   var(--bg);
      --fg-filter: var(--fg);
  --bg-nav:   var(--bg);
  --fg-nav: var(--fg);
    --settings-bgcolor:   var(--bg);
    --fg-settings: var(--fg);
      --bg-header:   var(--bg);
      --fg-header: var(--fg);
        --bg-item:   var(--bg);
        --fg-item: var(--fg);
     --bg-item-nth2: unset;
       --loading-color-1: var(--fg);
       --loading-color-2: var(--fg);
          --shadow-color: none;
      --textshadow-color: none;
  
  /*---------- DYNAMIC COLORS ----------*/
  /* D = darker */
  --D5: color-mix(in srgb, var(--color) 95%, black 5%);
  --D10: color-mix(in srgb, var(--color) 90%, black 10%);
  --D15: color-mix(in srgb, var(--color) 85%, black 15%);
  --D20: color-mix(in srgb, var(--color) 80%, black 20%);
  --D25: color-mix(in srgb, var(--color) 75%, black 25%);
  --D30: color-mix(in srgb, var(--color) 70%, black 30%);
  --D35: color-mix(in srgb, var(--color) 65%, black 35%);
  --D40: color-mix(in srgb, var(--color) 60%, black 40%);
  --D45: color-mix(in srgb, var(--color) 55%, black 45%);
  --D50: color-mix(in srgb, var(--color) 50%, black 50%);
  --D55: color-mix(in srgb, var(--color) 45%, black 55%);
  --D60: color-mix(in srgb, var(--color) 40%, black 60%);
  --D65: color-mix(in srgb, var(--color) 35%, black 65%);
  --D70: color-mix(in srgb, var(--color) 30%, black 70%);
  --D75: color-mix(in srgb, var(--color) 25%, black 75%);
  --D80: color-mix(in srgb, var(--color) 20%, black 80%);
  --D85: color-mix(in srgb, var(--color) 15%, black 85%);
  --D90: color-mix(in srgb, var(--color) 10%, black 90%);
  --D95: color-mix(in srgb, var(--color) 5%, black 95%);
    /* L = lighter */
  --L5: color-mix(in srgb, var(--color) 95%, white 5%);
  --L10: color-mix(in srgb, var(--color) 90%, white 10%);
  --L15: color-mix(in srgb, var(--color) 85%, white 15%);
  --L20: color-mix(in srgb, var(--color) 80%, white 20%);
  --L25: color-mix(in srgb, var(--color) 75%, white 25%);
  --L30: color-mix(in srgb, var(--color) 70%, white 30%);
  --L35: color-mix(in srgb, var(--color) 65%, white 35%);
  --L40: color-mix(in srgb, var(--color) 60%, white 40%);
  --L45: color-mix(in srgb, var(--color) 55%, white 45%);
  --L50: color-mix(in srgb, var(--color) 50%, white 50%);
  --L55: color-mix(in srgb, var(--color) 45%, white 55%);
  --L60: color-mix(in srgb, var(--color) 40%, white 60%);
  --L65: color-mix(in srgb, var(--color) 35%, white 65%);
  --L70: color-mix(in srgb, var(--color) 30%, white 70%);
  --L75: color-mix(in srgb, var(--color) 25%, white 75%);
  --L80: color-mix(in srgb, var(--color) 20%, white 80%);
  --L85: color-mix(in srgb, var(--color) 15%, white 85%);
  --L90: color-mix(in srgb, var(--color) 10%, white 90%);
  --L95: color-mix(in srgb, var(--color) 5%, white 95%);
    
}

/*/////////////// General Themes ///////////////*/

html[data-theme="dark"] {
  --color       : #111111;
  --bg          : #111111; --fg          : white;
  --bg-filter   : #050505; --fg-filter   : white;
  --bg-nav      : #050505; --fg-nav      : white;
  --bg-header   : #050505; --fg-header   : white;
  --bg-item     : #111111; --fg-item     : white;
  --bg-item-nth2: var(--bg-lighter-5);
  --bg-settings : #111111; --fg-settings : white;
  --bg-menu: #151515;    --fg-menu   : white;
  --loading-color-1: white;
  --loading-color-2: white;
  --shadow-color: #FFF2;
}
html[data-theme="light"] {
               --color: white;
             --bg: white;            --fg: black;
      --bg-filter: white;     --fg-filter: black;
  --bg-nav: white; --fg-nav: black;
    --settings-bgcolor: white;   --fg-settings: black;
      --bg-header: white;     --fg-header: black;
        --bg-item: white;       --fg-item: black;
   --bg-item-nth2: #F5F5F5;
  --bg-settings : white; --fg-settings : black;
        --bg-menu: white;       --fg-menu: black;
     --loading-color-1: black;
     --loading-color-2: black;
}
html[data-theme="oled"] {
              --color: black;
            --bg: black;
          --fg: #D0D0D0;
  --bg-item-nth2: var(--L10);
       --shadow-color: #D0D0D033;
   --textshadow-color: none;
}
html[data-theme="vegster"] {
              --color: var(--color-1);
            --bg: var(--color-1);             --fg: var(--color-3);
     --bg-filter: var(--color-2);      --fg-filter: var(--color-3);
 --bg-nav: var(--color-3);  --fg-nav: white;
   --settings-bgcolor: var(--color-2);    --fg-settings: var(--color-3);
     --bg-header: var(--color-3);      --fg-header: white;
       --bg-item: white;                 --fg-item: var(--color-3);
  --grid-item-bgcolor: none;             --grid-item-textcolor: var(--color-3);
       --bg-menu: var(--color-2);        --fg-menu: var(--color-3);
    --loading-color-1: var(--color-2);
    --loading-color-2: var(--color-3);
}

/*/////////////// Dark Themes ///////////////*/

html[data-theme="dark-colorized"] { --color: oklch( 0.25 0.1 attr(data-theme-hue type(<number>), 0) ); }

html[data-theme="dark-colorized"] {
/*--bg: var(--color);*/
  --fg: var(--L75);
  --bg-filter: var(--D10);
  --bg-header: var(--D20);
  --bg-item: var(--bg);
  --bg-item-nth2: var(--L5);
  --bg-navigation: var(--D20);
  --bg-settings: var(--D20);
     --shadow-color: oklch( from var(--L25) l c h / 0.35 );
 --textshadow-color: none;
}
html[data-theme="dark-colorized-contrast"] {
     --color2: oklch( from var(--color) calc(l + 0.8) calc(c - 0.03) calc(h + 210) );
    /*--bg: var(--color);*/
  --fg: var(--color2);
  --bg-filter: var(--D10);
  --fg-filter: var(--fg);
  --bg-header: var(--D20);
  --fg-header: var(--fg);
  --bg-item: var(--bg);
  --fg-item: var(--fg);
  --bg-item-nth2: var(--L5);
  --bg-navigation: var(--D20);
  --fg-navigation: var(--fg);
  --bg-settings: var(--D20);
  --fg-settings: var(--fg);
     --shadow-color: var(--L50);
 --textshadow-color: none;
}

/*/////////////// Light Themes ///////////////*/

html[data-theme="light-colorized"] { --color: oklch( 0.75 0.1 attr(data-theme-hue type(<number>), 0) ); }

html[data-theme="light-colorized"] {
/*    --bg: var(--color);*/
  --fg: var(--D75);
  --bg-filter: var(--D10);
  --bg-header: var(--D20);
  --bg-item: var(--bg);
  --bg-item-nth2: var(--D5);
  --bg-navigation: var(--D20);
  --bg-settings: var(--D20);
     --shadow-color: var(--D50);
 --textshadow-color: none;
}
html[data-theme="light-colorized-contrast"] {
     --color2: oklch( from var(--color) calc(l - 0.4) calc(c - 0.03) calc(h + 210) );
    /*--bg: var(--color);*/
  --fg: var(--color2);
  --bg-filter: var(--D10);
  --fg-filter: var(--fg);
  --bg-header: var(--D20);
  --fg-header: var(--fg);
  --bg-item: var(--bg);
  --fg-item: var(--fg);
  --bg-item-nth2: var(--L5);
  --bg-navigation: var(--D20);
  --fg-navigation: var(--fg);
  --bg-settings: var(--D20);
  --fg-settings: var(--fg);
     --shadow-color: var(--L50);
 --textshadow-color: none;
}