/* theme.css: MEC Wheel colour tokens, the self-hosted font, and wheel classes.
 * Hex values are pipeline/layout.py preview approximations of the print swatches
 * (not WHO-issued). Font weights and stretch are set by wheel.js on the elements,
 * not here, so measured and drawn text cannot drift apart. */

@font-face {
  font-family: 'MEC Archivo';
  src: url('fonts/archivo-subset.woff2') format('woff2-variations'), url('fonts/archivo-subset.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: block;
}

:root {
  --mec-navy: #00205C;   /* MEC Blue, Pantone 281 C */
  --mec-blue: #0083C9;   /* MEC Light Blue */
  --mec-green: #00A651;
  --mec-amber: #F7A81B;
  --mec-red: #D71920;
  --mec-paper: #fff;
  --mec-stroke: 0.6px;            /* print: 0.35 pt white cell strokes */
  --mec-highlight: #fff;
  --mec-font: 'MEC Archivo', 'Arial Narrow', sans-serif;
}

.mec-wheel { display: block; overflow: visible; -webkit-tap-highlight-color: transparent; }
.mec-wheel:focus { outline: none; }
.mec-wheel:focus-visible .mec-highlight { stroke-width: 3px; }

.mec-group { fill: var(--mec-navy); stroke: var(--mec-paper); stroke-width: var(--mec-stroke); }
.mec-sub { fill: var(--mec-blue); stroke: var(--mec-paper); stroke-width: var(--mec-stroke); }
.mec-cell path { stroke: var(--mec-paper); stroke-width: var(--mec-stroke); }
.mec-cell.is-green path { fill: var(--mec-green); }
.mec-cell.is-amber path { fill: var(--mec-amber); }
.mec-cell.is-red path { fill: var(--mec-red); }
.mec-cell.is-blank path { fill: var(--mec-paper); stroke: #c8cfdb; }
.mec-hub { fill: var(--mec-navy); }

.mec-t-group { fill: var(--mec-paper); }
.mec-t-sub { fill: var(--mec-navy); }
.mec-t-value { fill: var(--mec-paper); }              /* white on every colour, as in print */
.mec-t-method, .mec-t-title, .mec-t-legend { fill: var(--mec-paper); }
.mec-wheel text { pointer-events: none; }

.mec-highlight { fill: none; stroke: var(--mec-highlight); stroke-width: 2px; stroke-linejoin: round; }

.mec-cover-disc { fill: var(--mec-navy); }
.mec-cover-method.is-even .mec-cover-band { fill: var(--mec-navy); }
.mec-cover-method.is-odd .mec-cover-band { fill: var(--mec-blue); }
.mec-legend-strip.is-green { fill: var(--mec-green); }
.mec-legend-strip.is-red { fill: var(--mec-red); }
.mec-legend-strip.is-amber { fill: var(--mec-amber); }
.mec-rivet { fill: #9aa3b2; stroke: #5d6575; stroke-width: 1px; }