/* ============================================================
   Biome.blue — Radius, border, shadow, motion tokens
   Soft-tech surfaces: gentle rounding, cool low shadows, a brand
   glow for "live / verified" states, and calm cubic easing.
   ============================================================ */

:root {
  /* ---- Corner radius ---- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;   /* default card / input */
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-pill: 999px;

  /* ---- Borders ---- */
  --border-hairline: 1px solid var(--bb-line);
  --border-card:     1px solid color-mix(in srgb, var(--bb-line) 80%, transparent);
  --border-strong-w: 1.5px solid var(--bb-slate-soft);

  /* ---- Shadows (cool-tinted, never neutral grey) ---- */
  --shadow-xs:   0 1px 2px rgba(14, 42, 71, 0.06);
  --shadow-sm:   0 2px 6px rgba(14, 42, 71, 0.07);
  --shadow-md:   0 6px 18px rgba(14, 42, 71, 0.10);
  --shadow-lg:   0 16px 40px rgba(14, 42, 71, 0.14);
  --shadow-xl:   0 28px 64px rgba(11, 53, 110, 0.18);

  /* Brand glow — "live", "verified", focus emphasis */
  --glow-brand:  0 0 0 1px color-mix(in srgb, var(--bb-azure) 40%, transparent),
                 0 8px 28px color-mix(in srgb, var(--bb-azure) 28%, transparent);
  --glow-life:   0 0 24px color-mix(in srgb, var(--bb-life) 45%, transparent);

  /* inner sheen for sunken / data wells */
  --inset-well:  inset 0 1px 2px rgba(14, 42, 71, 0.08);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);   /* @kind other */ /* calm decel */
  --ease-emphasis: cubic-bezier(0.34, 1.4, 0.5, 1);     /* @kind other */ /* slight overshoot */
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);      /* @kind other */
  --dur-fast:    120ms;  /* @kind other */
  --dur-base:    220ms;  /* @kind other */
  --dur-slow:    420ms;  /* @kind other */

  /* ---- Backdrop blur (glassy hero card from the brand imagery) ---- */
  --blur-glass:  saturate(140%) blur(14px); /* @kind other */
}