:root {
    /* main colors */
    --color-primary: #384436;
    /* --color-primary-transparant: rgba(174, 200, 164, 0.85); */
    /* --color-primary-dark: hsl(103, 25%, 35%); */
    /* --color-primary-dark-transparant: rgba(80, 112, 67, 0.85); */

    --color-secondary: #9d6331;
    /* --color-secondary-dark: hsl(32, 100%, 35%); */

    --color-cream: #fcf6ea;
    --color-cream-bg: #f5e2bc;

    /* alert colors */
    --color-default: #494f52;
    --color-success: hsl(134, 61%, 40%);
    --color-info: hsl(188, 78%, 40%);
    --color-warning: hsl(45, 100%, 45%);
    --color-danger: hsl(354, 70%, 50%);

    /* text */
    --color__text--normal: black;
    --color__text--invert: white;

    /* backgrounds */

    /* borders */

    /* grays */
}