/* -----------------------------------------------------------------------
   HamiltonVotes.ca — production design tokens & base reset
   Used by the live static tools: events-calendar.html, event-editor.html.

   This is intentionally minimal — just custom properties + a base reset.
   Page-specific layout/components live inline in each page's own <style>.
   Wireframe-only styles (page-tabs, .wf frames, sketch mode, etc.) live in
   /wireframes/styles-tpr.css and should never be merged back in here.
   ----------------------------------------------------------------------- */

:root {
  /* Palette + type adapted from the TPR Open Data hub (data.thepublicrecord.ca/buildingpermits) */
  --ink: #14181C;
  --ink-soft: #33404D;
  --ink-faint: #636d78;
  --paper: #ffffff;
  --paper-warm: #F4F5F6;   /* hub --tint */
  --rule: #14181C;
  --rule-light: #e9ecee;
  --line: #e9ecee;
  --line2: #dde1e5;
  --line3: #ccd3d9;
  --accent: #1D5FBF;       /* hub --acc */
  --accent-soft: #e8f0fb;
  --highlight: #fed850;
  --link-blue: #1D5FBF;
  --link-blue-on-dark: #6ea3e8;  /* hub dark-theme accent */
  --link-blue-hover: #174c99;

  --serif: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif-display: 'Archivo Black', 'Archivo', system-ui, sans-serif;
  --sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }

/* Base link colors — pages override with component-specific styles. */
a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--link-blue-hover); }

/* Visible keyboard focus everywhere */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
/* Black surfaces (header link rows, section bands, players): blue-on-black is too dim for a focus ring */
.shs-nav a:focus-visible, .shs-races a:focus-visible, .sec-band a:focus-visible { outline-color: #fff; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.6;
}

h1, h2, h3, h4 { font-family: var(--serif-display); font-weight: 400; line-height: 1.15; letter-spacing: -0.01em; }
/* Small uppercase labels use the hub's mono */
body .lbl, body .eyebrow:not(h1):not(h2), body .ab-eyebrow:not(h1):not(h2), body .tagline, body .cgroup-h { font-family: var(--mono); }
body { -webkit-font-smoothing: antialiased; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 10px 16px;
  z-index: 100;
}
.skip-link:focus {
  left: 12px;
  top: 12px;
}

/* Respect the visitor's reduced-motion setting: no sliding toggles, smooth scroll or transitions */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}