:root{
    --font: 22px;
    --cover: 128px;
    --hero: url('../images/hero.png');
    --label-rating-bg: #333;
    --label-rating-text: #fff;
    --label-year-bg: #444;
    --label-year-text: #fff;
    --label-bgg-bg: #3f3a60;
    --label-bgg-text: #fff;
    --logo-hero-container: 192px;
    --logo-hero-image: 100%;
    --button-bg: transparent;
}

/* BGG RATING COLOR SCHEME
.rating-1  { --rating-bg: #b2151f; --rating-fg: white; }
.rating-2  { --rating-bg: #b2151f; --rating-fg: white; }
.rating-3  { --rating-bg: #d71925; --rating-fg: white; }
.rating-4  { --rating-bg: #d71925; --rating-fg: white; }
.rating-5  { --rating-bg: #5369a2; --rating-fg: white; }
.rating-6  { --rating-bg: #5369a2; --rating-fg: white; }
.rating-7  { --rating-bg: #1978b3; --rating-fg: white; }
.rating-8  { --rating-bg: #1d804c; --rating-fg: white; }
.rating-9  { --rating-bg: #186b40; --rating-fg: white; }
.rating-10 { --rating-bg: #186b40; --rating-fg: white; }
*/

.rating-1  { --rating-bg: #8f1119; --rating-fg: white; }
.rating-2  { --rating-bg: #b2151f; --rating-fg: white; }
.rating-3  { --rating-bg: #c81722; --rating-fg: white; }
.rating-4  { --rating-bg: #d71925; --rating-fg: white; }
.rating-5  { --rating-bg: #8b4d82; --rating-fg: white; }
.rating-6  { --rating-bg: #5369a2; --rating-fg: white; }
.rating-7  { --rating-bg: #1978b3; --rating-fg: white; }
.rating-8  { --rating-bg: #248b76; --rating-fg: white; }
.rating-9  { --rating-bg: #1f7b53; --rating-fg: white; }
.rating-10 { --rating-bg: #186b40; --rating-fg: white; }

@media (prefers-color-scheme: dark){
    :root{
        --bg: #121212;
        --light-gray: #fff;
        --light-gray2: #eee;
        --transparent-hero: rgba(255,255,255,0.01);
        --transparent-shadow: rgba(0,0,0,0.33);
        --color-calendar-hover: #812d30;
        --color-instagram-hover: #492065;
        --color-facebook-hover: #0d4388;
        --color-telegram-hover: #004466;
        --color-maps-hover: #1d5e2e;
        --color-library-hover: #662000;
        --text: #fff;
        --note-text: #fff;
        --bgg: #3F3A60;
        --card: rgba(18,18,18,0.66);
        --card-strong: #242424;
        --surface: #2b2b2b;
        --surface-hover: #333333;
        --shadow: #010101;
        --border: #3a3a3a;
    }

    .icon-calendar{
        background-image: url('../images/icons/dark/calendar.svg');
    }

    .icon-instagram{
        background-image: url('../images/icons/dark/instagram.svg');
    }
     
    .icon-facebook{
        background-image: url('../images/icons/dark/facebook.svg');
    }

    .icon-telegram{
        background-image: url('../images/icons/dark/telegram.svg');
    }

    .icon-maps{
        background-image: url('../images/icons/dark/map.svg');
    }

    .icon-gps{
        background-image: url('../images/icons/dark/gps.svg');
    }

    .icon-library{
        background-image: url('../images/icons/dark/meeple.svg');
    }
    
    .icon-groups{
        background-image: url('../images/icons/dark/groups.svg');
    }

    .icon-cc{
        background-image: url('../images/icons/dark/cc.svg');
    }
}

/*  DARK MODE  */

@media (prefers-color-scheme: light){
    :root{
        --bg: #f0f0f0;
        --light-gray: #000;
        --light-gray2: #111;
        --button-bg: #fff;
        --transparent-hero: rgba(0,0,0,0.01);
        --transparent-shadow: rgba(0,0,0,0.33);
        --color-calendar-hover: #b3debf;
        --color-instagram-hover: #d1b5e3;
        --color-facebook-hover: #a8ccfa;
        --color-telegram-hover: #b8e7ff;
        --color-maps-hover: #ffc1c3;
        --color-library-hover: #ffb999;
        --text: #000;
        --note-text: #000;
        --bgg: #3f3a60;
        --card: rgba(255,255,255,0.66);
        --card-strong: #e0e0e0;
        --surface: #d4d4d4;
        --surface-hover: #cccccc;
        --shadow: #c0c0c0;
        --border: #c5c5c5;
    }

    .icon-calendar{
        background-image: url('../images/icons/light/calendar.svg');
    }

    .icon-instagram{
        background-image: url('../images/icons/light/instagram.svg');
    }
        
    .icon-facebook{
        background-image: url('../images/icons/light/facebook.svg');
    }

    .icon-telegram{
        background-image: url('../images/icons/light/telegram.svg');
    }

    .icon-maps{
        background-image: url('../images/icons/light/map.svg');
    }

    .icon-gps{
        background-image: url('../images/icons/light/gps.svg');
    }

    .icon-library{
        background-image: url('../images/icons/light/meeple.svg');
    }
    
    .icon-groups{
        background-image: url('../images/icons/light/groups.svg');
    }

    .icon-cc{
        background-image: url('../images/icons/light/cc.svg');
    }
}