/* Light Color Scheme */
.light-scheme {
    --text-color: #171819;  
    --background-color: #BABBC1;       
    --label-background: #C0C0C0;
    --rgb-background-color: 192 192 192;  /* #C0C0C0; */
    --border-color: #111111;              
    --box-shadow-color: #494949;          
    --text-shadow-color: #494949;         
    --slider-button-background: #888888;       
    --slider-button-background-active: #444444;   
    --slider-button-hover: #C0C0C0;  
    --pagination-box-color: #444444;   
    --svg-color: brightness(0);         
    --action-color: #000000;           
    --breadcrumb-separator: #333333;   
    --breadcrumb-listitem: #000000;    
    --breadcrumb-lastcolor: #324150;   
    --circle-borders: #FFFFFF;         
    --homepageurl: url(/theme/home/homepage-light.png);           
    --body-background:
        linear-gradient(
            to bottom,
            #9fa3a6 0%,
            #bcc0c4 20%,
            #dde2e6 50%,
            #bcc0c4 80%,
            #8f9397 100%
        )
}

/* Dark Color Scheme */
.dark-scheme {
    --text-color: #C0C0C0;             
    --background-color: #373A3D;          
    --label-background: #171819;
    --rgb-background-color: 23 24 25;  /* #171819; */
    --border-color: #CCCCCC;           
    --box-shadow-color: #919191;       
    --text-shadow-color: #808080;
    --slider-button-background: #666666; 
    --slider-button-background-active: #222222;
    --slider-button-hover: #171819;
    --pagination-box-color: #555555;      
    --svg-color: invert(1);              
    --action-color: #FFFFFF;           
    --breadcrumb-separator: #999999;   
    --breadcrumb-listitem: #FFFFFF;    
    --breadcrumb-lastcolor: #788CA0;   
    --circle-borders: #919191;         
    --homepageurl: url(/theme/home/homepage-dark.png);
    --body-background: 
        linear-gradient(
            to bottom,
            #171819 0%,
            #2c2f33 20%,
            #4a4f54 50%,
            #2c2f33 80%,
            #101112 100%
        );
}

/* Global colors - regardless of color scheme */
:root {
    --hover-color: #1b926b;                  
    --action-background: #444444;            
    --slider-box-shadow-color: #919191;     
    --slider-box-shadow-topleft-color: #444444;
    --slider-button-shadow-color: #333333;     

    --slider-button: inset 3px 3px 5px var(--slider-box-shadow-color),
                     inset -3px -3px 5px var(--slider-button-shadow-color);

    --metadata-border: #000000;

    --now-playing-color: #47d500;
    --now-playing-background-color: #555555;

    --red-color: #ff0000;                   
    --darkred-color: #7A1E1E;
    --clear-filter: invert(1);
    --textbox-color: black;

    --comment-background-color: #323c50;    
    --comment-color: #dce6ff;        
    --comment-border-color: #000000;

    --cover-width: 142px;     /*  WARNING - DO NOT CHANGE THIS OR COVER WIDTHS WILL BE WRONG */
    --cover-height: 204px;   /*  WARNING - DO NOT CHANGE THIS OR COVER HEIGHTS WILL BE WRONG */

}