:root {

    /*
    --bg-button-color: rgb(35, 87, 135);
    --bg-button-color-hover: rgba(45, 110, 169, 1);
    */

    /* colors */
    --hekkerij-beige: #afa085;
    --hekkerij-brown: #282924;
    --hekkerij-brown-light: rgb(65, 62, 57);
    --hekkerij-beige-dark: #635740;
    --featured-yellow: rgb(199, 172, 39);
    --green: rgb(2, 133, 68);
    --red: rgb(140, 38, 38);

    --ind-green: rgb(65, 121, 94);
    --ind-red: rgb(161, 75, 75);
    --ind-orange: rgb(180, 129, 74);

    --bootstrap-blue-light: rgb(33, 122, 198);
    --bootstrap-blue: rgb(2, 94, 173);
    --bootstrap-blue-darker: rgb(1, 82, 151);
    --bootstrap-blue-dark: rgb(1, 47, 86);

    /* plain colors */
    --white: rgba(255, 255, 255, 1);
    --light: rgba(248, 248, 248, 1);
    --dark: rgba(16, 16, 16, 1);
    --dark-light: rgba(48, 48, 48, 1);
    --dark-alpha: rgba(16, 16, 16, 0.6);
    --gray-alpha: rgba(52, 24, 24, 0.05);
    --gray: rgba(232, 232, 232, 1);

    /* text colors */
    --text: var(--hekkerij-brown);
    --text-light: var(--dark-light);
    --text-inactive: var(--dark-alpha);
    --text-negative: var(--white);

    /* element colors */
    --bg-button-color: var(--hekkerij-beige);
    --bg-button-color-hover: var(--hekkerij-brown-light);
    --bg-button-color-selected: var(--gray);
    --button-color: var(--text-negative);
    --button-border-color: var(--hekkerij-beige);
    --option-color: var(--dark-light);
    --link-color: rgb(23, 105, 154);
    --link-hover-color: rgb(69, 126, 159);

    --bg-color: var(--white);
    --bg-card-color: var(--light);
    --border-color: var(--gray);

    /* element colors */
    --nav-color: var(--hekkerij-beige);
    --nav-border-color: var(--gray);
    --footer-color: var(--light);
    --feedback-green: var(--green);
    --feedback-red: var(--red);

    /* font */
    --main-font: "Roboto Condensed";
    --brand-font: "Domine";

    /* sizes */
    --page-w: 1080px;
    --border-radius: 0.5rem;
}

.dark-theme {

}