:root {
  /* Colors */
  --white: #fff;
  --black: #000;
  --grey: #6a6a6a;
  --status-yellow: #ffc836;
  --status-red: #bd0017;
  --status-light-green: #50bd00;
  --status-black: #27251f;
  --talon-dark-grey: #363636;
  --talon-navy: #031d44;
  --talon-pink: #ff005c;
  --talon-light-grey: #f7f7f7;
  --talon-green: #22efc0;
  --talon-mint-green: #21efbf;
  --talon-cyan-bluish-gray: #abb8c3;
  --talon-pale-pink: #f78da7;
  --talon-vivid-red: #cf2e2e;
  --talon-luminous-vivid-orange: #ff6900;
  --talon-luminous-vivid-amber: #fcb900;
  --talon-light-green-cyan: #7bdcb5;
  --talon-vivid-green-cyan: #00d084;
  --talon-pale-cyan-blue: #8ed1fc;
  --talon-vivid-cyan-blue: #0693e3;
  --talon-vivid-purple: #9b51e0;
  --talon-translucent-red: #bd001736;

  /* utiities */
  --util-max-screen-size: 768px;
  --util-min-screen-size: 360px;

  /* Fonts */
  --barlow-font-family: 'Barlow', sans-serif;
  --arial-font-family: 'Arial', sans-serif;

  /* Base */
  --base-font-color: var(--talon-dark-grey);
  --base-header-font-family: var(--barlow-font-family);
  --base-font-family: var(--barlow-font-family);
  --base-header-color: var(--talon-pink);
  --base-star-color: var(--talon-vivid-red);

  /* Components */

  /* Component - Header */
  --component-header-background-color: var(--talon-navy);
  --component-header-font-color: var(--white);

  /* Component - Menu */
  --component-menu-border-color: var(--talon-navy);
  --component-menu-background-color: var(--white);
  --component-menu-link-color: var(--talon-navy);
  --component-menu-avatar-background: var(--talon-light-grey);
  --component-menu-burger-bar-color: var(--talon-vivid-red);
  --component-menu-link-icon-color: var(--talon-vivid-red);
  --component-menu-avatar-icon-color: var(--talon-vivid-red);
  --component-menu-close-icon-color: var(--talon-navy);
  --component-menu-link-font-family: var(--arial-font-family);

  /* Component - Filter */
  --component-filter-tab-background: var(--talon-navy);
  --component-filter-background: var(--white);
  --component-filter-tab-font-color: var(--white);
  --component-filter-tab-active-background: var(--white);
  --component-filter-tab-active-font-color: var(--black);
  --component-filter-icon-color: var(--white);
  --component-filter-border-color: var(--talon-navy);
  --component-filter-status-button-background: var(--white);
  --component-filter-status-button-border-color: var(--black);
  --component-filter-status-active-button-color: var(--white);
  --component-filter-status-active-button-border-color: var(--black);
  --component-filter-status-active-button-background: var(--talon-vivid-red);

  /* Component - Input */
  --component-input-border-color: var(--black);
  --component-input-border-grey-color: var(--talon-dark-grey);
  --component-input-color: var(--talon-dark-grey);
  --component-input-inner-decorator-border-color: var(--white);
  --component-input-inner-color: var(--talon-navy);
  --component-input-font-color: var(--black);
  --component-input-font-family: var(--barlow-font-family);

  /* Component - Button */
  --component-button-font-family: var(--arial-font-family);
  --component-button-contained-background-color: var(--talon-navy);
  --component-button-contained-border-color: var(--talon-navy);
  --component-button-contained-font-color: var(--white);
  --component-button-outlined-border-color: var(--black);
  --component-button-outlined-font-color: var(--black);

  /* Component - Form */
  --component-form-button-color: var(--talon-navy);
  --component-form-open-sans-font-family: var(--barlow-font-family);
  --component-form-arial-font-family: var(--arial-font-family);
  --component-form-description-border-color: var(--talon-pink);
  --component-form-upload-preview-border-color: var(--talon-light-grey);

  /* Component - Map */
  --component-map-legend-font-family: var(--arial-font-family);
  --component-map-legend-text-color: var(--talon-dark-grey);
  --component-map-filter-icon-color: var(--talon-vivid-red);

  /* Component - Filter */
  --component-filter-label-color: var(--talon-navy);
  --component-filter-list-border-color: var(--black);
  --component-filter-list-background-color: var(--talon-light-grey);
  --component-filter-list-font-color: var(--black);
  --component-filter-arial-font-family: var(--arial-font-family);
  --component-filter-icon-fill-color: var(--talon-navy);

  /*  Component - Confirm */
  --component-confirm-message-label-font-family: var(--barlow-font-family);
  --component-confirm-deatils-header-font-family: var(--barlow-font-family);
  --component-confirm-deatils-inner-font-family: var(--barlow-font-family);
  --component-confirm-message-label-font-color: var(--black);

  /* Component - Frame Hero */
  --component-frame-hero-background-color: var(--white);
  --component-frame-hero-paragraph-font-family: var(--barlow-font-family);

  /* Component - Frame Booked */
  --component-clock-text-colour: var(--talon-navy);
  --component-clock-days-text-background: var(--talon-pink: );
  --component-clock-days-text-color: var(--white);
  --component-clock-text-font: var(--barlow-font-family);

  /* Component - Accordion */
  --component-accordion-icon-color: var(--talon-navy);
  --component-accordion-border-color: var(--talon-navy);

  /* Component - Error Message */
  --component-error-message-color: var(--talon-vivid-red);

  /* Pages */

  /* Page - Locations */
  --page-locations-background-color: var(--white);
  --page-locations-header-color: var(--talon-navy);
  --page-locations-text-color: var(--talon-navy);
  --page-locations-search-border-color: var(--talon-navy);
  --page-locations-search-icon-color: var(--talon-pink);
  --page-locations-support-email-color: var(--talon-pink);
  --page-locations-search-input-color: var(--black);
  --page-locations-result-font-color: var(--talon-navy);
  --page-locations-result-icon-color: var(--white);
  --page-locations-result-icon-background: var(--talon-navy);
  --page-locations-header-font-family: var(--barlow-font-family);
  --page-locations-text-font-family: var(--barlow-font-family);
  --page-locations-search-input-font-family: var(--barlow-font-family);
  --page-locations-result-font-family: var(--barlow-font-family);
  --page-locations-result-end-font-family: var(--barlow-font-family);

  /* Page - Frame */

  --page-frame-background-color: var(--white);
  --page-frame-paragraph-font-family: var(--barlow-font-family);
  --page-frame-icon-fill: var(--talon-navy);
  --page-frame-star-color: var(--talon-vivid-red);
  --page-frame-form-font-family: var(--open-sans-font-family);

  /* Page - Pois */

  --page-poi-background-color: var(--white);
  --page-poi-paragraph-font-family: var(--arial-font-family);
  --page-poi-name-font-family: var(--barlow-font-family);
  --page-poi-name-color: var(--talon-dark-grey);
  --page-poi-star-color: var(--talon-vivid-red);

  /* Page - App Support */

  --page-app-support-background-color: var(--white);
  --page-app-support-paragraph-font-family: var(--open-sans-font-family);
  --page-app-support-name-font-family: var(--lato-font-family);
  --page-app-support-name-color: var(--black);
  --page-app-support-input-border-color: var(--talon-dark-grey);

  /* Page - Support Confirmation */

  --page-support-confirmation-background-color: var(--white);

  /* Page - Bookings */
  --page-bookings-background-color: var(--white);
  --page-bookings-button-color: var(--talon-navy);
  --page-bookings-arial-font-family: var(--arial-font-family);
  --page-bookings-filter-label-color: var(--talon-navy);
  --page-bookings-status-pending-background-color: var(--grey);
  --page-bookings-status-black-font-color: var(--black);
  --page-bookings-status-booked-background-color: var(--status-light-green);
  --page-bookings-status-white-font-color: var(--white);
  --page-bookings-status-declined-background-color: var(--status-red);
  --page-bookings-status-cancelled-background-color: var(--status-black);
  --page-bookings-inprogress-status-background-color: var(--status-yellow);
  --page-bookings-resolved-status-background-color: var(--status-light-green);
  --page-bookings-reopened-status-background-color: var(--status-yellow);
  --page-bookings-ticket-border-color: var(--talon-light-grey);
  --page-bookings-ticket-body-font-family: var(--barlow-font-family);
  --page-bookings-ticket-font-color: var(--black);
  --page-bookings-ticket-alt-body-font-family: var(--arial-font-family);
  --page-bookings-no-tickets-description-font-family: var(--barlow-font-family);

  /* Page - Tickets */
  --page-tickets-background-color: var(--white);
  --page-tickets-button-color: var(--talon-navy);
  --page-tickets-arial-font-family: var(--arial-font-family);
  --page-tickets-filter-label-color: var(--talon-navy);
  --page-tickets-status-pending-background-color: var(--status-yellow);
  --page-tickets-status-black-font-color: var(--status-black);
  --page-tickets-status-booked-background-color: var(--status-light-green);
  --page-tickets-status-white-font-color: var(--white);
  --page-tickets-status-declined-background-color: var(--status-red);
  --page-tickets-status-cancelled-background-color: var(--status-black);

  /* Page - Confirmation */
  --page-confirmation-background-color: var(--white);
  --page-confirmation-submitted-status-background-color: var(--talon-pink);
  --page-confirmation-booked-status-background-color: var(--talon-green);
  --page-confirmation-declined-status-background-color: var(--talon-navy);
  --page-confirmation-cancelled-status-background-color: var(--black);
  --page-confirmation-inprogress-status-background-color: var(--talon-pink);
  --page-confirmation-resolved-status-background-color: var(--talon-green);
  --page-confirmation-reopened-status-background-color: var(--talon-pink);
  --page-confirmation-status-white-font-color: var(--white);
  --page-confirmation-status-black-font-color: var(--black);
  --page-confirmation-status-label-font: var(--arial-font-family);

  /* page - FAQ's */
  --page-faqs-background-color: var(--white);
  --page-faqs-content-font-family: var(--arial-font-family);
  --page-faqs-content-link-color: var(--talon-navy);

  /* Page - Terms */
  --page-terms-header-font-family: var(--barlow-font-family);
  --page-terms-content-font-family: var(--arial-font-family);
  --page-terms-content-font-color: var(--talon-navy);
  --page-terms-background-color: var(--white);
}