:root {
  /* ===================================================
      COLOR PALETTE (Raw Colors)
  =================================================== */
  --color-dark-black: #000000;
  --color-black: #1f2930;
  --color-white: #ffffff;
  --color-near-white: #f5f5f5;
  --color-success: #2fa84f;

  /* Greys */
  --color-grey-100: #555;
  --color-grey-200: #666;
  --color-grey-300: #ccc;
  --color-grey-400: #ddd;
  --color-grey-500: #eee;

  /* Accents */
  --color-accent-blue: #004ea8;
  --color-pennon-blue: #055197;
  --color-accent-green: #41e2ba;
  --color-accent-lightblue: #48c6ee;
  --color-accent-navy: #203869;
  --color-accent-purple: #2f2a51;
  --color-accent-red: #ff949f;
  --color-accent-yellow: #ffd02f;

  /* Tints & Pastels */
  --color-tint-yellow: #ffe9bf;
  --color-tint-blue: #e5edf6;
  --color-tint-stone: #f0efe1;
  --color-tint-light-blue: #CFE8F8;
  --color-pastel-navy: #e8effa;
  --color-pastel-blue: #e7f4f9;

  --color-bw-tint-blue: #ccdcee;
  --color-bw-tint-light-blue: #cceffb;
  --color-bw-tint-purple: #dfd9e4;
  --color-bw-tint-cyan: #cceff1;

  /* ===================================================
      SEMANTIC COLORS (Usage-based)
  =================================================== */
  --color-page-bg: var(--color-white);

  /* Footer */
  --color-footer-top-bg: #e4eef5;
  --color-footer-bottom-bg: #d4e5f0;
  --color-footer-logo: var(--color-black);

  /* Header & Navigation */
  --color-header-bg: var(--color-accent-green);
  --color-header-logo: var(--color-pennon-blue);
  --color-header-logo-mobile: var(--color-pennon-blue);
  --color-header-logo-mobile-alt: var(--color-pennon-blue);

  --color-primary-nav-link-text: var(--color-black);
  --color-primary-nav-link-text-hover: var(--color-black);
  --color-primary-nav-link-text-active: var(--color-accent-blue);
  --color-primary-nav-link-bg: var(--color-accent-green);
  --color-primary-nav-link-bg-hover: var(--color-white);
  --color-primary-nav-link-bg-active: var(--color-white);

  /* Main Nav (Mobile) */
  --color-main-nav-text: var(--color-black);
  --color-main-nav-bg: transparent;
  --color-main-nav-text-opened: var(--color-black);
  --color-main-nav-bg-opened: var(--color-white);
  --color-main-nav-footer-bg: var(--color-near-white);

  /* Sub Nav */
  --color-sub-nav-bg: transparent;
  --color-sub-nav-text: var(--color-white);
  --color-sub-nav-item-border: var(--color-grey-400);
  --color-sub-nav-button-bg: transparent;
  --color-sub-nav-button-text: var(--color-black);
  --color-sub-nav-button-bg-hover: var(--color-tint-blue);
  --color-sub-nav-button-text-hover: var(--color-black);
  --color-sub-nav-link-hover: var(--color-tint-blue);

  /* Panels */
  --color-pannel-wrap-bg: var(--color-tint-blue);
  --color-pannel-wrap-text: var(--color-black);
  --color-panel-link-text: var(--color-black);
  --color-panel-link-hover: var(--color-black);
  --color-panel-article-text: var(--color-black);
  --color-panel-article-border: var(--color-black);
  --color-panel-article-bg-hover: var(--color-tint-light-blue);
  --color-panel-small-screen-items-shadow: var(--color-grey-500);
  --color-panel-return-text: var(--color-grey-200);

  /* Text */
  --color-text: var(--color-grey-100);
  --color-text-alt: var(--color-white);
  --color-heading: var(--color-black);
  --color-heading-alt: var(--color-white);
  --color-text-bubble: var(--color-black);
  --color-text-in-your-area: var(--color-white);

  /* In Your Area */
  --color-in-your-area-text: var(--color-white);
  --color-in-your-area-bg: var(--color-accent-purple);

  --color-in-your-area-promo-text: var(--color-white);
  --color-in-your-area-promo-bg: var(--color-accent-purple);

  /* Contact */
  --color-contact-bg: var(--color-pastel-navy);
  --color-contact-cta: var(--color-black);

  /* Stats Blocks */
  --color-stats-block-1-bg: var(--color-accent-green);
  --color-stats-block-2-bg: var(--color-accent-yellow);
  --color-stats-block-3-bg: var(--color-accent-red);
  --color-stats-block-4-bg: var(--color-accent-lightblue);
  --color-text-stats-block-1: var(--color-black);
  --color-text-stats-block-2: var(--color-black);
  --color-text-stats-block-3: var(--color-black);
  --color-text-stats-block-4: var(--color-black);

  /* In Page Navigation */
  --color-in-page-navigation-1-bg: var(--color-accent-green);
  --color-in-page-navigation-2-bg: var(--color-accent-yellow);
  --color-in-page-navigation-3-bg: var(--color-accent-red);
  --color-in-page-navigation-4-bg: var(--color-accent-lightblue);
  --color-text-in-page-navigation-1: var(--color-black);
  --color-text-in-page-navigation-2: var(--color-black);
  --color-text-in-page-navigation-3: var(--color-black);
  --color-text-in-page-navigation-4: var(--color-black);

  /* Bubbles */
  --color-bubble-1-bg: var(--color-accent-green);
  --color-bubble-2-bg: var(--color-accent-red);
  --color-bubble-3-bg: var(--color-accent-yellow);
  --color-bubble-4-bg: var(--color-accent-lightblue);

  /* Saving Calculator */
  --color-saving-calc-bg: var(--color-accent-lightblue);
  --color-saving-calc-total-bg: var(--color-accent-green);
  --color-text-saving-calc-total-bg: var(--color-black);

  /* Timeline */
  --color-timeline-button-bg: var(--color-accent-green);
  --color-timeline-button-text: var(--color-black);
   /* Card bgcolors are declared in utility-classes.scss */

  /* Forms */
  --color-form-bg: var(--color-white);
  --color-form-main-body-bg: var(--color-white);
  --color-form-label-text: var(--color-black);
  --color-form-input-text: var(--color-black);
  --color-form-input-border: var(--color-grey-300);
  --color-form-input-border-focus: var(--color-black);
  --color-form-select-option-bg: var(--color-grey-300);
  --color-form-select-option-bg-selected: #d9d9d9;
  --color-form-select-option-text: var(--color-black);
  --color-form-checkbox-border: var(--color-grey-300);
  --color-form-checkbox-text-active: var(--color-white);
  --color-form-checkbox-bg-active: var(--color-black);
  --color-from-radio-bg: var(--color-white);
  --color-form-radio-border: var(--color-grey-300);
  --color-form-radio-border-active: var(--color-white);
  --color-form-radio-bg-active: var(--color-black);
  --color-form-navigatio-action-bg: var(--color-accent-purple);
  --color-form-navigatio-action-border: var(--color-accent-purple);
  --color-form-navigatio-action-text: var(--color-white);
  --color-form-navigatio-action-bg-disabled: var(--color-grey-300);
  --color-form-navigatio-action-border-disabled: var(--color-grey-300);
  --color-form-navigatio-action-text-disabled: var(--color-black);
  --color-form-navigatio-action-bg-focus: var(--color-accent-green);
  --color-form-navigatio-action-border-focus: var(--color-accent-green);
  --color-form-navigatio-action-text-focus: var(--color-black);
  --color-form-progress-bar-bg: var(--color-accent-green);
  --color-form-progress-bar-border: var(--color-accent-green);
  --color-form-range-bg: var(--color-grey-300);
  --color-form-range-thumb-bg: var(--color-accent-purple);
  --color-form-range-thumb-bg-hover: var(--color-accent-green);
  --color-form-file-border: var(--color-grey-300);
  --color-form-file-border-hover: var(--color-grey-200);
  --color-form-file-bg: var(--color-near-white);
  --color-form-status-bg: transparent;
  --color-form-status-text: var(--color-grey-100);
  --color-form-number-picker-wrap-bg: var(--color-white);
  --color-form-number-picker-input-bg: var(--color-white);
  --color-form-number-picker-input-border: var(--color-grey-300);
  --color-form-number-picker-button-bg: var(--color-accent-green);
  --color-form-number-picker-icon-bg: var(--color-grey-500);
  --color-form-number-picker-border-focus: var(--color-black);
  --color-form-table-header-bg: var(--color-accent-green);
  --color-form-table-header: var(--color-black);
  --color-form-table: var(--color-grey-100);
  --color-form-table-input-disabled-bg: #f6f6f6;

  /* Hosepipe Ban */
  --color-hosepipe-ban-text: var(--color-black);
  --color-hosepipe-ban-bg: var(--color-near-white);

  /* Savings Calculator */
  --color-savings-calc-btn-bg: var(--color-accent-purple);
  --color-savings-calc-btn-border: var(--color-accent-purple);

  /* Search */
  --color-search-icon: var(--color-white);
  --color-search-error-text: red;
  --color-search-bg: var(--color-white);

  /* FAQ */
  --color-faq-category: var(--color-grey-200);
  --color-faq-category-text-active: var(--color-black);
  --color-faq-category-border-active: var(--color-accent-green);
  --color-faq-link-copied-bg: var(--color-black);

  /* Hero */
  --hero-bg-color: var(--color-black);
  --hero-bg-image: url("/images/hero-waves.png");
  --hero-content-bg: rgba(5, 81, 151, 0.90);
  --hero-content-text: var(--color-white);

  --hero-bg-color-light: var(--color-black);
  --hero-bg-image-light: url("/images/hero-waves.png");
  --hero-content-text-light: var(--color-black);

  /* Announcement Banner */
  --banner-yellow-bg-color: var(--color-accent-yellow);

  /* Map */
  --map-panel-bg: var(--color-accent-blue);
  --map-list-bg: var(--color-tint-blue);
  --map-list-scrollbar-bg: var(--color-accent-purple);

    /* Triage */
  --triage-button-bg: var(--color-white);
  --triage-button-bg-hover: var(--color-accent-green);
  --triage-button-bg-selected: var(--color-accent-purple);
  --triage-button-text: var(--color-black);
  --triage-button-text-hover: var(--color-black);
  --triage-button-text-selected: var(--color-white);

  /* ===================================================
      TYPOGRAPHY
  =================================================== */
  /* Font Families */
  --font-family-text: "Calibre", "Helvetica", "Arial", sans-serif;
  --font-family-heading: "Chapeau", sans-serif;

  /* Font Weights */
  --font-weight-bold: bold;

  /* Font Sizes */
  --font-size-body: clamp(1rem, 0.955rem + 0.23vw, 1.125rem); /* 16px, 18px */
  --font-size-homepage-title: clamp(2.25rem, 1.5357142857142858rem + 3.571428571428571vw, 3.75rem); /* 36px, 60px */
  --font-size-1: clamp(2.25rem, 1.893rem + 1.79vw, 3rem); /* 36px, 48px */
  --font-size-2: clamp(1.75rem, 1.631rem + 0.6vw, 2rem); /* 28px, 32px */
  --font-size-3: 1.5rem; /* 24px */
  --font-size-4: 1.25rem; /* 20px */
  --font-size-5: 1rem; /* 16px */
  --font-size-6: 1rem; /* 16px */
  --font-size-7: 1.125rem; /* 18px */

  /* Line Heights */
  --line-height-body: 1.5;
  --line-height-homepage-title: 1.1;
  --line-height-1: 1.2;
  --line-height-2: 1.3;
  --line-height-3: 1.4;
  --line-height-4: 1.5;
  --line-height-5: 1.6;
  --line-height-6: 1.6;

  /* ===================================================
      LAYOUT
  =================================================== */
  --width-wrap-narrow: 55.375rem; /* 884px */
  --width-wrap: 83.75rem;         /* 1340px */
  --width-wrap-wide: 90rem;       /* 1440px */

  /* NOTE: --width-cols-* were generated with SCSS
    @for $i from 1 through 12 {
      --width-cols-#{$i}: #{rem(
        ((math.div(1580px - (20px * 11), 12)) * $i)+ (20px * ($i - 1))
      )};
    }
  */
  --width-cols-1: 7.0833333333rem;
  --width-cols-2: 15.4166666667rem;
  --width-cols-3: 23.75rem;
  --width-cols-4: 32.0833333333rem;
  --width-cols-5: 40.4166666667rem;
  --width-cols-6: 48.75rem;
  --width-cols-7: 57.0833333333rem;
  --width-cols-8: 65.4166666667rem;
  --width-cols-9: 73.75rem;
  --width-cols-10: 82.0833333333rem;
  --width-cols-11: 90.4166666667rem;
  --width-cols-12: 98.75rem;

  /* ===================================================
      COMPONENTS
  =================================================== */
  /* Buttons */
  --button-height: 55px;
  --button-padding: 10px 20px;
  --button-font-size: 1.125rem; /* 18px */
  --button-line-height: 1.6rem; /* 24px */
  --button-font-family: var(--font-family-text);
  --button-border-width: 2px;
  --button-border-radius: 5px;

  /* Primary Button */
  --button-primary-color: var(--color-white);
  --button-primary-color-hover: var(--color-white);
  --button-primary-color-focus: var(--color-white);
  --button-primary-color-active: var(--color-white);
  --button-primary-bg: var(--color-accent-blue);
  --button-primary-bg-hover: #0065ad;
  --button-primary-bg-focus: var(--color-accent-blue);
  --button-primary-bg-active: var(--color-black);
  --button-primary-border: var(--color-accent-blue);
  --button-primary-border-hover: var(--color-accent-blue);
  --button-primary-border-focus: var(--color-black);
  --button-primary-border-active: var(--color-black);

  /* Secondary Button */
  --button-secondary-color: var(--color-accent-blue);
  --button-secondary-color-hover: var(--color-accent-blue);
  --button-secondary-color-focus: var(--color-accent-blue);
  --button-secondary-color-active: var(--color-white);
  --button-secondary-bg: var(--color-white);
  --button-secondary-bg-hover: var(--color-tint-blue);
  --button-secondary-bg-focus: var(--color-tint-blue);
  --button-secondary-bg-active: var(--color-accent-blue);
  --button-secondary-border: var(--color-accent-blue);
  --button-secondary-border-hover: var(--color-accent-blue);
  --button-secondary-border-focus: var(--color-accent-blue);
  --button-secondary-border-active: var(--color-accent-blue);

  /* small button */
  --button-small-height: 40px;
  --button-small-padding: 5px 10px;
  --button-small-font-size: 1rem;
  --button-small-line-height: 1.4rem;

  /* ===================================================
      MISCELLANEOUS
  =================================================== */
  /* Border Radius */
  --border-radius: 10px;
  --border-radius-large: 20px;

  /* Shadows */
  --card-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}