/*
  Party colours for the election page. Blue and red keep their meaning in every theme: the map's
  fills are the same everywhere, read off the reference map. What changes per theme is what sits
  round them: the grey of states with no race, the borders (the page's own colour, so states sit
  apart like tiles), and blue and red text on the page.

  Contrast (checked for every pair, 4.5:1 or more): white only reads on the strong shades, so the
  middle and light shades, and the toss-up, carry a dark ink of their own party instead. The
  hatching's light stripes only raise that.
*/

:root {
  /* The map's three shades for each party, by the favourite's chance (tiers.js: mapBand) */
  --dem-strong: #2B5BFF;
  --dem-mid: #5A7DFF;
  --dem-light: #8FA6FF;
  --rep-strong: #E01B1B;
  --rep-mid: #E46C6C;
  --rep-light: #EE9C9C;
  --tossup: #B9A23A;

  /* Words on those fills */
  --on-party: #FFFFFF;          /* on the strong shades: 5.2:1 blue, 4.8:1 red */
  --on-dem-soft: #04124A;       /* on the middle and light blues: 4.9:1 and up */
  --on-rep-soft: #4A0508;       /* on the middle and light reds: 5.1:1 and up */
  --on-tossup: #2B2400;

  /* Hatching: the favourite would flip the seat */
  --hatch: rgba(255, 255, 255, 0.5);

  /* States with no race, their faint abbreviation, and the lines between states */
  --no-race: #EEDDE3;
  --no-race-text: #6A4A57;
  --map-border: var(--surface);

  /* Blue and red as text on the page and on cards */
  --dem-text: #1F4AE0;
  --rep-text: #C8141B;

  /* The gauges' five segments, left to right. The ends are the bright ones; the middle three are
     the same colours let into whatever card they sit on, so they're muted on any theme */
  --gauge-safe-d: var(--dem-strong);
  --gauge-lean-d: color-mix(in srgb, var(--dem-strong) 32%, transparent);
  --gauge-tossup: color-mix(in srgb, var(--tossup) 78%, transparent);
  --gauge-lean-r: color-mix(in srgb, var(--rep-strong) 36%, transparent);
  --gauge-safe-r: var(--rep-strong);
  --gauge-pointer: var(--text);
}

:root[data-theme="blue"] {
  --no-race: #DAE1F1;
  --no-race-text: #46506A;
}

:root[data-theme="light"] {
  --no-race: #D5DAE3;
  --no-race-text: #4E5562;
}

/* The reference's own setting: near-black, with the greys just lifted off it */
:root[data-theme="dark"] {
  --no-race: #25272D;
  --no-race-text: rgba(255, 255, 255, 0.5);
  --dem-text: #6F93FF;
  --rep-text: #FF6B6B;
  --gauge-lean-d: color-mix(in srgb, var(--dem-strong) 30%, transparent);
  --gauge-lean-r: color-mix(in srgb, var(--rep-strong) 34%, transparent);
  --gauge-tossup: color-mix(in srgb, var(--tossup) 72%, transparent);
}