:root {
    /* Brand colours */
    --qu-blue: #002452;
    --qu-gold: #FABD0F;
    --qu-red: #B90E31;
    --white: #fff;
    --lightest-grey: #F1F2F2;
    --light-grey: #E6E7E8;
    --grey: #D1D3D4;
    --medium-grey: #A7A9AC;
    --dark-grey: #808285;
    --darkest-grey: #58595B;
    --light-limestone: #B3AEA8;
    --limestone: #908982;
    --dark-limestone: #6A625C;
    --off-black: #212121;
}

:root {
    /* Open Props extensions */ 
    --size-content-4: 80ch;
    
    /* Shoelace overrides */ 
    /* primary = qu-blue */ 
    --sl-color-primary-50: rgb(249 249 251);
    --sl-color-primary-100: rgb(233 237 240);
    --sl-color-primary-200: rgb(217 223 229);
    --sl-color-primary-300: rgb(199 207 217);
    --sl-color-primary-400: rgb(176 187 201);
    --sl-color-primary-500: rgb(146 161 181);
    --sl-color-primary-600: rgb(114 134 159);
    --sl-color-primary-700: rgb(86 110 140);
    --sl-color-primary-800: rgb(64 91 125);
    --sl-color-primary-900: rgb(33 64 104);
    --sl-color-primary-950: rgb(2 38 83);
    /* secondary = qu-gold */
    --sl-color-secondary-50: rgb(255 249 234);
    --sl-color-secondary-100: rgb(254 235 183);
    --sl-color-secondary-200: rgb(252 219 125);
    --sl-color-secondary-300: rgb(251 200 55);
    --sl-color-secondary-400: rgb(234 177 14);
    --sl-color-secondary-500: rgb(201 152 12);
    --sl-color-secondary-600: rgb(166 126 10);
    --sl-color-secondary-700: rgb(136 103 8);
    --sl-color-secondary-800: rgb(113 85 7);
    --sl-color-secondary-900: rgb(80 60 5);
    --sl-color-secondary-950: rgb(49 37 3);
    /* danger = qu-red */
    --sl-color-danger-50: rgb(253 248 249);
    --sl-color-danger-100: rgb(248 232 236);
    --sl-color-danger-200: rgb(243 215 221);
    --sl-color-danger-300: rgb(238 196 205);
    --sl-color-danger-400: rgb(230 170 182);
    --sl-color-danger-500: rgb(220 135 153);
    --sl-color-danger-600: rgb(209 95 118);
    --sl-color-danger-700: rgb(196 53 83);
    --sl-color-danger-800: rgb(178 13 47);
    --sl-color-danger-900: rgb(129 10 34);
    --sl-color-danger-950: rgb(82 6 22);
    /* equivalent to link-primary */
    --sl-color-sky-50: rgb(247 250 253);
    --sl-color-sky-100: rgb(229 237 248);
    --sl-color-sky-200: rgb(209 223 243);
    --sl-color-sky-300: rgb(187 208 238);
    --sl-color-sky-400: rgb(157 188 230);
    --sl-color-sky-500: rgb(119 162 220);
    --sl-color-sky-600: rgb(76 133 210);
    --sl-color-sky-700: rgb(37 107 200);
    --sl-color-sky-800: rgb(2 83 191);
    --sl-color-sky-900: rgb(1 60 137);
    --sl-color-sky-950: rgb(1 37 85);
    /* custom */
    --sl-color-neutral-50: rgb(250 249 249);
    --sl-color-neutral-100: rgb(237 236 235);
    --sl-color-neutral-200: rgb(223 222 220);
    --sl-color-neutral-300: rgb(209 206 204);
    --sl-color-neutral-400: rgb(189 185 183);
    --sl-color-neutral-500: rgb(164 159 155);
    --sl-color-neutral-600: rgb(137 131 126);
    --sl-color-neutral-700: rgb(114 107 101);
    --sl-color-neutral-800: rgb(95 88 82);
    --sl-color-neutral-900: rgb(67 62 59);
    --sl-color-neutral-950: rgb(41 38 36);
}

:where(html) {
    --gradient-hp-main: radial-gradient(circle at top left, var(--qu-blue) 15vw, transparent 60vw);
    --gradient-banner: linear-gradient(to right, rgba(0, 36, 82, 1) 0%, rgba(0, 36, 82, 0.9) 10vw, 
    rgba(0, 36, 82, 0.7) 20vw, rgba(0, 36, 82, 0.5) 30vw, rgba(0, 36, 82, 0.3) 40vw, rgba(0, 36, 82, 0) 50vw, rgba(0, 36, 82, 0) 100vw);
    --gradient-banner-title: linear-gradient(90deg, rgba(0,36,82,0.9) 0%, rgba(0,36,82,0.7) 40%, rgba(0,36,82,0.5) 70%, rgba(0,36,82,0) 100%);
    linear-gradient(to bottom, transparent 65%, #00245222 75%, #00245244 80%, #00245277 85%, #002452aa 90%, var(--qu-blue, #002452) 100%);
    --gradient-bottom: linear-gradient(to bottom, transparent 65%, #00245222 75%, #00245244 80%, #00245277 85%, #002452aa 90%, var(--qu-blue, #002452) 100%);
    --gradient-footer: linear-gradient(270deg, #022253 0%, #022253E5 0%, #02225380 8%, #02225300 29%, #02225399 66%, #0222534D 88%, #022253 100%);
}