/* ============================================================
   Better Being — Elevation, radius, borders, motion
   The brand is architectural and precise, not soft. Corners are
   modest; "elevation" on the ink floor reads through field tone
   and hairlines more than through heavy drop shadows.
   ============================================================ */

:root {
  /* Corner radii — restrained. Nothing pill-soft except true pills. */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Borders */
  --border-width: 1px;
  --border-hairline-style: 1px solid var(--bb-hairline);

  /* Shadows — used sparingly. Depth comes from field tone first.
     Shadows are near-black to sit on the ink floor without haze. */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.55);

  /* Accent glows — signal, not decoration. Use on live / active only. */
  --glow-accent: 0 0 0 1px rgba(46, 111, 191, 0.4), 0 0 32px rgba(46, 111, 191, 0.25);
  --glow-cta: 0 0 32px rgba(168, 240, 198, 0.22);

  /* Motion — confident, quick, no bounce. Color as signal, not bouncing UI. */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);  /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);      /* @kind other */
  --dur-fast: 120ms;   /* @kind other */
  --dur-base: 200ms;   /* @kind other */
  --dur-slow: 360ms;   /* @kind other */

  /* Focus ring (accessibility) — uses the active territory accent */
  --focus-ring: 0 0 0 2px var(--bb-ink), 0 0 0 4px var(--accent);
}