/* ============================================================
 * bNear — Design Tokens
 * ============================================================
 * Structure borrowed from MountainAlert's admin tokens: the same
 * families, the same radii, the same 4px spacing scale and the
 * same type scale. Only the hues are bNear's — teal accent, the
 * heart red, and the temperature ramp.
 *
 * Any component CSS references these; nothing hard-codes a value.
 *
 * Token families:
 *   Surfaces : --bg, --bg-elev, --card, --card-hi
 *   Lines    : --line, --line-hi
 *   Brand    : --accent*, --heart, --danger, --warn
 *   Text     : --text, --text-dim, --text-faint
 *   Radii    : --r-sm .. --r-pill
 *   Spacing  : --s-1 .. --s-8
 *   Shadows  : --shadow-1, --shadow-pop
 *   Type     : --fs-cap .. --fs-kpi
 *   Ramp     : --t-365 .. --t-400
 * ============================================================ */

:root {
  /* ── Surfaces ─────────────────────────────────────────────── */
  --bg:        #f4f7f6;
  --bg-elev:   #eef2f1;
  --card:      #ffffff;
  --card-hi:   #f1f6f5;

  /* ── Lines ────────────────────────────────────────────────── */
  --line:      rgba(16, 40, 36, 0.12);
  --line-hi:   rgba(16, 40, 36, 0.24);

  /* ── Brand ────────────────────────────────────────────────── */
  --accent:      #0f9e8c;
  --accent-deep: #0b7d6f;
  --accent-hi:   #12b39e;
  --accent-tint: rgba(15, 158, 140, 0.10);
  --heart:       #ff4757;
  --danger:      #d42b39;
  --warn:        #c97a12;
  --on-accent:   #ffffff;

  /* ── Text ─────────────────────────────────────────────────── */
  --text:       #16191f;
  --text-dim:   #566b67;
  --text-faint: #8a9a97;

  /* ── Radii ────────────────────────────────────────────────── */
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-pill: 999px;

  /* ── Spacing (4 → 64) ─────────────────────────────────────── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;

  /* ── Shadows (re-weighted for a light ground) ─────────────── */
  --shadow-1:   0 1px 2px rgba(16, 40, 36, 0.05), 0 6px 20px rgba(16, 40, 36, 0.06);
  --shadow-pop: 0 12px 32px rgba(16, 40, 36, 0.14), 0 0 0 1px var(--line);

  /* ── Type scale ───────────────────────────────────────────── */
  --fs-cap:   11px;   /* uppercase labels */
  --fs-help:  12px;   /* helper text */
  --fs-body:  13px;   /* secondary copy */
  --fs-base:  14px;   /* default UI text */
  --fs-lg:    16px;   /* prominent labels */
  --fs-h3:    20px;   /* section titles */
  --fs-title: 22px;   /* page title */
  --fs-kpi:   36px;   /* KPI value */

  /* ── Temperature ramp ─────────────────────────────────────── */
  /* Picked for a light ground: these carry the selected reading as
     text, not just as a bar, so they need real contrast on white. */
  --t-365: #2f7fe0;
  --t-370: #0f9e8c;
  --t-380: #c97a12;
  --t-390: #dd551d;
  --t-400: #d42b39;
}