/* The palette, and nothing else.
 *
 * Separated from style.css so that what the colours *are* is one short file, and
 * how things are arranged is another. That split earns its place here for a
 * reason beyond tidiness: the map is drawn by JavaScript, so several of these
 * colours were living in two places at once — the accent as `--accent` here and
 * as a literal in the pin's SVG, the ground colour in both and in the theme-color
 * meta tag besides. Two of anything drifts.
 *
 * These are now the only definitions. index.html reads them back with
 * getComputedStyle rather than repeating them, so a colour changed here changes
 * the pins, the swatches and the dots with it.
 */

:root {
  /* The surfaces, darkest first. */
  --ground: #12141a;   /* the page, and the basemap it sits on */
  --card:   #1a1d26;   /* anything raised off it: rows, popups */
  --line:   #262a36;   /* borders and rules */

  /* Type. */
  --text:  #e7e9ee;
  --muted: #9aa1b0;

  /* The accent is events, which are the point of the site: it marks the pins,
     the active filters and the ticket links, and nothing else. Keeping it to one
     meaning is what makes it read as "this is what you came for". */
  --accent: #ff4d6d;

  /* Locate is a different job from the filters, so a different colour — the blue
     "you are here" convention, deliberately not the accent. */
  --locate: #3b82f6;

  /* The four venue layers. These lived only in JavaScript, which meant the
     stylesheet could not see them and every swatch carried an inline colour.
     They are hues rather than shades so the layers are told apart at a glance,
     and none of them is the accent, so a venue never reads as an event. */
  --eat:   #f59e0b;
  --drink: #22c55e;
  --dance: #a855f7;
  --sleep: #38bdf8;

  /* A venue whose type we do not recognise. */
  --venue-unknown: #9aa1b0;

  /* A kept event or venue. Yellow because it is the star colour everywhere
     else, and because it is the one hue not already spoken for: not the accent
     (events), not eat's amber, not locate's blue. */
  --favourite: #fde047;

  /* Type sitting on a filled control — an active filter, the locate button when
     it is on. White against both, and named so it is not mistaken for --text,
     which is off-white and belongs on the dark surfaces. */
  --on-accent: #fff;

  /* Translucent chrome floating over map tiles. Not derived from --ground with
     a modern colour function, because it has to composite over whatever the
     basemap puts behind it and the exact alpha was chosen by eye against it. */
  --chrome: rgba(18, 20, 26, .82);

  /* Cluster bubbles: a wash rather than a disc, so the streets read through.
     See the note in style.css for why there is no ring.

     The number is dimmed too, not just the disc. These summarise venues, which
     are the backdrop — a bright figure over a faint circle pulled more attention
     than the thing it stands for. It keeps its dark halo, which is what lets it
     stay legible at this weight. */
  --cluster-fill: rgba(154, 161, 176, .16);

  /* Shadows and the halo that keeps light type legible over a dark basemap. */
  --shadow-pin:  rgba(0, 0, 0, .75);
  --halo-strong: rgba(0, 0, 0, .9);
  --halo-soft:   rgba(0, 0, 0, .7);

  /* Not a colour, but it is the other thing both the stylesheet and the script
     need to agree on: the width the list takes from the map. */
  --panel-width: 380px;
}