/* ──────────────────────────────────────────────────────────────────────────
   Hub Data Infrastructure — shared design tokens (single source of truth).

   The canonical brand palette, neutrals, hairlines, radius scale and font
   stacks, previously duplicated inline in every page. Pages link this first,
   then keep only their PAGE-SPECIFIC tokens inline (--bg, --maxw, and role /
   status / method / impact palettes). Values here match the originals exactly,
   so linking + removing the inline duplicates is a no-op visually.
   ────────────────────────────────────────────────────────────────────────── */
:root {
  /* surfaces / neutrals */
  --surface: #ffffff;
  --surface-2: #eef5ec;
  --mint: #eaf3ea;
  --ink: #10281a;
  --ink-2: #32423a;
  --muted: #59645d;
  --faint: #667069;   /* ~4.9:1 on white — AA for small meta text (was #7c857f ≈3.6:1) */
  --ghost: #aab3ac;
  --hair: rgba(16, 40, 26, .15);
  --hair-2: rgba(16, 40, 26, .08);

  /* brand */
  --green: #1C5B2E;
  --green-dk: #154523;
  --leaf: #3CAB5C;
  --teal: #003B49;
  --teal-dk: #01313C;
  --brown: #7a5230;
  --brown-dk: #5f4026;
  --brown-tint: #f1e9df;
  /* accent kept named --ochre* so existing rules re-colour to the brand green */
  --ochre: #1C5B2E;
  --ochre-dk: #175027;

  /* radius scale */
  --r-control: 8px;
  --r-card: 14px;
  --r-pill: 999px;

  /* type */
  --serif: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: 'Manrope', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --code: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}

/* ──────────────────────────────────────────────────────────────────────────
   Platform-wide accessibility & mobile baseline (loaded by every page).
   Pages set their own layout inline; these rules cover keyboard focus, reduced
   motion, media safety, and the shared sticky top-nav on small screens. The
   nav rules are scoped to a media query (and use !important only where a page's
   inline `.nav-links` rule would otherwise win) so desktop is untouched.
   ────────────────────────────────────────────────────────────────────────── */

/* Visible keyboard focus everywhere (mouse clicks stay clean via :focus-visible). */
:where(a, button, input, select, textarea, [tabindex], summary):focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Media never forces horizontal page scroll. */
img, svg, video, canvas { max-width: 100%; }

/* Screen-reader-only utility for icon-only controls / skip links. */
.sr-only {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* Respect users who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Shared top-nav: on small screens let the link row shrink and scroll instead of
   overflowing the page. Works across index/systems/docs/dashboard/dataset/api/
   impact/onboarding, which all use `.nav-links` inside a flex `.nav-inner`. */
@media (max-width: 700px) {
  .nav-links {
    min-width: 0 !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links > * { flex: 0 0 auto; }
}