/* ============================================================
   MWG Design & Research — Color tokens
   A near-monochrome Swiss palette: warm-black ink on white, a
   single signal red, and a navy reserved for data marks. Greys
   step from faint hairlines up to body ink. The data palette is
   a muted, desaturated set for categorical charts.
   ============================================================ */
:root {
  /* --- Ink & neutrals (light → dark) --- */
  --mwg-white:    #ffffff;
  --mwg-paper:    #fafafa;  /* tinted surface, control wells */
  --mwg-line-3:   #edeef1;  /* slider track, faintest fill */
  --mwg-line-2:   #e2e8f0;  /* control borders */
  --mwg-line:     #ececec;  /* structural hairlines, dividers */
  --mwg-grey-5:   #cfd4dc;  /* disabled marks, "selection only" */
  --mwg-grey-4:   #c7ccd5;  /* axis ticks */
  --mwg-grey-3:   #9098a4;  /* micro-label text, captions */
  --mwg-grey-2:   #8a8f98;  /* secondary value text */
  --mwg-grey-1:   #6b7280;  /* tertiary copy, italic notes */
  --mwg-ink-2:    #4a4a4a;  /* reading copy */
  --mwg-ink:      #1a1a1a;  /* headings, primary text */

  /* --- Signal --- */
  --mwg-red:        #d11f3a;  /* the one accent: rules, links, active */
  --mwg-red-press:  #b01830;  /* pressed / darker */
  --mwg-red-wash:   rgba(209, 31, 58, 0.06); /* selected-row tint */

  /* --- Data ink --- */
  --mwg-navy:       #2b3a52;  /* primary data mark, "winner" */
  --mwg-slate:      #1e293b;  /* tooltip ground */

  /* --- Categorical data palette (muted, desaturated) --- */
  --mwg-data-1:  #2b3a52;
  --mwg-data-2:  #3b6ea5;
  --mwg-data-3:  #7c8597;
  --mwg-data-4:  #b0667a;
  --mwg-data-5:  #4f8a7b;
  --mwg-data-6:  #c08a3e;
  --mwg-data-7:  #a23b4a;
  --mwg-data-8:  #4e9a6a;
  --mwg-data-9:  #5577aa;
  --mwg-data-10: #8a6ea8;
  --mwg-data-11: #c2566a;
  --mwg-data-12: #3d8aa0;

  /* ============================================================
     Semantic aliases — prefer these in components.
     ============================================================ */
  --text-strong:    var(--mwg-ink);
  --text-body:      var(--mwg-ink-2);
  --text-muted:     var(--mwg-grey-2);
  --text-faint:     var(--mwg-grey-3);
  --text-on-accent: var(--mwg-white);
  --text-link:      var(--mwg-red);

  --surface-page:   var(--mwg-white);
  --surface-card:   var(--mwg-white);
  --surface-well:   var(--mwg-paper);
  --surface-tooltip: var(--mwg-slate);

  --border-default: var(--mwg-line);
  --border-control: var(--mwg-line-2);
  --border-faint:   var(--mwg-line-3);

  --accent:         var(--mwg-red);
  --accent-press:   var(--mwg-red-press);
  --accent-wash:    var(--mwg-red-wash);
  --data-ink:       var(--mwg-navy);

  /* status (chart legend) */
  --status-win:       var(--mwg-navy);
  --status-nominee:   var(--mwg-grey-2);
  --status-selection: var(--mwg-grey-5);
}