:root {
  /*
    PAREA FRONTEND COLOURS
    Change these hex values to reskin the public website.
    The names below are grouped by where they show up.
  */

  /* Base page */
  --colour-page: #fefefe;
  --colour-page-text: #242223;
  --colour-muted-text: rgba(36, 34, 35, 0.64);
  --colour-surface: #fefefe;
  --colour-surface-strong: #e9f1fd;
  --colour-border-soft: rgba(27, 89, 209, 0.12);

  /* Main buttons, nav and filters */
  --colour-primary: #1b59d1;
  --colour-primary-text: #ffffff;
  --colour-primary-hover: #242223;
  --colour-primary-hover-text: #ffffff;
  --colour-focus: #1b59d1;
  --colour-kicker: #1b59d1;

  /* Side filter panel */
  --colour-filter-panel-bg: #fefefe;
  --colour-filter-panel-text: #242223;
  --colour-filter-input-bg: #e9f1fd;
  --colour-filter-pill-bg: #e9f1fd;
  --colour-filter-pill-text: #242223;
  --colour-filter-active-bg: #1b59d1;
  --colour-filter-active-text: #ffffff;

  /* Count boxes */
  --colour-count-events-bg: #e9f1fd;
  --colour-count-events-text: #242223;
  --colour-count-offers-bg: #e9f1fd;
  --colour-count-offers-text: #242223;
  --colour-count-venues-bg: #e9f1fd;
  --colour-count-venues-text: #242223;

  /* Featured / today badges */
  --colour-featured-bg-top: #222018;
  --colour-featured-bg-mid: #0f0f0e;
  --colour-featured-bg-bottom: #252114;
  --colour-featured-text: #fff6d7;
  --colour-featured-metal-1: #fffdfb;
  --colour-featured-metal-2: #d9f3ff;
  --colour-featured-metal-3: #b6c9ff;
  --colour-featured-metal-4: #e7d5ff;
  --colour-featured-metal-5: #f3d9ee;
  --colour-featured-metal-6: #9fb8ef;
  --colour-featured-metal-7: #ffffff;
  --colour-featured-metal-8: #c4b2ec;
  --colour-featured-metal-9: #d6ecff;
  --colour-today-bg: #e9f1fd;
  --colour-today-text: #1b59d1;
  --colour-ticket-badge-bg: #1b59d1;
  --colour-ticket-badge-text: #ffffff;
  --colour-trending-badge-bg: #1b59d1;
  --colour-trending-badge-text: #ffffff;
  --colour-popular-badge-bg: #1b59d1;
  --colour-popular-badge-text: #ffffff;
  --colour-parea-pick-bg: #e9f1fd;
  --colour-parea-pick-text: #242223;

  /*
    Ticket card colour pairs.
    Each event cycles through these. Background = card colour, text = all text + logo + QR ink.
  */
  --ticket-01-bg: #e9f1fd;
  --ticket-01-text: #242223;
  --ticket-02-bg: #e9f1fd;
  --ticket-02-text: #242223;
  --ticket-03-bg: #e9f1fd;
  --ticket-03-text: #242223;
  --ticket-04-bg: #e9f1fd;
  --ticket-04-text: #242223;
  --ticket-05-bg: #e9f1fd;
  --ticket-05-text: #242223;
  --ticket-06-bg: #e9f1fd;
  --ticket-06-text: #242223;
  --ticket-07-bg: #e9f1fd;
  --ticket-07-text: #242223;
  --ticket-08-bg: #e9f1fd;
  --ticket-08-text: #242223;
  --ticket-09-bg: #e9f1fd;
  --ticket-09-text: #242223;
  --ticket-10-bg: #e9f1fd;
  --ticket-10-text: #242223;
  --ticket-11-bg: #1b59d1;
  --ticket-11-text: #ffffff;
  --ticket-12-bg: #e9f1fd;
  --ticket-12-text: #242223;
  --ticket-13-bg: #1b59d1;
  --ticket-13-text: #ffffff;
  --ticket-14-bg: #e9f1fd;
  --ticket-14-text: #242223;
  --ticket-15-bg: #1b59d1;
  --ticket-15-text: #ffffff;
  --ticket-16-bg: #e9f1fd;
  --ticket-16-text: #242223;

  /* Ticket details */
  --colour-ticket-cutout: var(--colour-page);
  --colour-ticket-seam: rgba(16, 16, 16, 0.14);
  --colour-reaction-idle-bg: color-mix(in srgb, currentColor 16%, transparent);

  /* Share popup */
  --colour-share-panel-bg: #fefefe;
  --colour-share-card-bg: #e9f1fd;
  --colour-share-link-bg: #e9f1fd;
  --colour-share-primary-bg: #1b59d1;
  --colour-share-primary-text: #ffffff;
  --colour-share-secondary-bg: #242223;
  --colour-share-secondary-text: #ffffff;

  /* FAQ / lower page */
  --colour-faq-bg: #1b59d1;
  --colour-faq-text: #ffffff;
  --colour-faq-item-bg: #e9f1fd;
  --colour-faq-item-text: #242223;
  --colour-footer-bg: #242223;
  --colour-footer-text: #ffffff;
  --colour-footer-hover: #e9f1fd;
}