/* ============================================================
   Wanderers: shared design tokens
   Flat, matte, hairline, dark-first.
   ============================================================ */

:root {
  /* --- Canvas & neutral ink ramp: TRUE grays (R=G=B, hue 0 sat 0).
     --void is the one intentional tinted exception (deep space stays cool). --- */
  --bg:        hsl(0 0% 5%);    /* near-black canvas (eigengrau, neutralized) */
  --bg-panel:  hsl(0 0% 7%);    /* faint panel lift */
  --void:      hsl(240 8% 4%);  /* deep-space backdrop: the ONE tinted exception, cool-black in BOTH themes */
  --ink:       hsl(0 0% 93%);   /* primary near-white ink */
  --ink-2:     hsl(0 0% 66%);   /* muted */
  --ink-3:     hsl(0 0% 49%);   /* fainter labels (raised from 44% to clear WCAG AA 4.5:1) */
  --ink-4:     hsl(0 0% 26%);   /* grid, ticks (decorative) */
  --hairline:  hsl(0 0% 20%);   /* default solid hairline (decorative) */

  /* --- Color primitives: each hue's value, defined once and THEME-STABLE
     (identical on light + dark, like the design system's rainbow). Vibrant,
     tuned to read on black, white, and the gray ramp. Only the neutral ramp
     above flips per theme. --- */
  --red:    hsl(358 85% 52%);
  --orange: hsl(28  95% 53%);
  --yellow: hsl(45  95% 52%);
  --green:  hsl(150 68% 44%);
  --blue:   hsl(212 88% 54%);
  --purple: hsl(270 82% 60%);

  /* --- Status/signal aliases (functional: alert, warning, safe, info). --- */
  --signal-red:    var(--red);
  --signal-orange: var(--orange);
  --signal-yellow: var(--yellow);
  --signal-green:  var(--green);
  --signal-blue:   var(--blue);
  --signal-purple: var(--purple);

  /* Legible red for small red TEXT (offline / anomaly / live readouts): a shade
     that clears WCAG AA on the theme's own background. Vibrant --signal-red stays
     for lamps, marks and fills. Flipped in the light @media block below. */
  --red-text: var(--hue-red-hi);

  /* --- Entity thread aliases: a record's accent hue, chosen by plain name. --- */
  --hue-red:    var(--red);
  --hue-orange: var(--orange);
  --hue-yellow: var(--yellow);
  --hue-green:  var(--green);
  --hue-blue:   var(--blue);
  --hue-purple: var(--purple);
  --hue-neutral: var(--ink-2);   /* the no-accent tone (muted ink) */

  /* --- Kinship shades: each hue a step lighter (-hi) and deeper (-lo), so
     related entities can share a family and differ by shade, and HUD structure
     can tint from a hue. mid = the base --hue-* above. Theme-stable: one set for
     both themes (like the base hues) - only the neutral ramp flips. --- */
  --hue-red-hi:    hsl(358 81% 65%);  --hue-red-lo:    hsl(358 88% 39%);
  --hue-orange-hi: hsl(28 91% 66%);   --hue-orange-lo: hsl(28 98% 40%);
  --hue-yellow-hi: hsl(45 91% 65%);   --hue-yellow-lo: hsl(45 98% 39%);
  --hue-green-hi:  hsl(150 64% 57%);  --hue-green-lo:  hsl(150 71% 31%);
  --hue-blue-hi:   hsl(212 84% 67%);  --hue-blue-lo:   hsl(212 91% 41%);
  --hue-purple-hi: hsl(270 78% 73%);  --hue-purple-lo: hsl(270 85% 47%);

  /* --- Type --- */
  --mono: "SFMono-Regular", "SF Mono", "JetBrains Mono", "Roboto Mono",
          ui-monospace, Menlo, Consolas, monospace;
  --tracking: 0.18em;
  --tracking-wide: 0.28em;

  /* --- Metrics --- */
  --gap: 24px;
}

/* ============================================================
   Light mode = honor system preference. Dark is still primary.
   Only the neutral ramp flips; hues are theme-stable; --void stays black.
   ============================================================ */
@media (prefers-color-scheme: light) {
  :root {
    --bg:        hsl(0 0% 92%);    /* off-white drafting paper (neutralized) */
    --bg-panel:  hsl(0 0% 89%);
    --void:      hsl(240 8% 4%);   /* space is STILL cool-black (the one exception) */
    --ink:       hsl(0 0% 16%);    /* dark plotter ink */
    --ink-2:     hsl(0 0% 34%);
    --ink-3:     hsl(0 0% 41%);    /* darkened from 50% to clear WCAG AA 4.5:1 */
    --ink-4:     hsl(0 0% 76%);    /* faint blueprint grid (decorative) */
    --hairline:  hsl(0 0% 70%);
    --red-text:  var(--hue-red-lo);   /* deeper red is the legible one on white */
    /* other hues + kinship shades are theme-stable - defined once in :root above. */
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum" 1, "zero" 1;
}

/* faint coordinate grid of plus-marks behind everything */
.grid-field {
  background-image:
    radial-gradient(circle, var(--ink-4) 0.6px, transparent 0.7px);
  background-size: 32px 32px;
  background-position: -1px -1px;
}

/* thread-colored cross-links: bright ink at rest, thread hue on hover.
   Visited keeps the neutral rest color (no distinct visited state).
   Each link sets its own --thread. LVHA order.
   Hover snaps (no color transition) so it never washes through intermediate shades. */
.thread-link {
  --thread: var(--ink-2);
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink-4);
}
.thread-link:visited { color: var(--ink); }
.thread-link:hover   { color: var(--thread); border-bottom-color: var(--thread); }