:root {
    --fg-clr: black;
    --bg-clr: white;
    --fg-clr-light: black;
    --bg-clr-light: #dedede;
    --bg-clr-light: white;
    --fg-clr-dark: white;
    --bg-clr-dark: var(--bs-dark);
    --brand-clr-1: red;
    --brand-clr-2: white;
    --brand-bg-clr: rgb(38, 42, 47);
    --navbar-fg-clr: white;
    --navbar-bg-clr: #13141c;
    --max-vw: 1200px;
    --navbar-height: 60px;
    --topbar-height: 40px;
    --categories-width: 180px;
    --products-width: 300px;
    --products-width-sm: 250px;
    --search-input-width: 320px;
    --shadow-size: 8px;
    --drop-shadow-size: 6px;
    --min-image-height: 400px;
}

@media screen and (min-width: 768px) {
    :root {
        --navbar-height: 100px;
    }
}

@media screen and (min-width: 992px) {
    :root {
        --navbar-height: 60px;
    }
}