:root {
    --uxp-host-font-size: 13px;
    --uxp-host-font-size-smaller: 12px;
    --uxp-host-font-size-larger: 14px;
}
@media(prefers-color-scheme: lightest){
    :root{
        /* P0 */
        --uxp-host-background-color: #F0F0F0;
        --uxp-host-text-color: #4B4B4B;
        --uxp-host-border-color: #D1D1D1;
        --uxp-host-link-text-color: #4B9CF5;
        --uxp-host-widget-hover-background-color: #CECECE;
        --uxp-host-widget-hover-text-color: #4B4B4B;
        --uxp-host-widget-hover-border-color: #CECECE;

        /* P1 */
        --uxp-host-text-color-secondary: #606060;
        --uxp-host-link-hover-text-color: #4B4B4B;
        --uxp-host-label-text-color: #4B4B4B;
    }
}
@media(prefers-color-scheme: light){
    :root{
        /* P0 */
        --uxp-host-background-color: #B8B8B8;
        --uxp-host-text-color: #424242;
        --uxp-host-border-color: #9C9C9C;
        --uxp-host-link-text-color: #4B9CF5;
        --uxp-host-widget-hover-background-color: #9D9D9D;
        --uxp-host-widget-hover-text-color: #424242;
        --uxp-host-widget-hover-border-color: #9D9D9D;
        
        /* P1 */
        --uxp-host-text-color-secondary: #424242;
        --uxp-host-link-hover-text-color: #424242;
        --uxp-host-label-text-color: #424242;
    }
}
@media(prefers-color-scheme: dark){
    :root {

        /* P0 */
        --uxp-host-background-color: #535353;
        --uxp-host-text-color: #FFFFFF;
        --uxp-host-border-color: #454545;
        --uxp-host-link-text-color: #4B9CF5; 
        --uxp-host-widget-hover-background-color: #5B5B5B;
        --uxp-host-widget-hover-text-color: #FFFFFF;
        --uxp-host-widget-hover-border-color: #5B5B5B;

        /* P1 */
        --uxp-host-text-color-secondary: #E5E5E5;   
        --uxp-host-link-hover-text-color: #FFFFFF; 
        --uxp-host-label-text-color: #FFFFFF;
    }
}
@media(prefers-color-scheme: darkest){
    :root{
        /* P0 */ 
        --uxp-host-background-color: #323232;
        --uxp-host-text-color: #FFFFFF;
        --uxp-host-border-color: #292929;
        --uxp-host-link-text-color: #4B9CF5;
        --uxp-host-widget-hover-background-color: #3D3D3D;
        --uxp-host-widget-hover-text-color: #FFFFFF;
        --uxp-host-widget-hover-border-color: #3D3D3D;

        /* P1 */
        --uxp-host-text-color-secondary: #9B9B9B;
        --uxp-host-link-hover-text-color: #FFFFFF;
        --uxp-host-label-text-color: #FFFFFF;
    }
}