:root, :host {
    --main-color: #133357;
    --main-color-h: 212;
    --main-color-s: 64%;
    --main-color-l: 21%;
    --main-color-600: hsl(var(--main-color-h), var(--main-color-s), calc(var(--main-color-l) - 5%));
    --main-color-700: hsl(var(--main-color-h), var(--main-color-s), calc(var(--main-color-l) - 10%));

    --secondary-color: #097BBC;
    --secondary-color-h: 202;
    --secondary-color-s: 91%;
    --secondary-color-l: 39%;
    --secondary-color-600: hsl(var(--secondary-color-h), var(--secondary-color-s), calc(var(--secondary-color-l) - 5%));
    --secondary-color-700: hsl(var(--secondary-color-h), var(--secondary-color-s), calc(var(--secondary-color-l) - 10%));
    --secondary-color-fade-10: hsl(var(--secondary-color-h), var(--secondary-color-s), var(--secondary-color-l), 10%);

    --accent-color: #11A3AC;
    --accent-color-h: 183;
    --accent-color-s: 82%;
    --accent-color-l: 37%;
    --accent-color-600: hsl(var(--accent-color-h), var(--accent-color-s), calc(var(--accent-color-l) - 5%));
    --accent-color-700: hsl(var(--accent-color-h), var(--accent-color-s), calc(var(--accent-color-l) - 10%));

    --button-color: #097BBC;
    --button-color-h: 202;
    --button-color-s: 91%;
    --button-color-l: 39%;
    --button-color-600: hsl(var(--button-color-h), var(--button-color-s), calc(var(--button-color-l) - 5%));
    --button-color-700: hsl(var(--button-color-h), var(--button-color-s), calc(var(--button-color-l) - 10%));

    --neutral-lightest-color: #F9F9F9;
    --neutral-lighter-color: #F2F3F4;
    --neutral-light-color: #B2B8BF;
    --neutral-medium-color: #66717F;
    --neutral-dark-color: #4C5A6A;
    --neutral-darker-color: #00132A;
    --neutral-color: #000000;

    --success-color: #218739;
    --success-color-h: 134;
    --success-color-s: 61%;
    --success-color-l: 33%;
    --success-color-600: hsl(var(--success-color-h), var(--success-color-s), calc(var(--success-color-l) - 5%));
    --success-color-700: hsl(var(--success-color-h), var(--success-color-s), calc(var(--success-color-l) - 10%));

    --info-color: #128091;
    --info-color-h: 188;
    --info-color-s: 78%;
    --info-color-l: 32%;
    --info-color-600: hsl(var(--info-color-h), var(--info-color-s), calc(var(--info-color-l) - 5%));
    --info-color-700: hsl(var(--info-color-h), var(--info-color-s), calc(var(--info-color-l) - 10%));

    --warning-color: #FFC108;
    --warning-color-h: 45;
    --warning-color-s: 100%;
    --warning-color-l: 52%;
    --warning-color-600: hsl(var(--warning-color-h), var(--warning-color-s), calc(var(--warning-color-l) - 5%));
    --warning-color-700: hsl(var(--warning-color-h), var(--warning-color-s), calc(var(--warning-color-l) - 10%));

    --danger-color: #B10E1E;
    --danger-color-h: 354;
    --danger-color-s: 85%;
    --danger-color-l: 37%;
    --danger-color-600: hsl(var(--danger-color-h), var(--danger-color-s), calc(var(--danger-color-l) - 5%));
    --danger-color-700: hsl(var(--danger-color-h), var(--danger-color-s), calc(var(--danger-color-l) - 10%));

    /* Buttons */
    --btn-border-radius: var(--border-radius-base);
    --btn-border-width: var(--border-width-base);
    --btn-font-weight: var(--font-weight-semi-bold);

    --btn-primary-color: var(--type-reverse-color);
    --btn-primary-color-hover: var(--type-reverse-color);
    --btn-primary-color-bg: var(--button-color);
    --btn-primary-color-bg-hover: var(--button-color-600);
    --btn-primary-color-bg-focus: var(--button-color-600);
    --btn-primary-color-border-color: var(--button-color);
    --btn-primary-color-border-hover: var(--button-color-600);
    --btn-primary-color-border-focus: var(--button-color-700);

    --btn-secondary-color: var(--type-reverse-color);
    --btn-secondary-color-hover: var(--type-reverse-color);
    --btn-secondary-color-bg: var(--secondary-color);
    --btn-secondary-color-bg-hover: var(--secondary-color-600);
    --btn-secondary-color-border-color: var(--secondary-color);
    --btn-secondary-color-border-hover: var(--secondary-color-600);
    --btn-secondary-color-border-focus: var(--secondary-color-700);

    --btn-success-color: var(--type-reverse-color);
    --btn-success-color-hover: var(--type-reverse-color);
    --btn-success-color-bg: var(--success-color);
    --btn-success-color-bg-hover: var(--success-color-600);
    --btn-success-color-border-color: var(--success-color);
    --btn-success-color-border-hover: var(--success-color-600);
    --btn-success-color-border-focus: var(--success-color-700);

    --btn-info-color: var(--type-reverse-color);
    --btn-info-color-hover: var(--type-reverse-color);
    --btn-info-color-bg: var(--info-color);
    --btn-info-color-bg-hover: var(--info-color-600);
    --btn-info-color-border-color: var(--info-color);
    --btn-info-color-border-hover: var(--info-color-600);
    --btn-info-color-border-focus: var(--info-color-700);

    --btn-warning-color: var(--type-reverse-color);
    --btn-warning-color-hover: var(--type-reverse-color);
    --btn-warning-color-bg: var(--warning-color);
    --btn-warning-color-bg-hover: var(--warning-color-600);
    --btn-warning-color-border-color: var(--warning-color);
    --btn-warning-color-border-hover: var(--warning-color-600);
    --btn-warning-color-border-focus: var(--warning-color-700);

    --btn-danger-color: var(--type-reverse-color);
    --btn-danger-color-hover: var(--type-reverse-color);
    --btn-danger-color-bg: var(--danger-color);
    --btn-danger-color-bg-hover: var(--danger-color-600);
    --btn-danger-color-border-color: var(--danger-color);
    --btn-danger-color-border-hover: var(--danger-color-600);
    --btn-danger-color-border-focus: var(--danger-color-700);

    --blue: #006893;
    --blue-100: rgba(0,104,147,0.1);

    /* Type and link colours */
    --type-color: #0C153A;
    --type-muted-color: var(--neutral-medium-color);
    --type-reverse-color: #ffffff;

    --link-color: #097BBC;
    --link-color-h: 202;
    --link-color-s: 91%;
    --link-color-l: 39%;
    --link-hover-color: hsl(var(--link-color-h), var(--link-color-s), calc(var(--link-color-l) - 20%));
    --link-color-visited: var(--link-color);
    --link-font-family: var(--bold-font-family);
    --link-font-weight: var(--bold-font-weight);
    --link-decoration: none;
    --link-hover-decoration: underline;
    --link-hover-bg: transparent;

    --link-color-rev: var(--type-color);
    --link-color-rev-hover: var(--link-color);
    --link-color-main: var(--main-color);
    --link-color-main-hover: var(--main-color-700);
    --link-color-secondary: var(--secondary-color);
    --link-color-secondary-hover: var(--secondary-color-700);

    /* Headings and Fonts */
    --heading-color: #133357;
    --font-body-base-size: 16px;
    --font-body-base-sm-size: var(--font-body-base-size);
    --font-body-base-md-size: var(--font-body-base-size);

    --font-weight-normal:400;
    --font-weight-semi-bold:600;
    --font-weight-bold:700;

    --body-font-family: "proxima-nova","Helvetica","Arial",sans-serif;
    --body-font-weight: var(--font-weight-normal);

    --bold-font-family: var(--body-font-family);
    --bold-font-weight: var(--font-weight-bold);

    --heading-font-family: "proxima-nova","Helvetica","Arial",sans-serif;
    --heading-font-weight: var(--font-weight-bold);
    --heading-font-weight-bold: var(--font-weight-bold);
    --heading-font-style: normal;
    --heading-text-transform: none;

    --h1-type-font-family: var(--heading-font-family);
    --h1-type-font-weight: var(--heading-font-weight);
    --h1-type-color: var(--heading-color);
    --h1-font-style: var(--heading-font-style);
    --h1-text-transform: var(--heading-text-transform);

    --h2-type-font-family: var(--heading-font-family);
    --h2-type-font-weight: var(--heading-font-weight);
    --h2-type-color: var(--heading-color);
    --h2-font-style: var(--heading-font-style);
    --h2-text-transform: var(--heading-text-transform);

    --h3-type-font-family: var(--heading-font-family);
    --h3-type-font-weight: var(--heading-font-weight);
    --h3-type-color: var(--heading-color);
    --h3-font-style: var(--heading-font-style);
    --h3-text-transform: var(--heading-text-transform);

    --h4-type-font-family: var(--heading-font-family);
    --h4-type-font-weight: var(--heading-font-weight);
    --h4-type-color:var(--heading-color);
    --h4-font-style: var(--heading-font-style);
    --h4-text-transform: var(--heading-text-transform);

    --h5-type-font-family: var(--heading-font-family);
    --h5-type-font-weight: var(--heading-font-weight);
    --h5-type-color:var(--heading-color);
    --h5-font-style: var(--heading-font-style);
    --h5-text-transform: var(--heading-text-transform);

    --form-section-title-color: #3D4958;

    /* Border radius */
    --border-radius-base: 4px;
    --border-radius-lg: calc(var(--border-radius-base) * 2);
    --border-radius-sm: calc(var(--border-radius-base) / 2);
    --border-radius-xs: calc(var(--border-radius-base) / 3);

    /* Borders */
    --border-width-base: 2px;
    --border-width-lg: calc(var(--border-width-base) * 2);
    --border-width-sm: calc(var(--border-width-base) / 2);
    --border-width-xs: calc(var(--border-width-base) / 3);

    /* Navigation */
    --nav-logo-height-mobile: 4rem;
    --nav-logo-height-tablet: 5rem;
    --nav-logo-height-desktop: 6rem;
    --nav-font-family: var(--heading-font-family);
    --nav-font-weight: var(--heading-font-weight);
    --nav-color: var(--type-color);
    --nav-color-bg: var(--type-reverse-color);
    --nav-underline-color: var(--accent-color);
    --nav-search-icon: var(--main-color);
    --nav-search-icon-hover: var(--nav-search-icon);
    --nav-login-btn-bg-color: var(--btn-primary-color-bg);
    --nav-login-btn-border-color: var(--btn-primary-color-border-color);
    --nav-login-btn-color: var(--btn-primary-color);
    --nav-login-btn-arrow-color: var(--nav-login-btn-color);
    --nav-login-btn-bg-hover-color: var(--btn-primary-color-bg-hover);
    --nav-login-btn-border-hover-color: var(--btn-primary-color-border-hover);
    --nav-login-btn-hover-color: var(--btn-primary-color-hover);
    --nav-login-btn-arrow-hover-color: var(--nav-login-btn-hover-color);
    --nav-split-color: var(--type-reverse-color);
    --nav-split-color-bg: var(--main-color);
    --nav-split-color-bg-hover: var(--main-color-600);
    --nav-split-color-bg-text-hover: var(--nav-split-color);
    --nav-split-underline-color: var(--type-reverse-color);
    --nav-split-btn-bg-color: transparent;
    --nav-split-btn-bg-hover-color: var(--nav-split-color-bg-hover);
    --nav-split-btn-color: var(--nav-split-color);
    --nav-split-btn-hover-color:  var(--nav-split-color-bg-text-hover);
    --nav-split-btn-border-color: var(--nav-split-color);
    --nav-split-btn-border-hover-color: var(--nav-split-btn-border-color);
    --nav-split-btn-border-radius: var(--btn-border-radius);
    --nav-split-login-btn-border-color: transparent;
    --nav-split-search-btn-color:var(--btn-primary-color-bg);
    --nav-split-search-btn-icon-color: var(--btn-primary-color);
    --nav-split-search-btn-hover-color: var(--btn-primary-color-bg-hover);
    --nav-compact-login-btn-bg-color: var(--main-color);
    --nav-compact-login-btn-border-color: var(--nav-compact-login-btn-bg-color);
    --nav-compact-login-btn-color: var(--type-reverse-color);
    --nav-compact-login-btn-arrow-color: var(--nav-compact-login-btn-color);
    --nav-compact-login-btn-bg-hover-color: var(--main-color-600);
    --nav-compact-login-btn-border-hover-color: var(--main-color-700);
    --nav-compact-login-btn-hover-color: var(--nav-compact-login-btn-color);
    --nav-compact-login-btn-arrow-hover-color: var(--nav-compact-login-btn-hover-color);
    --nav-compact-search-btn-color: var(--btn-primary-color-bg);
    --nav-compact-search-btn-hover-color: var(--btn-primary-color-bg-hover);
    --nav-compact-search-btn-icon: var(--btn-primary-color);
    --nav-separate-login-btn-bg-color: var(--main-color);
    --nav-separate-login-btn-border-color: var(--nav-separate-login-btn-bg-color);
    --nav-separate-login-btn-color: var(--type-reverse-color);
    --nav-separate-login-btn-arrow-color: var(--nav-separate-login-btn-color);
    --nav-separate-login-btn-bg-hover-color: var(--main-color-600);
    --nav-separate-login-btn-border-hover-color: var(--main-color-700);
    --nav-separate-login-btn-hover-color: var(--nav-separate-login-btn-color);
    --nav-separate-login-btn-arrow-hover-color: var(--nav-separate-login-btn-hover-color);
    --nav-separate-join-btn-bg-color: transparent;
    --nav-separate-join-btn-color: var(--nav-separate-login-btn-bg-color);
    --nav-separate-join-btn-border-color: var(--nav-separate-login-btn-border-color);
    --nav-separate-join-btn-bg-hover-color: var(--nav-separate-login-btn-bg-hover-color);
    --nav-separate-join-btn-hover-color: var(--nav-separate-login-btn-color);
    --nav-separate-join-btn-border-hover-color:var(--nav-separate-login-btn-border-hover-color);
    --nav-separate-search-btn-color: var(--btn-primary-color-bg);
    --nav-separate-search-btn-hover-color: var(--btn-primary-color-bg-hover);
    --nav-separate-search-btn-hover-border-color: var(--btn-primary-color-border-hover);
    --nav-separate-search-btn-icon: var(--btn-primary-color);
    --nav-toggle-color: var(--secondary-color);
    --nav-toggle-bar-color: var(--type-reverse-color);
    --nav-mobile-bg-color: var(--nav-toggle-color);
    --nav-mobile-color: var(--nav-toggle-bar-color);
    --nav-search-overlay-color: hsl(var(--main-color-h), var(--main-color-s), var(--main-color-l), 90%);
    --nav-search-overlay-btn-color: var(--secondary-color);
    --nav-search-overlay-btn-hover-color: var(--secondary-color-600);
    --nav-search-overlay-btn-icon-color: var(--btn-secondary-color);

    /* Image banner */
    --image-banner-color-bg: var(--main-color);
    --image-banner-color: var(--type-reverse-color);
    --image-banner-color-desc: var(--image-banner-color);
    --image-banner-heading-font-weight: var(--heading-font-weight);
    --image-banner-desc-font-weight: var(--body-font-weight);
    --image-banner-centrebox-color: var(--heading-color);
    --image-banner-height-thin: 200px;
    --image-banner-height-medium: 400px;
    --image-banner-height-large: 500px;

    /* Cards */
    --card-border-width: 1px;
    --card-border-radius: var(--border-radius-base);
    --card-border-color: var(--neutral-light-color);
    --card-color-bg: var(--type-reverse-color);
    --card-box-shadow: none;
    --card-heading-font-weight: var(--heading-font-weight);
    --card-desc-font-weight: var(--body-font-weight);
    --card-color-overlay: hsl(var(--accent-color-h), var(--accent-color-s), var(--accent-color-l), 80%);
    --card-color-overlay-font-color: var(--type-reverse-color);
    --card-color-overlay-font-weight: var(--heading-font-weight);
    --card-color-overlay-font-family: var(--heading-font-family);
    --card-footer-link-color: var(--link-color);
    --card-4-color-date-bg: hsl(var(--secondary-color-h), var(--secondary-color-s), var(--secondary-color-l), 70%);

    /* Feature Grid */
    --feature-grid-cta-link-color: var(--link-color);
    --feature-grid-cta-link-hover-color: var(--link-hover-color);
    --feature-grid-cta-link-color-visited: var(--feature-grid-cta-link-color);
    --feature-grid-cta-link-hover-color-visited: var(--feature-grid-cta-link-hover-color);
    --feature-grid-cta-link-font-family: var(--link-font-family);
    --feature-grid-cta-link-font-weight: var(--font-weight-semi-bold);
    --feature-grid-cta-link-decoration: none;
    --feature-grid-cta-link-hover-decoration: var(--link-hover-decoration);

    /* Project Filters */
    --filter-color-bg: var(--main-color);
    --filter-grey-bg: var(--neutral-lighter-color);

    /* Timeline */
    --timeline-incomplete-color: var(--neutral-light-color);
    --timeline-incomplete-color-bg: var(--type-reverse-color);
    --timeline-active-color: var(--type-reverse-color);
    --timeline-active-color-bg: var(--secondary-color);
    --timeline-complete-color: var(--type-reverse-color);
    --timeline-complete-color-bg: var(--accent-color);

    /* Tabs */
    --tabs-color: var(--type-muted-color);
    --tabs-color-bg: var(--main-color);
    --tabs-color-bg-active: var(--type-reverse-color);
    --tabs-color-bg-focus: var(--main-color-600);
    --tabs-color-bg-faded: var(--secondary-color-fade-10);
    --tabs-border-color: var(--secondary-color);
    --tabs-font-size: var(--font-body-base-size);
    --tabs-font-weight: var(--font-weight-bold);

    --tabs-underline-color: var(--type-color);

    --tabs-coloured: hsla(360, 100%, 100%, 80%);
    --tabs-coloured-bg: var(--main-color);
    --tabs-coloured-hover: var(--type-reverse-color);
    --tabs-coloured-bg-hover: var(--main-color-600);
    --tabs-coloured-focus: var(--type-reverse-color);
    --tabs-coloured-bg-focus: var(--main-color-600);
    --tabs-coloured-active: var(--type-reverse-color);
    --tabs-coloured-bg-active: var(--main-color-600);
    --tabs-coloured-border: var(--secondary-color);
    --tabs-coloured-border-active: var(--accent-color);

    /* Block quote */
    --block-quote-color: var(--secondary-color);
    --block-quote-color-bg: var(--secondary-color);
    --block-quote-color-bg-faded: var(--secondary-color-fade-10);
    --block-quote-greyscale-color: var(--type-color);
    --block-quote-greyscale-color-bg: var(--type-color);

    /* CTA */
    --cta-color-bg: var(--secondary-color);
    --cta-border-radius: 0;

    /* Gather */
    --gather-color: var(--type-reverse-color);
    --gather-color-bg: var(--main-color);

    /* Faces*/
    --faces-name-color: var(--secondary-color);
    --faces-position-color: var(--type-color);

    /* Footer */
    --footer-color: var(--main-color);
    --footer-text-color: var(--type-reverse-color);
    --footer-cta-color: var(--secondary-color);
    --footer-cta-text-color: var(--type-reverse-color);
    --footer-acknowledgement-color: var(--secondary-color);
    --footer-acknowledgement-text-color: var(--type-reverse-color);
    --footer-bottom-color: var(--main-color-600);
    --footer-bottom-link-hover-color: var(--type-reverse-color);
    --footer-social-links-align: unset;

    --polaroid-color: hsl(var(--accent-color-h), var(--accent-color-s), 95%);
    --post-it-note-color: #FFF2C4;
    --form-rank-well-focus: hsl(var(--accent-color-h), 50%, 97%);
    --form-controls: var(--neutral-light-color);
    --input-focus-color: var(--accent-color);
    --form-input-border-color: #CCCCCC;

    /* Policyscape */
    --policyscape-bg-color: var(--main-color);
    --policyscape-footer-bg-color: var(--main-color);
    --policyscape-report-liner-color: var(--accent-color);

    /* Login page */
    --login-bg-gradient-color-1: var(--secondary-color);
    --login-bg-gradient-color-2: var(--secondary-color-700);
    --login-bg-gradient:
        linear-gradient(170deg, var(--login-bg-gradient-color-1) 30%, transparent 30%),
        linear-gradient(170deg, transparent 75%, var(--login-bg-gradient-color-1) 75%),
        linear-gradient(330deg, var(--login-bg-gradient-color-2) 0%, transparent 40%),
        linear-gradient(330deg, transparent 60%, var(--login-bg-gradient-color-2) 100%);
    --login-bg-image: var(--login-bg-gradient);
    --login-bg-color: var(--secondary-color);
    --login-bg-size: cover;
    --login-bg-repeat: no-repeat;
    --login-bg-position-x: center;
    --login-bg-position-y: center;
    --login-bg-attachment: fixed;
}