: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: #f7f1ea;
  --colour-page-text: #111111;
  --colour-muted-text: rgba(17, 17, 17, 0.58);
  --colour-surface: #fffbf2;
  --colour-surface-strong: #f6e4f6;
  --colour-border-soft: rgba(8, 9, 109, 0.12);

  /* Main buttons, nav and filters */
  --colour-primary: #08096d;
  --colour-primary-text: #c7e9f7;
  --colour-primary-hover: #c7e9f7;
  --colour-primary-hover-text: #08096d;
  --colour-focus: #294ee8;
  --colour-kicker: #294ee8;

  /* Side filter panel */
  --colour-filter-panel-bg: #fffbf2;
  --colour-filter-panel-text: #08096d;
  --colour-filter-input-bg: #f7f1ea;
  --colour-filter-pill-bg: #ede5da;
  --colour-filter-pill-text: #08096d;
  --colour-filter-active-bg: #08096d;
  --colour-filter-active-text: #c7e9f7;

  /* Count boxes */
  --colour-count-events-bg: #00440d;
  --colour-count-events-text: #b7f000;
  --colour-count-offers-bg: #ec7add;
  --colour-count-offers-text: #5d001d;
  --colour-count-venues-bg: #650018;
  --colour-count-venues-text: #ff97d0;

  /* 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: #ffffff;
  --colour-featured-metal-2: #9fa7c8;
  --colour-featured-metal-3: #111111;
  --colour-featured-metal-4: #f7f0d1;
  --colour-featured-metal-5: #c0791b;
  --colour-featured-metal-6: #171717;
  --colour-featured-metal-7: #f7fbff;
  --colour-featured-metal-8: #535f90;
  --colour-featured-metal-9: #ffec9d;
  --colour-today-bg: #fae170;
  --colour-today-text: #111111;

  /*
    Ticket card colour pairs.
    Each event cycles through these. Background = card colour, text = all text + logo + QR ink.
  */
  --ticket-01-bg: #f6e4f6;
  --ticket-01-text: #c0185a;
  --ticket-02-bg: #fff8e6;
  --ticket-02-text: #f4a62a;
  --ticket-03-bg: #c7e9f7;
  --ticket-03-text: #294ee8;
  --ticket-04-bg: #f0f8d9;
  --ticket-04-text: #03a957;
  --ticket-05-bg: #ec7add;
  --ticket-05-text: #5d001d;
  --ticket-06-bg: #ffe24a;
  --ticket-06-text: #f15a14;
  --ticket-07-bg: #9ea8f7;
  --ticket-07-text: #08096d;
  --ticket-08-bg: #b7f000;
  --ticket-08-text: #003c13;
  --ticket-09-bg: #c81054;
  --ticket-09-text: #ffffff;
  --ticket-10-bg: #f4a62a;
  --ticket-10-text: #ffffff;
  --ticket-11-bg: #3437e8;
  --ticket-11-text: #ffffff;
  --ticket-12-bg: #05a84f;
  --ticket-12-text: #ffffff;
  --ticket-13-bg: #650018;
  --ticket-13-text: #ff97d0;
  --ticket-14-bg: #f94b08;
  --ticket-14-text: #ffe24a;
  --ticket-15-bg: #08096d;
  --ticket-15-text: #9ea8f7;
  --ticket-16-bg: #00440d;
  --ticket-16-text: #b7f000;

  /* 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: #f7f1ea;
  --colour-share-card-bg: #fff8e6;
  --colour-share-link-bg: #f6e4f6;
  --colour-share-primary-bg: #b7f000;
  --colour-share-primary-text: #003c13;
  --colour-share-secondary-bg: #08096d;
  --colour-share-secondary-text: #c7e9f7;

  /* FAQ / lower page */
  --colour-faq-bg: #08096d;
  --colour-faq-text: #c7e9f7;
  --colour-faq-item-bg: #c7e9f7;
  --colour-faq-item-text: #08096d;
  --colour-footer-bg: #650018;
  --colour-footer-text: #ff97d0;
  --colour-footer-hover: #fff8e6;
}