:root {
    /* --- colors --- */

    /* brand */
    --brand-blue: #0B6DFF;

    --labour-red: #CC0617;
    --economy-pink: #E5007D;
    --wales-green: #1E661C;
    --climate-green: #3AA935;
    --opportunity-purple: #662381;
    --safe-orange: #F39206;
    --nhs-blue: #1D70B7;

    /* functional */
    --danger-red: #FF0000;
    --form-selects: #0088FF;

    /* mono / greys */
    --white: #FFFFFF;
    --light-grey: #F7F7F7;
    --mid-grey: #D8D8D8;
    --dark-grey: #999999;
    --off-black: #121212;
    --black: #000000;
}




.labour-red {
    color: var(--labour-red);
}
.labour-red_background {
    background-color: var(--labour-red);
}

.economy-pink {
    color: var(--economy-pink);
}
.economy-pink_background {
    background-color: var(--economy-pink);
}

.wales-green {
    color: var(--wales-green);
}
.wales-green_background {
    background-color: var(--wales-green);
}

.climate-green {
    color: var(--climate-green);
}
.climate-green_background {
    background-color: var(--climate-green);
}

.opportunity-purple {
    color: var(--opportunity-purple);
}
.opportunity-purple_background {
    background-color: var(--opportunity-purple);
}

.safe-orange {
    color: var(--safe-orange);
}
.safe-orange_background {
    background-color: var(--safe-orange);
}

.nhs-blue {
    color: var(--nhs-blue);
}
.nhs-blue_background {
    background-color: var(--nhs-blue);
}

/* Functional */
.danger-red {
    color: var(--danger-red);
}
.danger-red_background {
    background-color: var(--danger-red);
}

.form-selects {
    color: var(--form-selects);
}
.form-selects_background {
    background-color: var(--form-selects);
}

/* Monotones */
.white {
    color: var(--white);
}
.white_background {
    background-color: var(--white);
}

.light-grey {
    color: var(--light-grey);
}
.light-grey_background {
    background-color: var(--light-grey);
}

.mid-grey {
    color: var(--mid-grey);
}
.mid-grey_background {
    background-color: var(--mid-grey);
}

.dark-grey {
    color: var(--dark-grey);
}
.dark-grey_background {
    background-color: var(--dark-grey);
}

.off-black {
    color: var(--off-black);
}
.off-black_background {
    background-color: var(--off-black);
}

.black {
    color: var(--black);
}
.black_background {
    background-color: var(--black);
}


/* Color Overrides */
/* --- black_background --- */
.black_background h1,
.black_background h2,
.black_background h3,
.black_background h4,
.black_background h5,
.black_background h6,
.black_background .h1style,
.black_background .h2style,
.black_background .h3style,
.black_background .h4style,
.black_background .h5style,
.black_background .h6style {
    color: var(--white);
}
.black_background p {
    color: var(--white);
}
.black_background p.sub-heading,
.black_background div.sub-heading p {
    color: var(--white);
}
/* Primary Button Colors */
.black_background a.button.primary,
.black_background button.button.primary {
    background-color: var(--labour-red);
    border-color: var(--labour-red);
}
.black_background a.button.primary:hover,
.black_background button.button.primary:hover {
    background-color: var(--white);
    border-color: var(--white);
    color: var(--off-black);
}
/* Secondary Button Colors */
.black_background a.button.secondary,
.black_background button.button.secondary {
    border-color: var(--white);
    color: var(--white);
}
.black_background a.button.secondary:hover,
.black_background button.button.secondary:hover {
    border-color: var(--white);
    background-color: var(--white);
    color: var(--off-black);
}
/* Tertiary Button Colors */
.black_background a.button.tertiary,
.black_background button.button.tertiary {
    color: var(--white);
}
.black_background a.button.tertiary::before,
.black_background button.button.secondary::before {
    background-color: var(--white);
}
.black_background a.button.tertiary::after,
.black_background button.button.secondary::after {
    background-image: url('buttons/assets/tertiary/white_arrow.svg');
}




/* --- off-black_background --- */
.off-black_background h1,
.off-black_background h2,
.off-black_background h3,
.off-black_background h4,
.off-black_background h5,
.off-black_background h6,
.off-black_background .h1style,
.off-black_background .h2style,
.off-black_background .h3style,
.off-black_background .h4style,
.off-black_background .h5style,
.off-black_background .h6style {
    color: var(--white);
}
.off-black_background p {
    color: var(--white);
}
.off-black_background p.sub-heading,
.off-black_background div.sub-heading p {
    color: var(--white);
}
/* Primary Button Colors */
.off-black_background a.button.primary,
.off-black_background button.button.primary {
    background-color: var(--labour-red);
    border-color: var(--labour-red);
}
.off-black_background a.button.primary:hover,
.off-black_background button.button.primary:hover {
    background-color: var(--white);
    border-color: var(--white);
    color: var(--off-black);
}
/* Secondary Button Colors */
.off-black_background a.button.secondary,
.off-black_background button.button.secondary {
    border-color: var(--white);
    color: var(--white);
}
.off-black_background a.button.secondary:hover,
.off-black_background button.button.secondary:hover {
    border-color: var(--white);
    background-color: var(--white);
    color: var(--off-black);
}
/* Tertiary Button Colors */
.off-black_background a.button.tertiary,
.off-black_background button.button.tertiary {
    color: var(--white);
}
.off-black_background a.button.tertiary::before,
.off-black_background button.button.secondary::before {
    background-color: var(--white);
}
.off-black_background a.button.tertiary::after,
.off-black_background button.button.secondary::after {
    background-image: url('buttons/assets/tertiary/white_arrow.svg');
}



/* --- labour-red_background --- */
.labour-red_background h1,
.labour-red_background h2,
.labour-red_background h3,
.labour-red_background h4,
.labour-red_background h5,
.labour-red_background h6,
.labour-red_background .h1style,
.labour-red_background .h2style,
.labour-red_background .h3style,
.labour-red_background .h4style,
.labour-red_background .h5style,
.labour-red_background .h6style {
    color: var(--white);
}
.labour-red_background p {
    color: var(--white);
}
.labour-red_background p.sub-heading,
.labour-red_background div.sub-heading p {
    color: var(--white);
}
/* Primary Button Colors */
.labour-red_background a.button.primary,
.labour-red_background button.button.primary {
    background-color: var(--off-black);
    border-color: var(--off-black);
}
.labour-red_background a.button.primary:hover,
.labour-red_background button.button.primary:hover {
    background-color: var(--white);
    border-color: var(--white);
    color: var(--off-black);
}
/* Secondary Button Colors */
.labour-red_background a.button.secondary,
.labour-red_background button.button.secondary {
    border-color: var(--white);
    color: var(--white);
}
.labour-red_background a.button.secondary:hover,
.labour-red_background button.button.secondary:hover {
    border-color: var(--white);
    background-color: var(--white);
    color: var(--off-black);
}
/* Tertiary Button Colors */
.labour-red_background a.button.tertiary,
.labour-red_background button.button.tertiary {
    color: var(--white);
}
.labour-red_background a.button.tertiary::before,
.labour-red_background button.button.secondary::before {
    background-color: var(--white);
}
.labour-red_background a.button.tertiary::after,
.labour-red_background button.button.secondary::after {
    background-image: url('buttons/assets/tertiary/white_arrow.svg');
}






/* --- economy-pink_background --- */
.economy-pink_background h1,
.economy-pink_background h2,
.economy-pink_background h3,
.economy-pink_background h4,
.economy-pink_background h5,
.economy-pink_background h6,
.economy-pink_background .h1style,
.economy-pink_background .h2style,
.economy-pink_background .h3style,
.economy-pink_background .h4style,
.economy-pink_background .h5style,
.economy-pink_background .h6style {
    color: var(--white);
}
.economy-pink_background p {
    color: var(--white);
}
.economy-pink_background p.sub-heading,
.economy-pink_background div.sub-heading p {
    color: var(--white);
}
/* Primary Button Colors */
.economy-pink_background a.button.primary,
.economy-pink_background button.button.primary {
    background-color: var(--labour-red);
    border-color: var(--labour-red);
}
.economy-pink_background a.button.primary:hover,
.economy-pink_background button.button.primary:hover {
    background-color: var(--white);
    border-color: var(--white);
    color: var(--off-black);
}
/* Secondary Button Colors */
.economy-pink_background a.button.secondary,
.economy-pink_background button.button.secondary {
    border-color: var(--white);
    color: var(--white);
}
.economy-pink_background a.button.secondary:hover,
.economy-pink_background button.button.secondary:hover {
    border-color: var(--white);
    background-color: var(--white);
    color: var(--off-black);
}
/* Tertiary Button Colors */
.economy-pink_background a.button.tertiary,
.economy-pink_background button.button.tertiary {
    color: var(--white);
}
.economy-pink_background a.button.tertiary::before,
.economy-pink_background button.button.secondary::before {
    background-color: var(--white);
}
.economy-pink_background a.button.tertiary::after,
.economy-pink_background button.button.secondary::after {
    background-image: url('buttons/assets/tertiary/white_arrow.svg');
}


/* --- wales-green_background --- */
.wales-green_background h1,
.wales-green_background h2,
.wales-green_background h3,
.wales-green_background h4,
.wales-green_background h5,
.wales-green_background h6,
.wales-green_background .h1style,
.wales-green_background .h2style,
.wales-green_background .h3style,
.wales-green_background .h4style,
.wales-green_background .h5style,
.wales-green_background .h6style {
    color: var(--white);
}
.wales-green_background p {
    color: var(--white);
}
.wales-green_background p.sub-heading,
.wales-green_background div.sub-heading p {
    color: var(--white);
}
/* Primary Button Colors */
.wales-green_background a.button.primary,
.wales-green_background button.button.primary {
    background-color: var(--labour-red);
    border-color: var(--labour-red);
}
.wales-green_background a.button.primary:hover,
.wales-green_background button.button.primary:hover {
    background-color: var(--white);
    border-color: var(--white);
    color: var(--off-black);
}
/* Secondary Button Colors */
.wales-green_background a.button.secondary,
.wales-green_background button.button.secondary {
    border-color: var(--white);
    color: var(--white);
}
.wales-green_background a.button.secondary:hover,
.wales-green_background button.button.secondary:hover {
    border-color: var(--white);
    background-color: var(--white);
    color: var(--off-black);
}
/* Tertiary Button Colors */
.wales-green_background a.button.tertiary,
.wales-green_background button.button.tertiary {
    color: var(--white);
}
.wales-green_background a.button.tertiary::before,
.wales-green_background button.button.secondary::before {
    background-color: var(--white);
}
.wales-green_background a.button.tertiary::after,
.wales-green_background button.button.secondary::after {
    background-image: url('buttons/assets/tertiary/white_arrow.svg');
}

/* --- climate-green_background --- */
.climate-green_background h1,
.climate-green_background h2,
.climate-green_background h3,
.climate-green_background h4,
.climate-green_background h5,
.climate-green_background h6,
.climate-green_background .h1style,
.climate-green_background .h2style,
.climate-green_background .h3style,
.climate-green_background .h4style,
.climate-green_background .h5style,
.climate-green_background .h6style {
    color: var(--white);
}
.climate-green_background p {
    color: var(--white);
}
.climate-green_background p.sub-heading,
.climate-green_background div.sub-heading p {
    color: var(--white);
}
/* Primary Button Colors */
.climate-green_background a.button.primary,
.climate-green_background button.button.primary {
    background-color: var(--labour-red);
    border-color: var(--labour-red);
}
.climate-green_background a.button.primary:hover,
.climate-green_background button.button.primary:hover {
    background-color: var(--white);
    border-color: var(--white);
    color: var(--off-black);
}
/* Secondary Button Colors */
.climate-green_background a.button.secondary,
.climate-green_background button.button.secondary {
    border-color: var(--white);
    color: var(--white);
}
.climate-green_background a.button.secondary:hover,
.climate-green_background button.button.secondary:hover {
    border-color: var(--white);
    background-color: var(--white);
    color: var(--off-black);
}
/* Tertiary Button Colors */
.climate-green_background a.button.tertiary,
.climate-green_background button.button.tertiary {
    color: var(--white);
}
.climate-green_background a.button.tertiary::before,
.climate-green_background button.button.secondary::before {
    background-color: var(--white);
}
.climate-green_background a.button.tertiary::after,
.climate-green_background button.button.secondary::after {
    background-image: url('buttons/assets/tertiary/white_arrow.svg');
}


/* --- opportunity-purple_background --- */
.opportunity-purple_background h1,
.opportunity-purple_background h2,
.opportunity-purple_background h3,
.opportunity-purple_background h4,
.opportunity-purple_background h5,
.opportunity-purple_background h6,
.opportunity-purple_background .h1style,
.opportunity-purple_background .h2style,
.opportunity-purple_background .h3style,
.opportunity-purple_background .h4style,
.opportunity-purple_background .h5style,
.opportunity-purple_background .h6style {
    color: var(--white);
}
.opportunity-purple_background p {
    color: var(--white);
}
.opportunity-purple_background p.sub-heading,
.opportunity-purple_background div.sub-heading p {
    color: var(--white);
}
/* Primary Button Colors */
.opportunity-purple_background a.button.primary,
.opportunity-purple_background button.button.primary {
    background-color: var(--labour-red);
    border-color: var(--labour-red);
}
.opportunity-purple_background a.button.primary:hover,
.opportunity-purple_background button.button.primary:hover {
    background-color: var(--white);
    border-color: var(--white);
    color: var(--off-black);
}
/* Secondary Button Colors */
.opportunity-purple_background a.button.secondary,
.opportunity-purple_background button.button.secondary {
    border-color: var(--white);
    color: var(--white);
}
.opportunity-purple_background a.button.secondary:hover,
.opportunity-purple_background button.button.secondary:hover {
    border-color: var(--white);
    background-color: var(--white);
    color: var(--off-black);
}
/* Tertiary Button Colors */
.opportunity-purple_background a.button.tertiary,
.opportunity-purple_background button.button.tertiary {
    color: var(--white);
}
.opportunity-purple_background a.button.tertiary::before,
.opportunity-purple_background button.button.secondary::before {
    background-color: var(--white);
}
.opportunity-purple_background a.button.tertiary::after,
.opportunity-purple_background button.button.secondary::after {
    background-image: url('buttons/assets/tertiary/white_arrow.svg');
}


/* --- safe-orange_background --- */
.safe-orange_background h1,
.safe-orange_background h2,
.safe-orange_background h3,
.safe-orange_background h4,
.safe-orange_background h5,
.safe-orange_background h6,
.safe-orange_background .h1style,
.safe-orange_background .h2style,
.safe-orange_background .h3style,
.safe-orange_background .h4style,
.safe-orange_background .h5style,
.safe-orange_background .h6style {
    color: var(--white);
}
.safe-orange_background p {
    color: var(--white);
}
.safe-orange_background p.sub-heading,
.safe-orange_background div.sub-heading p {
    color: var(--white);
}
/* Primary Button Colors */
.safe-orange_background a.button.primary,
.safe-orange_background button.button.primary {
    background-color: var(--labour-red);
    border-color: var(--labour-red);
}
.safe-orange_background a.button.primary:hover,
.safe-orange_background button.button.primary:hover {
    background-color: var(--white);
    border-color: var(--white);
    color: var(--off-black);
}
/* Secondary Button Colors */
.safe-orange_background a.button.secondary,
.safe-orange_background button.button.secondary {
    border-color: var(--white);
    color: var(--white);
}
.safe-orange_background a.button.secondary:hover,
.safe-orange_background button.button.secondary:hover {
    border-color: var(--white);
    background-color: var(--white);
    color: var(--off-black);
}
/* Tertiary Button Colors */
.safe-orange_background a.button.tertiary,
.safe-orange_background button.button.tertiary {
    color: var(--white);
}
.safe-orange_background a.button.tertiary::before,
.safe-orange_background button.button.secondary::before {
    background-color: var(--white);
}
.safe-orange_background a.button.tertiary::after,
.safe-orange_background button.button.secondary::after {
    background-image: url('buttons/assets/tertiary/white_arrow.svg');
}




/* --- nhs-blue_background --- */
.nhs-blue_background h1,
.nhs-blue_background h2,
.nhs-blue_background h3,
.nhs-blue_background h4,
.nhs-blue_background h5,
.nhs-blue_background h6,
.nhs-blue_background .h1style,
.nhs-blue_background .h2style,
.nhs-blue_background .h3style,
.nhs-blue_background .h4style,
.nhs-blue_background .h5style,
.nhs-blue_background .h6style {
    color: var(--white);
}
.nhs-blue_background p {
    color: var(--white);
}
.nhs-blue_background p.sub-heading,
.nhs-blue_background div.sub-heading p {
    color: var(--white);
}
/* Primary Button Colors */
.nhs-blue_background a.button.primary,
.nhs-blue_background button.button.primary {
    background-color: var(--labour-red);
    border-color: var(--labour-red);
}
.nhs-blue_background a.button.primary:hover,
.nhs-blue_background button.button.primary:hover {
    background-color: var(--white);
    border-color: var(--white);
    color: var(--off-black);
}
/* Secondary Button Colors */
.nhs-blue_background a.button.secondary,
.nhs-blue_background button.button.secondary {
    border-color: var(--white);
    color: var(--white);
}
.nhs-blue_background a.button.secondary:hover,
.nhs-blue_background button.button.secondary:hover {
    border-color: var(--white);
    background-color: var(--white);
    color: var(--off-black);
}
/* Tertiary Button Colors */
.nhs-blue_background a.button.tertiary,
.nhs-blue_background button.button.tertiary {
    color: var(--white);
}
.nhs-blue_background a.button.tertiary::before,
.nhs-blue_background button.button.secondary::before {
    background-color: var(--white);
}
.nhs-blue_background a.button.tertiary::after,
.nhs-blue_background button.button.secondary::after {
    background-image: url('buttons/assets/tertiary/white_arrow.svg');
}




/* Text Color Selection */
::selection {
    background: var(--black); /* WebKit/Blink Browsers */
    color: var(--white);
}
::-moz-selection {
    background: var(--black); /* Gecko Browsers */
    color: var(--white);
}