/* FieldHydro — design tokens. Single source of truth.
 *
 * This block used to be copy-pasted into six pages' <style> elements, which is the same
 * duplication that let ar-cross-section.html drift into a SyntaxError. Every /field/ page
 * now links this file FIRST; no page defines its own :root.
 *
 * ── Where the palette comes from ────────────────────────────────────────────────
 * Not "dark mode with a blue accent". The colours are lifted from the printed artefacts
 * this instrument exists to check:
 *
 *   ground/panels  a bathymetric depth ramp — deep water is teal-biased, never neutral
 *                  black, which is why the page reads as chart stock rather than a code
 *                  editor.
 *   --gauge        staff-gauge cyan. Reserved for live, measured, current things.
 *   --revision     the magenta USGS overprints on a photorevised quadrangle to mark what
 *                  changed since the last survey. That is precisely what FieldHydro
 *                  measures — where the map and the ground disagree — so it is reserved
 *                  for exactly that and never used as decoration.
 *   --caution      the amber already used for DEMO provenance banners. Kept: an honest
 *                  convention worth preserving.
 *
 * ── Type ────────────────────────────────────────────────────────────────────────
 * IBM Plex, all three widths. Condensed grotesques are the native lettering of map
 * labels and drawing sheets, so the WIDTH AXIS encodes role: condensed = label/heading,
 * regular = prose, mono = a measured quantity. Every face has a real fallback stack, so
 * a blocked font request degrades to a sane system pairing rather than Times.
 */

:root{
  /* ── Depth ramp ── */
  --abyssal:  #0b1a24;   /* page ground */
  --shelf:    #10242f;   /* panel */
  --shoal:    #16303d;   /* raised / inset surface */
  --rule:     #1f4152;   /* hairlines, borders */

  /* ── Ink ── */
  --chart:    #dceaf0;   /* primary ink, cool chart-stock white */
  --sounding: #8fb0bf;   /* secondary ink, the grey-blue of depth soundings */

  /* ── Signal ── */
  --gauge:    #4cc2e0;   /* live / measured / primary action */
  --gauge-lo: #2b8fa8;   /* gauge, pressed or subdued */
  --revision: #e0489b;   /* model-vs-reality disagreement. Nothing else. */
  --caution:  #f0a23c;   /* demo + provenance banners */
  --fault:    #ff6b6b;   /* errors */
  --sound:    #4ade80;   /* pass / valid */

  /* Tap-to-mark discrepancy classes. These are the literal model-vs-reality readings,
   * so they belong to --revision. Severity mapping is unchanged from the previous
   * red/blue pair: the alarming class stays alarming, the calm class stays calm — only
   * the hues move onto the palette. */
  --mark-wet-bad: var(--revision);  /* modelled wet, observed dry — map over-predicts */
  --mark-dry-bad: var(--gauge);     /* modelled dry, observed wet — water off the map */

  /* ── Type ── */
  --display: 'IBM Plex Sans Condensed', 'Roboto Condensed', 'Segoe UI', system-ui, sans-serif;
  --body:    'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale. Deliberately short — an instrument needs few sizes, used consistently. */
  --t-micro: 11px;
  --t-fine:  12px;
  --t-data:  13px;
  --t-body:  14.5px;
  --t-lead:  17px;
  --t-sub:   22px;
  --t-head:  30px;
  --t-hero:  clamp(30px, 4.4vw, 46px);

  /* ── Legacy aliases ───────────────────────────────────────────────────────────
   * Six pages and ~1,500 lines of existing CSS reference these names. They now point
   * at the new palette, so the redesign propagates without a risky find-and-replace
   * through every rule. New CSS should use the names above. */
  --bg:     var(--abyssal);
  --panel:  var(--shelf);
  --panel2: var(--shoal);
  --line:   var(--rule);
  --ink:    var(--chart);
  --dim:    var(--sounding);
  --accent: var(--gauge);
  --warn:   var(--caution);
  --bad:    var(--fault);
  --good:   var(--sound);
}

/* Base typography. Pages set their own layout; this only fixes the faces + rhythm. */
body{
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4{
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.16;
}
h2{ font-size: var(--t-sub); }
h3{ font-size: var(--t-lead); }

/* Numbers are measurements: give every one of them tabular, slashed-zero mono so a
 * column of elevations lines up and 0 never reads as O. */
code, kbd, samp, pre, .mono, [data-fh], .fh-stat strong{
  font-family: var(--mono);
  font-variant-numeric: tabular-nums slashed-zero;
}

/* ── Eyebrow: a small mono label that sits on a rule, the way a section callout sits
 * on a drawing sheet. Used instead of a second heading level. ── */
.eyebrow{
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sounding);
}

/* ── The datum rule ───────────────────────────────────────────────────────────────
 * The page's signature. A labelled hairline that content is measured against, in the
 * same visual language the AR view uses when it draws the computed horizon across the
 * water. Everything in dam safety is referenced to a datum; this instrument's whole job
 * is finding where the water actually is relative to one. */
.datum{
  position: relative;
  border-top: 1px solid var(--gauge);
  margin: 0;
  /* the faint "water" that always sits below a datum line */
  background: linear-gradient(180deg, color-mix(in srgb, var(--gauge) 14%, transparent), transparent 62%);
  height: 1px;
}
.datum::after{
  content: attr(data-label);
  position: absolute;
  right: 0;
  top: -1.35em;
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: .08em;
  color: var(--gauge);
  background: var(--abyssal);
  padding-left: .5rem;
}