@media (prefers-color-scheme: light) {
    :root {
        color: #213547;
        background-color: #E5E5E5;
    }
    a:hover {
        color: #747bff;
    }
    button {
        background-color: #DDDDDD;
    }
}

:root {
    font-family: Poppins, Inter, system-ui, Avenir, Helvetica, Arial, sans-serif !important;
    font-weight: 400;

    color-scheme: light dark;

    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    --background-color: #171919;
    --text-color:rgb(154, 162, 194);
    --link-color: #FF6600;

}

button, input, textarea, select {
    font-family: Poppins, Inter, system-ui, Avenir, Helvetica, Arial, sans-serif !important;
}

[data-theme="light"] {

    --background-color: #E5E5E5;
    --text-color:#737B99;
    --link-color: #FF6600;

    --orngLytWytDark: #FF6600;

    --background-image: url('https://app.muuver.com/wp-content/themes/muuverapp/images/mvr_grad_bg.jpg');
    --background-image-mobile: url('https://app.muuver.com/wp-content/themes/muuverapp/images/mvr_grad_bg_mobi.jpg');
    --shareWrapBG: url('https://app.muuver.com/wp-content/uploads/compShareBgLyt.jpg');

    --shadup: -2px -2px 7px 4px rgb(255 255 255 / 65%), 2px 2px 5px 2px #737b9977;
    --shaduptiny: -1.5px -1.5px 1px 1px rgb(255 255 255 / 80%), 1px 1px 2px 0px #737b9999;
    --shadupsm: -2px -2px 4px 1px rgb(255 255 255 / 85%), 1px 1px 3px 1px #737b9977;
    --shaduplg: -3px -3px 6px 2px rgb(255 255 255 / 75%), 3px 3px 8px 4px #737b9977;
    --shadinset: inset 3px 3px 9px #737b9955, inset -3px -3px 7px #FFFFFF;
    --shadinsetsm: inset 2px 2px 5px #737b9944, inset -2px -2px 5px #FFFFFF;
    --shadinsetvsm: inset 1px 1px 2px #737b9977, inset -1px -1px 2px #FFFFFF;

    --shadupDonut: -4px -4px 6px 3px rgb(255 255 255 / 85%), 2px 2px 5px 4px #737b9966, 0 0 0 10px #E5E5E5;

    --darksamegrey:  #737B99;
    --textshadowlyt: 1px 1px 0 #FFFFFF;
    --textshadowlytlg: 2px 2px 0 #FFFFFF;
    --textshadowdrk: 1px 1px 0 #737b99AA;
    --textemboss: -1px -1px 0 #737b9955, 1px 1px 0 #FFF;
    --ahover: #FF6600;

    --boxshadowlyt: 1px 1px 0 #FFFFFF;
    --boxshadowlytlg: 2px 2px 2px #FFFFFF;
    --inputInsetShadow: inset 2px 2px 4px #737B9999, inset -2px -2px 5px #FFF !important; 

    --svgdropfilter: drop-shadow(1px 2px 0px 0px rgb(255 255 255 / 1));
    --hdrcolor: #737B99;
    --svgcolor: #737B99;
    --imgopacity: 1;
    --bgwytopacity: #FFFFFF;
    --nameboxbg: #737B99;
    --votebutnbg: #DDDDDD;
    --dadoselectorbg: #e5e5e5;
    --dadoselectorshadow: inset 1px 1px 2px #737b9977, inset -1px -1px 5px #FFF;
    --borderbottomcolor: 1px solid #737B9977;
    --borderboxshadow: 0 2px 0 -0.5px #FFF;
    --draghandleborder: 1px solid #CCCCCC;
    --votebutntext: #FFF;
    --itemposnumshadow: inset -2px -2px 3px #FFFFFF99, inset 1px 1px 2px #55555555;
    --sortitembg: #E5E5E5;
    --dashfigureshadow: inset -3px -3px 7px 2px #FFFFFF99, inset 3px 3px 10px 1px rgba(0, 0, 0, 0.8);
    --dashfigureshadowMobi: inset -2px -2px 10px 3px #FFFFFF99, inset 2px 2px 10px 0px rgba(0, 0, 0, 0.7);
    --rateItemImgInset: inset 2px 2px 5px rgba(0, 0, 0, 0.7), inset -2px -2px 5px rgba(255 255 255 / 1);
    --rateItemImgInsetMobi: inset 1px 1px 4px rgba(0, 0, 0, 0.65), inset -1px -1px 5px rgba(255 255 255 / 0.8);
    --resultItemImgInset: inset 2px 2px 5px rgba(0, 0, 0, 0.8), inset -2px -2px 8px rgba(255 255 255 / 0.4);
    --resultItemImgInsetMobi: inset 1px 1px 5px rgba(0, 0, 0, 0.65), inset -2px -2px 6px rgba(255 255 255 / 0.5);
    --topBorder: 1px solid #FFF;
    --topBoxShadow: 0px -1.5px 0px -0.5px #737B9977;
    --lftBoxShadow: 1px 0px 0px 0px #737B9977;
    --rytBoxShadow: -1px 0px 0px 0px #737B9977;
    --topBorderLyt: 0px -1.5px 0px -0.5px #737B9944;
    --topBoxShadowLyt: 1px solid #FFFFFFAA;
    --borderLeft: 1px solid #FFFFFF99;
    --LdrBrdrTop: 15px ridge #0077CC77;
    --LdrBrdrBtm: 15px groove #00BB0077;
    --LdrAftBrdrTop: 15px ridge #00BB0077;
    --LdrAftBrdrBtm: 15px groove #0077CC77;
    --boxshadowwytryt: 1px 0 0 #FFF;
    --boxshadowwytlft: -1px 0 0 #FFF;
    --boxshadowwytlftinset: inset 2px 0 0 #FFF;
    --userTagBG: #E5E5E500;
    --userTagHoverBG: #E5E5E5;
    --hideLeftWytBrdr: 1px solid #FFF;
    --profileImgShadow: 4px 6px 7px #41486377 !important;

    --ftrButnLytIndx: 10;
    --ftrButnDrkIndx: 5;
    --ftrLytOpacity: 1;
    --ftrDrkOpacity: 0;
    --ftrbrdrlft: 1px solid #FFFFFF;

    --trackDot: #CCCCCC;
    --trackDotBg: #CCCCCC;
    --trackDotBrdr: 2px solid #CCCCCC;

    --privPopBG: #E5E5E5; 
    --privPopShadow: 5px 5px 16px 6px #00000044;
    --privCaret: 18px solid #E5E5E5;
}

  /* Define dark theme colors */
[data-theme="dark"] {

    --background-color: #171919;
    --text-color: #FFF;
    --link-color: #FF6600;
    
    --orngLytWytDark: #FFFFFF;

    --background-image: url('https://app.muuver.com/wp-content/themes/muuverapp/images/mvr_dark_grad_bg.jpg');
    --background-image-mobile: url('https://app.muuver.com/wp-content/themes/muuverapp/images/mvr_dark_grad_bg_mobi.jpg');
    --shareWrapBG: url('https://app.muuver.com/wp-content/uploads/compShareBgDrk.jpg');

    --shadup: -4px -4px 7px 2px rgb(255 255 255 / 12%), 2px 2px 7px 7px rgb(0 0 0 / 60%);
    --shaduptiny: -1.5px -1.5px 1px 1px rgb(255 255 255 / 15%), 1px 1px 2px 2px rgb(0 0 0 / 90%);
    --shadupsm: -1.5px -1.5px 3px 2px rgb(255 255 255 / 15%), 2px 2px 3px 3px rgb(0 0 0 / 80%);
    --shaduplg: -3px -3px 6px 2px rgb(255 255 255 / 15%), 3px 3px 8px 4px rgb(0 0 0 / 50%);
    --shadinset: inset 3px 3px 8px rgb(0 0 0 / 50%), inset -3px -3px 7px rgb(255 255 255 / 15%);
    --shadinsetsm: inset 2px 2px 6px rgb(0 0 0 / 70%), inset -2px -2px 5px rgb(255 255 255 / 15%);
    --shadinsetvsm: inset 1px 1px 2px #000000CC, inset -1px -1px 2px #FFFFFF33;

    --shadupDonut: -4px -4px 7px 2px rgb(255 255 255 / 12%), 2px 2px 6px 6px rgb(0 0 0 / 95%), 0 0 8px 10px #131717BB;

    --darksamegrey:  #737B99;
    --textshadowlyt: 1px 1px 0 #000;
    --textshadowlytlg: 1px 1px 0 #000;
    --textshadowdrk: 1px 1px 0 #000;
    --textemboss: none;
    --ahover: #FFFFFF;
    --svgdropfilter: none;

    --boxshadowlyt: 1px 1px 0 #000;
    --boxshadowlytlg: 2px 2px 2px #000;
    --inputInsetShadow: inset 3px 3px 7px #000, inset -2px -2px 3px #FFFFFF44 !important; 

    --hdrcolor: #737B99;
    --svgcolor: #FF6600;
    --imgopacity: 0.75;
    --bgwytopacity: #FFFFFF22;
    --nameboxbg: #FF6600;
    --votebutnbg: #99AACC0E;
    --dadoselectorbg: #e5e5e533;
    --dadoselectorshadow: inset 2px 2px 5px #000000EE, inset -1px -1px 5px #FFFFFFAA;
    --borderbottomcolor: 1px solid #737B9944;
    --borderboxshadow: none;
    --draghandleborder: 1px solid #CCCCCC44;
    --votebutntext: #FFFFFF66;
    --itemposnumshadow: inset -2px -2px 3px #FFFFFF33, inset 1px 1px 2px #000000DD;
    --sortitembg: #1A1A1A;
    --dashfigureshadow: inset -3px -3px 7px 2px #FFFFFF77, inset 3px 3px 10px 1px rgba(0, 0, 0, 0.8);
    --dashfigureshadowMobi: inset -2px -2px 10px 3px #FFFFFF88, inset 2px 2px 10px 0px rgba(0, 0, 0, 0.9);
    --rateItemImgInset: inset 2px 2px 10px 0px rgba(0, 0, 0, 0.8), inset -3px -3px 12px rgba(255 255 255 / 0.4);
    --rateItemImgInsetMobi: inset 1px 1px 7px 0px rgba(0, 0, 0, 0.7), inset -2px -2px 9px rgba(255 255 255 / 0.6);
    --resultItemImgInset: inset 2px 2px 5px rgba(0, 0, 0, 0.8), inset -2px -2px 8px rgba(255 255 255 / 0.4);
    --resultItemImgInsetMobi: inset 1px 1px 6px rgba(0, 0, 0, 0.9), inset -2px -2px 6px rgba(255 255 255 / 0.4);
    --topBorder: none;
    --topBoxShadow: 0 -1px 0 -0.5px #737B9999;
    --topBorderLyt: 0 -1px 0 #737B9955;
    --lftBoxShadow: 1px 0px 0px 0px #737B9999;
    --rytBoxShadow: -1px 0px 0px 0px #737B9999;
    --topBoxShadowLyt: none;
    --borderLeft: none;
    --LdrBrdrTop: 15px ridge #0077CC;
    --LdrBrdrBtm: 15px groove #00BB00;
    --LdrAftBrdrTop: 15px ridge #00BB00;
    --LdrAftBrdrBtm: 15px groove #0077CC;
    --boxshadowwytryt: 1px 0 0 #000;
    --boxshadowwytlft: -1px 0 0 #000;
    --boxshadowwytlftinset: inset 1px 0 0 #000;
    --userTagBG: #11111100;
    --userTagHoverBG: #222222;
    --hideLeftWytBrdr: none;
    --profileImgShadow: 4px 6px 7px #00000077 !important;

    --ftrButnLytIndx: 5;
    --ftrButnDrkIndx: 10;
    --ftrLytOpacity: 0;
    --ftrDrkOpacity: 1;
    --ftrbrdrlft: 1px solid #FFFFFF11;

    --trackDot: #333333;
    --trackDotBg: #333333;
    --trackDotBrdr: 2px solid #333333;

    --privPopBG: #222222; 
    --privPopShadow: 5px 5px 16px 6px #000000;
    --privCaret: 18px solid #222222;
}