/* ============================================================
 * bNear — Design Tokens
 * ============================================================
 * From design_handoff_bnear/README.md. Colours, type, radii and
 * shadows there are final; this file is their single source.
 * Component CSS references these and hard-codes nothing.
 *
 * Two names for most things: the handoff's --bn-* / --color-accent-*
 * spellings, and the shorter aliases the existing stylesheets
 * already use. Same values, so either spelling is safe.
 * ============================================================ */

:root {
  /* ── Surfaces ─────────────────────────────────────────────── */
  --bn-bg:    #fbfbfa;   /* page ground, warm off-white */
  --bn-card:  #ffffff;
  --bn-ink:   #16211f;   /* primary text, dark buttons */
  --bn-muted: #6d7b78;
  --bn-line:  #e7eceb;

  /* ── Accent ramp ──────────────────────────────────────────── */
  --color-accent:     #0f9e8c;
  --color-accent-100: #e6f6f3;   /* tinted fills, chips */
  --color-accent-200: #c2e9e2;   /* chip / card borders */
  --color-accent-300: #93d8cc;   /* 36.5 on the scale */
  --color-accent-400: #4cc0ae;   /* link hover on dark */
  --color-accent-600: #0b8172;   /* primary button hover */
  --color-accent-700: #086559;   /* accent text on light, AA-safe */
  --color-accent-800: #064b42;   /* text on accent-100 fills */

  --bn-coral:  #f9484a;   /* 40, destructive, the heart */
  --bn-amber:  #ffb347;   /* 38, warning surfaces */
  /* Amber is a surface colour — as text on white it is unreadable. This is
     the ink that goes with it, used for "cancelling, but still inside the
     month you paid for" in both consoles. */
  --bn-amber-ink:  #8a5a12;
  --bn-amber-bg:   #fffaf0;
  --bn-amber-line: #ffe4b8;
  --bn-orange: #ff7a45;   /* 39 */

  /* ── Danger + warning surfaces ────────────────────────────── */
  --bn-danger-bg:     #fff6f6;
  --bn-danger-line:   #ffd9d9;
  --bn-danger-head:   #9c1f21;
  --bn-danger-body:   #a8544f;
  --bn-danger-btn:    #f9484a;
  --bn-danger-btn-hi: #d93b3d;

  --bn-warn-bg:   #fffaf0;
  --bn-warn-line: #ffe4b8;
  --bn-warn-head: #8a5a12;
  --bn-warn-body: #9a7134;

  /* ── Temperature scale ────────────────────────────────────── */
  --t-365: #93d8cc;
  --t-370: #0f9e8c;
  --t-380: #ffb347;
  --t-390: #ff7a45;
  --t-400: #f9484a;

  /* ── Type ─────────────────────────────────────────────────── */
  /* Body copy is weight 300 on purpose — the design is light and
     airy, not the usual 400. */
  --bn-font: 'Archivo', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --bn-wordmark: 'Nunito', var(--bn-font);
  --bn-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-h1-page:  30px;   /* dev page H1, weight 200 */
  --fs-h1-login: 26px;   /* login H1, weight 200 */
  --fs-stat:     40px;   /* stat figure, weight 200 */
  --fs-h2:       19px;   /* section, weight 500 */
  --fs-h3:       16px;   /* card, weight 500 */
  --fs-lede:     19px;   /* hero lede, weight 300 */
  --fs-body:     15px;
  --fs-body-sm:  14px;
  --fs-meta:     13px;
  --fs-cap:      12px;   /* table headers, uppercase */

  /* ── Radii ────────────────────────────────────────────────── */
  --r-card:    22px;
  --r-card-lg: 26px;   /* landing */
  --r-tile:    16px;
  --r-pill:    999px;
  /* A near-square corner, for text a person types into. A pill reads as a
     control you press; a field you write a paragraph in should read as a
     sheet of paper, and at this size the corner is a softening rather than a
     shape. Added 2026-09-06 for the conversation composer. */
  --r-edge:    6px;

  /* ── Spacing ──────────────────────────────────────────────── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  22px;
  --s-6:  28px;
  --s-7:  34px;
  --s-8:  44px;

  /* ── Elevation — soft and rare ────────────────────────────── */
  --shadow-card:  0 18px 40px rgba(22, 33, 31, 0.07);
  --shadow-login: 0 18px 50px rgba(22, 33, 31, 0.07);
  --shadow-teal:  0 6px 18px rgba(15, 158, 140, 0.26);
  /* The same lift in the heart's colour, for the landing's one CTA. */
  --shadow-heart: 0 6px 18px rgba(249, 72, 74, 0.26);
  --shadow-heart-hi: 0 12px 26px rgba(249, 72, 74, 0.32);
  --shadow-teal-hi: 0 12px 26px rgba(15, 158, 140, 0.32);

  /* ── Motion ───────────────────────────────────────────────── */
  --ease-lift: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Referenced by admin.css and main.css but never defined, so every one of
     these was falling back to `unset` and inheriting — the filter pills and
     the status chip have been rendering at body size, not at 13px. Values are
     the sizes those rules were written for. */
  --fs-base: 16px;              /* admin body */
  --fs-help: var(--fs-meta);    /* pills, chips, helper text */
  --fs-kpi:  var(--fs-stat);    /* metric figures */
  --fs-lg:   17px;              /* member-app primary button */

  /* ── Aliases for the existing stylesheets ─────────────────── */
  --bg:        var(--bn-bg);
  --bg-elev:   var(--color-accent-100);
  --card:      var(--bn-card);
  --card-hi:   var(--color-accent-100);
  --line:      var(--bn-line);
  --line-hi:   var(--color-accent-200);
  --text:      var(--bn-ink);
  --text-dim:  var(--bn-muted);
  --text-faint: #a8b2af;
  --accent:      var(--color-accent);
  --accent-deep: var(--color-accent-700);
  --accent-hi:   var(--color-accent-400);
  --accent-tint: var(--color-accent-100);
  --heart:     var(--bn-coral);
  --danger:    var(--bn-coral);
  --warn:      var(--bn-amber);
  --on-accent: #ffffff;
  --r-xs: var(--r-edge);
  --r-sm: var(--r-tile);
  --r-md: var(--r-pill);
  --r-lg: var(--r-card);
  --shadow-1: var(--shadow-card);
}

::selection { background: rgba(15, 158, 140, 0.16); }