:root {
    /* Breakpoints */
    --bp-xsm: 480px;
    --bp-sm: 576px;
    --bp-md: 768px;
    --bp-lg: 992px;
    --bp-xl: 1200px;
    --bp-xxl: 1440px;

    /* Spacing */
    --container-spacing: 20px;
    --section-spacing: 20px;

    /* Colours */
    --colour-white: #fff;
    --colour-alabaster: #fafafa;
    --colour-concrete: #F2F2F2;
    --colour-alto: #E0E0E0;
    --colour-black: #000;
    --colour-cornflower: #9FD4EC;
    --colour-endeavour: #0055A4;
    --colour-celadon: #B2E4AC;
    --colour-fruit-salad: #51B252;
    --colour-apple: #62B445;
    --colour-silver: #c6c6c6;
    --colour-blue-bayoux: #515F73;
    --colour-dove-gray: #707070;
    --colour-oslo-grey: #969799;
    --colour-wild-blue-yonder: #7E84BB;
    --colour-tradewind: #67A8BA;


    /* Font Sizes */
    /* https://nekocalc.com/px-to-rem-converter */
    --body-regular: 1rem;

    --font-10px: 0.625rem;
    --font-11px: 0.688rem;
    --font-12px: 0.75rem;
    --font-13px: 0.813rem;
    --font-14px: 0.875rem;
    --font-15px: 0.9375rem;
    --font-16px: 1rem;
    --font-17px: 1.0625rem;
    --font-18px: 1.125rem;
    --font-19px: 1.1875rem;
    --font-20px: 1.25rem;
    --font-21px: 1.3125rem;
    --font-22px: 1.375rem;
    --font-23px: 1.438rem;
    --font-24px: 1.5rem;
    --font-25px: 1.563rem;
    --font-26px: 1.625rem;
    --font-27px: 1.688rem;
    --font-28px: 1.75rem;
    --font-29px: 1.813rem;
    --font-30px: 1.875rem;
    --font-31px: 1.938rem;
    --font-32px: 2rem;
    --font-33px: 2.063rem;
    --font-34px: 2.125rem;
    --font-35px: 2.188rem;
    --font-36px: 2.25rem;
    --font-37px: 2.313rem;
    --font-38px: 2.375rem;
    --font-39px: 2.438rem;
    --font-40px: 2.5rem;
    --font-41px: 2.563rem;
    --font-42px: 2.625rem;
    --font-43px: 2.688rem;
    --font-44px: 2.75rem;
    --font-45px: 2.813rem;
    --font-46px: 2.875rem;
    --font-47px: 2.938rem;
    --font-48px: 3rem;
    --font-49px: 3.063rem;
    --font-50px: 3.125rem;
    --font-55px: 3.438rem;
    --font-60px: 3.75rem;
    --font-64px: 4rem;
    --font-72px: 4.5rem;
    --font-80px: 5rem;
    --font-96px: 6rem;
    --font-100px: 6.26rem;
}

@media (min-width: 992px) {
    :root {
        --container-spacing: 45px;
        --large-spacing: 100px;
    }
}