:root{
    --white: #FEFEFF;
    --grey: #4B5563;
    --progress-bar-grey: #B3BAD0;
    --light-border-grey: #D9D9D9;
    --navbar-grey: #6B7280;
    --neutral-deal-grey: #F0F0F0;
    --old-price-grey: #94A3B8;
    --filter-separator-grey: #9CA3AF;
    --black: #111827;
    --dark-blue: #04165D;
    --brighter-dark-blue: #062080;
    --darker-dark-blue: #020E3A;
    --light-blue: #EEF2F7;
    --slate-blue: #1E293B;
    --ghostly: #CBD5E1;
    --really-light-green-grey: #F2FFF9;
    --light-green: #e8f6ed;
    --mint-green: #A8EBD4;
    --money-green: #3DB369;
    --shamrock-green: #D1FAE5;
    --dark-green: #0B7959;
    --orange: #FF9778;
    --light-red: #F6E8EF;
    --lipstick-red: #B74A4C;

    --box-shadow: 0px 6px 14.7px -4px #00000040;

    --clr-bg-primary: var(--white);
    --clr-bg-secondary: var(--light-blue);
    --clr-bg-footer: var(--slate-blue);

    --clr-accent-primary: var(--dark-blue);
    --clr-accent-lighter: var(--brighter-dark-blue);
    --clr-accent-darker: var(--darker-dark-blue);
    --clr-disabled: var(--ghostly);

    --clr-font-primary: var(--black);
    --clr-font-secondary: var(--grey);
    --clr-font-navbar: var(--navbar-grey);

    --clr-select-border: var(--light-border-grey);

    --clr-deal-bad-bg: var(--light-red);
    --clr-deal-bad-font: var(--lipstick-red);
    --clr-deal-neutral-bg: var(--neutral-deal-grey);
    --clr-deal-neutral-font: var(--grey);
    --clr-deal-good-bg: var(--light-green);
    --clr-deal-good-font: var(--money-green);
    --clr-deal-great-bg: var(--shamrock-green);
    --clr-deal-great-font: var(--dark-green);
    --clr-price-old: var(--old-price-grey);
}

.text-h1, .text-h2, .text-h3{ color: var(--clr-font-primary); }
.text-sub-h1, .text-sub-h2, .text-sub-h3{ color: var(--clr-font-secondary); }
.text-navbar{ color: var(--clr-font-navbar); }

.priceBox--bad{
    background-color: var(--clr-deal-bad-bg);
    color: var(--clr-deal-bad-font);
}
.priceBox--neutral{
    background-color: var(--clr-deal-neutral-bg);
    color: var(--clr-deal-neutral-font);
}
.priceBox--good{
    background-color: var(--clr-deal-good-bg);
    color: var(--clr-deal-good-font);
}
.priceBox--great{
    color: var(--clr-deal-great-font);
    background-color: var(--clr-deal-great-bg);
}

.select, input::placeholder{ /*gamesearch*/
    background-color:var(--clr-bg-primary);
    border-color:var(--clr-select-border);
    color: var(--clr-font-secondary);
}

select:focus, input:focus{
    outline: 1px solid var(--clr-accent-primary);
}

.btn--dark{
    background-color: var(--clr-accent-primary);
    border-color: transparent;
    color: var(--clr-bg-primary);

    &:hover{
        background-color: var(--clr-accent-lighter);
    }
    &:active{
        background-color: var(--clr-accent-darker);
    }
    &:focus{
        border-color: var(--clr-accent-primary);
    }
    &:disabled{
        background-color: var(--clr-disabled);
    }
}

.btn--light{
    background-color: var(--clr-bg-primary);
    border-color: var(--clr-accent-primary);
    color: var(--clr-accent-primary);

    &:hover{
        background-color: var(--clr-accent-primary);
        border-color: transparent;
        color: var(--clr-bg-primary);
    }
    &:active{
        background-color: var(--clr-accent-darker);
        border-color: transparent;
        color: var(--clr-bg-primary);
    }
    &:focus{
        border-color: var(--clr-accent-lighter);
    }
    &:disabled{
        border-color: var(--clr-disabled);
        color: var(--clr-disabled);
    }
}

ul.list__bullets--accent li::marker {
    color:var(--clr-accent);
}

/* Utilities - placed below so it can override presets from above */
.text-clr-primary{ color: var(--clr-font-primary); }
.text-clr-secondary{ color: var(--clr-font-secondary); }
.text-clr-inverse{ color: var(--clr-bg-primary); }

.text-clr-deal-bad{ color: var(--clr-deal-bad-font); }
.text-clr-deal-good{ color: var(--clr-deal-good-font); }
.text-clr-deal-neutral{ color: var(--clr-deal-neutral-font); }
.text-clr-price-old{ color: var(--clr-price-old); }

.bg-clr--primary { background-color: var(--clr-bg-primary); }
.bg-clr--secondary { background-color: var(--clr-bg-secondary); }
.bg-clr--footer { background-color: var(--clr-bg-footer); }

.box-shadow{ box-shadow: var(--box-shadow); }