:root {
    /* Brand */
    --jellycat-color-brand-primary: #33cee5;
    --jellycat-color-brand-primary-hover: #66daeb;
    --jellycat-color-text: #2c2a29;

    --jellycat-color-white: #ffffff;
    --jellycat-color-grey-1: #545352;
    --jellycat-color-grey-2: #707070;
    --jellycat-color-grey-3: #a5a4a3;
    --jellycat-color-grey-4: #c6c6c6;
    --jellycat-color-grey-5: #ededed;
    --jellycat-color-grey-6: #f7f7f7;

    /* State */
    --jellycat-color-failure: #ee0505;
    --jellycat-color-loading: #f7f7f7;

    /* Spacing */
    --jellycat-spacing-micro: 10px;
    --jellycat-spacing-small: 15px;
    --jellycat-spacing-base: 20px;
    --jellycat-spacing-medium: 30px;
    --jellycat-spacing-large: 50px;
    --jellycat-spacing-xlarge: 70px;
    --jellycat-spacing-xxlarge: 100px;

    /* Typography */
    --jellycat-font-line-height: 1.5;
    --jellycat-font-family: 'Plus Jakarta Sans';
    --jellycat-font-weight-regular: 300;
    --jellycat-font-weight-bold: 600;

    --jellycat-font-size-10: 10px;
    --jellycat-font-size-20: 12px;
    --jellycat-font-size-30: 14px;
    --jellycat-font-size-40: 16px;
    --jellycat-font-size-50: 18px;
    --jellycat-font-size-60: 20px;
    --jellycat-font-size-70: 22px;
    --jellycat-font-size-140: 36px;
    --jellycat-font-size-280: 72px;

    /* Screen Sizes */
    --jellycat-screen-small: 450px;
    --jellycat-screen-medium: 750px;
    --jellycat-screen-large: 1050px;
    --jellycat-screen-x-large: 1200px;

    /* UI */
    --jellycat-ui-border-color: #e2e2e2;
    --jellycat-ui-input-height: 49px;
}