:root {
    /* Base variables */
    --brand-white: #ffffff;

    /* KP Brand Colors  */
    --brand-rodeo-dust: #C8B7A5;
    --brand-1: #e6f2fb;
    --brand-black-100: rgb(24, 32, 37);
    --brand-black-16: rgba(24, 32, 37, 0.16);
    --brand-black-12: rgba(24, 32, 37, 0.12);
    --brand-black-8: rgba(24, 32, 37, 0.08);

    --brand-grey-N80: #262d30;
    --brand-grey-N70: #46494a;
    --brand-navheader: #262d30;


    /* ui colors */

    --brand-alert-red-10: #F4E9E9;
    --brand-alert-red-20: #EACCCA;
    --brand-alert-red-30: hsl(0, 47%, 77%);
    --brand-alert-red-40: hsl(0, 50%, 68%);
    --brand-alert-red-50: #C3534B;
    --brand-alert-red-60: hsl(3, 49%, 45%);
    --brand-alert-red-70: #863832;

    /* Fix the real colors */
    --brand-alert-green-10: #E9F4E9;
    --brand-alert-green-20: #CCEACD;
    --brand-alert-green-30: hsl(120, 47%, 77%);
    --brand-alert-green-40: hsl(120, 50%, 68%);
    --brand-alert-green-50: #4BC353;
    --brand-alert-green-60: hsl(123, 49%, 45%);
    --brand-alert-green-70: #328638;

    /* Max-width wrappers */
    --max-width-XXL: 110rem;
    --max-width-XL: 82rem;
    --max-width-text: 50em;

    --header-height: 6rem;
    --negative-header-height: calc(var(--header-height) * -1);

    /* The smallest outer margin - should not scale to prevent shrinking horizontal space when user changes browser default font-size  */
    --imutable-outer-margin: 24px;
    /* negative margins with custom properties */
    --negative-imutable-outer-margin: calc(var(--imutable-outer-margin) * -1);

    /*
    * Fluid Typography & space scales:
    *
    * All values below start scale from 480px and scale up to 1400px
    *
    * Since we are using the min-max pixel values in the variable names,
    * it is a good idea to update and do a find replace on the variable names if you change the actual clamp values.
    * Might seem counter intuitive, but it is a good idea to keep the variable names in sync with the values.
    *
    * I found these variable names more intuitive than '--fluid-text-S' etc.
    */

    /* Typography scales Screen width: 480-1600px */
    --fluid-text-18-20: clamp(1.125rem, 1.071rem + 0.18vw, 1.25rem);
    --fluid-text-20-24: clamp(1.25rem, 1.143rem + 0.36vw, 1.5rem);

    /* Fluid margin/padding scales Screen width: 480-1600px */
    --fluid-space-16-24: clamp(1rem, 0.739rem + 0.87vw, 1.5rem);

    --fluid-space-40-72: clamp(2.5rem, 1.643rem + 2.86vw, 4.5rem);

    --fluid-space-24-32: clamp(1.5rem, 1.239rem + 0.87vw, 2rem);
    --fluid-space-32-64: clamp(2rem, 0.957rem + 3.48vw, 4rem);
    --fluid-space-32-96: clamp(2rem, -1.13rem + 10.43vw, 8rem);
    --fluid-space-64-128: clamp(4rem, 1.913rem + 6.96vw, 8rem);

    --body-font:  "GT Super Text", serif;
    --header-font: "Brown", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;

    --button-text-color: black;
    --button-text-transform: uppercase;
    --button-font-size: revert;

    --app-item-height: 9.5rem;
    --app-item-padding: 1.5rem;
    --app-item-radius: 0;

    --nav-menu-height: 7rem;
}