@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
    
    /* Brand color */
    --brand-color: #a28d76;

    /* Darker shades of brand color */
    --brand-color-dark-1: #927f6a;
    --brand-color-dark-2: #82715e;
    --brand-color-dark-3: #716353;
    --brand-color-dark-4: #615547;
    --brand-color-dark-5: #51473b;
    --brand-color-dark-6: #41382f;
    --brand-color-dark-7: #312a23;
    --brand-color-dark-8: #201c18;
    --brand-color-dark-9: #100e0c;
    
    /* lighter shades of brand color */
    --brand-color-light-1: #ab9884;
    --brand-color-light-2: #b5a491;
    --brand-color-light-3: #beaf9f;
    --brand-color-light-4: #c7bbad;
    --brand-color-light-5: #d1c6bb;
    --brand-color-light-6: #dad1c8;
    --brand-color-light-7: #e3ddd6;
    --brand-color-light-8: #ece8e4;
    --brand-color-light-9: #f6f4f1;

    /* Typography */
    font-size: 1rem;
    font-weight: 400;
    font-optical-sizing: auto;
    font-family: "Inter", sans-serif;
    color: var(--brand-color-dark-9);
    ::selection { background: var(--brand-color-light-6); }


    /* Buttons */
    button {
        border: 3px solid var(--brand-color-dark-9);
        background-color: var(--brand-color-dark-9);
        text-transform: uppercase;
        font-size: 0.9rem;
        padding: 0.65rem 1.25rem;
        font-weight: 600;
        cursor: pointer;
        color: var(--brand-color-light-9);
    }
    
    button:hover {
        background-color: var(--brand-color-dark-8);
        border-color: var(--brand-color-dark-8);
    }

}