:root {
  /* Colors */
  --mcdonalds-red: #bd0017;
  --mcdonalds-hot-red: #bd1716;
  --mcdonalds-yellow: #ffc836;
  --mcdonalds-green: #264f36;
  --mcdonalds-light-green: #50bd00;
  --mcdonalds-black: #27251f;
  --mcdonalds-grey: #707070;
  --mcdonalds-border-grey: #95989a41;
  --mcdonalds-light-grey: #f1f9ff;
  --mcdonalds-off-white: #f7f7f7;
  --mcdonalds-pale-blue: #7fc4fd;
  --white: #fff;
  --black: #000;
  --grey: #6a6a6a;

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

  /* Fonts */
  --lato-font-family: 'Lato', sans-serif;
  --open-sans-font-family: 'Open Sans', sans-serif;
  --arial-font-family: 'Arial', sans-serif;

  /* Base */
  --base-font-color: var(--mcdonalds-black);
  --base-header-font-family: var(--lato-font-family);
  --base-font-family: var(--open-sans-font-family);
  --base-header-color: var(--mcdonalds-black);
  --base-star-color: var(--mcdonalds-red);

  /* Components */

  /* Component - Header */
  --component-header-background-color: var(--mcdonalds-yellow);
  --component-header-font-color: var(--mcdonalds-black);

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

  /* Component - Filter */
  --component-filter-tab-background: var(--mcdonalds-yellow);
  --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(--mcdonalds-black);
  --component-filter-icon-color: var(--white);
  --component-filter-border-color: var(--mcdonalds-yellow);
  --component-filter-status-button-background: var(--white);
  --component-filter-status-button-border-color: var(--mcdonalds-black);
  --component-filter-status-active-button-color: var(--white);
  --component-filter-status-active-button-border-color: var(--mcdonalds-black);
  --component-filter-status-active-button-background: var(--mcdonalds-hot-red);

  /* Component - Input */
  --component-input-border-color: var(--mcdonalds-black);
  --component-input-color: var(--mcdonalds-black);
  --component-input-border-grey-color: var(--mcdonalds-border-grey);
  --component-input-inner-decorator-border-color: var(--white);
  --component-input-inner-color: var(--mcdonalds-red);
  --component-input-font-color: var(--mcdonalds-black);
  --component-input-font-family: var(--open-sans-font-family);

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

  /* Component - Form */
  --component-form-button-color: var(--mcdonalds-red);
  --component-form-open-sans-font-family: var(--open-sans-font-family);
  --component-form-arial-font-family: var(--arial-font-family);
  --component-form-description-border-color: var(--mcdonalds-pale-blue);
  --component-form-upload-preview-border-color: var(--mcdonalds-grey);
  --component-form-radio-caption-font-family: var(--open-sans-font-family);

  /* Component - Map */
  --component-map-legend-font-family: var(--arial-font-family);
  --component-map-legend-text-color: var(--mcdonalds-black);
  --component-map-filter-icon-color: var(--mcdonalds-red);

  /* Component - Filter */
  --component-filter-label-color: var(--mcdonalds-red);
  --component-filter-list-border-color: var(--mcdonalds-border-grey);
  --component-filter-list-background-color: var(--mcdonalds-off-white);
  --component-filter-list-font-color: var(--mcdonalds-black);
  --component-filter-arial-font-family: var(--arial-font-family);
  --component-filter-icon-fill-color: var(--mcdonalds-red);

  /*  Component - Confirm */
  --component-confirm-message-label-font-family: var(--lato-font-family);
  --component-confirm-deatils-header-font-family: var(--open-sans-font-family);
  --component-confirm-deatils-inner-font-family: var(--open-sans-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(--open-sans-font-family);

  /* Component - Frame Booked */
  --component-clock-text-colour: var(--mcdonalds-red);
  --component-clock-days-text-background: var(--mcdonalds-yellow);
  --component-clock-days-text-color: var(--white);
  --component-clock-text-font: var(--lato-font-family);

  /* Component - Accordion */
  --component-accordion-icon-color: var(--mcdonalds-black);
  --component-accordion-border-color: var(--mcdonalds-grey);
  --component-accordion-title-color: var(--mcdonalds-black);

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

  /* Pages */

  /* Page - Locations */
  --page-locations-background-color: var(--white);
  --page-locations-header-color: var(--mcdonalds-black);
  --page-locations-text-color: var(--mcdoanlds-black);
  --page-locations-search-border-color: var(--mcdonalds-black);
  --page-locations-search-icon-color: var(--mcdonalds-red);
  --page-locations-support-email-color: var(--mcdonalds-red);
  --page-locations-search-input-color: var(--mcdonalds-grey);
  --page-locations-result-font-color: var(--mcdonalds-black);
  --page-locations-result-icon-color: var(--white);
  --page-locations-result-icon-background: var(--mcdonalds-black);
  --page-locations-header-font-family: var(--lato-font-family);
  --page-locations-text-font-family: var(--open-sans-font-family);
  --page-locations-search-input-font-family: var(--open-sans-font-family);
  --page-locations-result-font-family: var(--open-sans-font-family);
  --page-locations-result-end-font-family: var(--lato-font-family);

  /* Page - Frame */

  --page-frame-background-color: var(--white);
  --page-frame-paragraph-font-family: var(--open-sans-font-family);
  --page-frame-icon-fill: var(--mcdonalds-black);
  --page-frame-star-color: var(--mcdonalds-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(--open-sans-font-family);
  --page-poi-name-font-family: var(--lato-font-family);
  --page-poi-name-color: var(--mcdonalds-black);
  --page-poi-star-color: var(--mcdonalds-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(--mcdonalds-black);
  --page-app-support-input-border-color: var(--mcdonalds-border-grey);

  /* Page - Support Confirmation */

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

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

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

  /* Page - Confirmation */
  --page-confirmation-background-color: var(--white);
  --page-confirmation-submitted-status-background-color: var(--grey);
  --page-confirmation-booked-status-background-color: var(
    --mcdonalds-light-green
  );
  --page-confirmation-declined-status-background-color: var(--mcdonalds-red);
  --page-confirmation-cancelled-status-background-color: var(--mcdonalds-black);
  --page-confirmation-inprogress-status-background-color: var(
    --mcdonalds-yellow
  );
  --page-confirmation-resolved-status-background-color: var(
    --mcdonalds-light-green
  );
  --page-confirmation-reopened-status-background-color: var(--mcdonalds-yellow);
  --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(--mcdonalds-red);

  /* Page - Terms */
  --page-terms-header-font-family: var(--open-sans-font-family);
  --page-terms-content-font-family: var(--arial-font-family);
  --page-terms-content-font-color: var(--mcdonalds-red);
  --page-terms-background-color: var(--white);
}