@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    /*Colours*/
    --primary-colour: #3f235e;
    --primary-light-colour: #7b5da0;
    --secondary-colour: #FAD978;
    --white-colour: #FFFFFF;
    --error-colour: #DA1E28;
    --warning-colour: #F0C11A;
    --success-colour: #24A149;
    --overlay-colour: #121619;
    --coolgrey10-colour: #EBE8E8;
    --coolgrey20-colour: #DDE1E6;
    --coolgrey30-colour: #C1C7CD;
    --coolgrey40-colour: #A2A9B0;
    --coolgrey50-colour: #878D96;
    --coolgrey60-colour: #697077;
    --coolgrey70-colour: #4D5358;
    --coolgrey80-colour: #343A3F;
    --coolgrey90-colour: #21272A;
    --coolgrey100-colour: #121619;
    --active-nav-colour: #ECE7F1;
    /*Fonts*/
    --body-font: "Roboto", sans-serif;
    --head-font: "Lora", serif;
    /*Base text sizes*/
    --base-font-size: 1.0rem;
    --base-line-height: 100%;
    --base-letter-spacing: 1px;
    /*Base font weights*/
    --font-light: 300;
    --font-regular: 400;
    --font-medium: 500;
    --font-bold: 700;
    /*class variables*/
    --subtitle-height: calc(var(--base-line-height) * 1.1);
    --body-height: calc(var(--base-line-height) * 1.4);
    --zero-spacing: calc(var(--base-letter-spacing) * 0);
    /*Box Properties*/
    --base-marg: 2px;
    --base-pad: 8px;
    --base-border: 1px;
    /*Display properties*/
    --base-gap: 8px;
    /*Scales*/
    --first-token-scale: 1;
    --second-token-scale: 2;
    --third-token-scale: 3;
    --fourth-token-scale: 4;
    --fifth-token-scale: 5;
    /*Container variables*/
    --page-width: 100%;
    --page-width-max: 100%;
    --site-header-height: 4.0rem;
    --site-header-vertical-padding: 1.0rem;
    --site-footer-height: 6.0rem;
    /*Device widths*/
    --mobile-small: 320px;
    --mobile-med: 375px;
    --mobile-lrg: 425px;
    --tablet: 768px;
    --laptop: 1024px;
    --laptop-lrg: 1440px;
    /*Fluid Typography (min: 360px; max:1280px;)*/
    --step--3: clamp(0.576rem, 0.7518rem + -0.2197vw, 0.7023rem);
    --step--2: clamp(0.72rem, 0.8176rem + -0.122vw, 0.7901rem);
    --step--1: clamp(0.8889rem, 0.8845rem + 0.0193vw, 0.9rem);
    --step-0: clamp(1rem, 0.9511rem + 0.2174vw, 1.125rem);
    --step-1: clamp(1.125rem, 1.0149rem + 0.4891vw, 1.4063rem);
    --step-2: clamp(1.2656rem, 1.073rem + 0.856vw, 1.7578rem);
    --step-3: clamp(1.4238rem, 1.1212rem + 1.3451vw, 2.1973rem);
    --step-4: clamp(1.6018rem, 1.1539rem + 1.9909vw, 2.7466rem);
    --step-5: clamp(1.802rem, 1.1637rem + 2.8369vw, 3.4332rem);
    --step-6: clamp(2.0273rem, 1.1413rem + 3.9378vw, 4.2915rem);
    /*Fluid Spacing (min: 360px; max:1280px; (Named after t-shirt sizes for some reason?))*/
    --space-3xs: clamp(0.25rem, 0.2255rem + 0.1087vw, 0.3125rem);
    --space-2xs: clamp(0.5rem, 0.4755rem + 0.1087vw, 0.5625rem);
    --space-xs: clamp(0.75rem, 0.7011rem + 0.2174vw, 0.875rem);
    --space-s: clamp(1rem, 0.9511rem + 0.2174vw, 1.125rem);
    --space-m: clamp(1.5rem, 1.4266rem + 0.3261vw, 1.6875rem);
    --space-l: clamp(2rem, 1.9022rem + 0.4348vw, 2.25rem);
    --space-xl: clamp(3rem, 2.8533rem + 0.6522vw, 3.375rem);
    --space-2xl: clamp(4rem, 3.8043rem + 0.8696vw, 4.5rem);
    --space-3xl: clamp(6rem, 5.7065rem + 1.3043vw, 6.75rem);
    /*Control properties*/
    --button-radius: 1.0em;
}