:root {
    --small-box-padding: 12px;
    --medium-box-padding: 20px;
    --large-box-padding: 32px;
    /* colours */
    --color-primary-100: #D0EDFC;
    --color-primary-200: #A3D8FA;
    --color-primary-300: #74BAF2;
    --color-primary-400: #509CE6;
    --color-primary-500: #1C72D6;
    --color-primary-600: #1458B8;
    --color-primary-700: #0E419A;
    --color-primary-800: #082E7C;
    --color-primary-900: #052066;
    --color-success-100: #F1FBCC;
    --color-success-200: #E1F79C;
    --color-success-300: #C4E867;
    --color-success-400: #A4D240;
    --color-success-500: #7AB50E;
    --color-success-600: #639B0A;
    --color-success-700: #4D8207;
    --color-success-800: #3A6804;
    --color-success-900: #2C5602;
    --color-info-100: #CDF5FF;
    --color-info-200: #9BE6FF;
    --color-info-300: #69D1FF;
    --color-info-400: #43BAFF;
    --color-info-500: #0596FF;
    --color-info-600: #0374DB;
    --color-info-700: #0256B7;
    --color-info-800: #013D93;
    --color-info-900: #002B7A;
    --color-warning-100: #FEF2CC;
    --color-warning-200: #FEE199;
    --color-warning-300: #FDCB66;
    --color-warning-400: #FBB540;
    --color-warning-500: #F99202;
    --color-warning-600: #D67401;
    --color-warning-700: #B35901;
    --color-warning-800: #904200;
    --color-warning-900: #773100;
    --color-danger-50: #fdefe7;
    --color-danger-100: #FFE4D4;
    --color-danger-200: #FFC3AA;
    --color-danger-300: #FF9B7F;
    --color-danger-400: #FF7460;
    --color-danger-500: #FF352B;
    --color-danger-600: #DB1F26;
    --color-danger-700: #B71529;
    --color-danger-800: #930D29;
    --color-danger-900: #7A0829;
    --color-grey-100: #f2f2f2;
    --color-grey-200: #e5e5e5;
    --color-grey-300: #d8d8d8;
    --color-grey-400: #cbcbcb;
    --color-grey-500: #bfbfbf;
    --color-grey-600: #b2b2b2;
}