/* ============================================================
   Carebridge — Spacing, radii, shadows, motion, layout
   8px base grid. Generous whitespace is a brand requirement.
   ============================================================ */
:root {
  /* ---- Spacing (8px base) -------------------------------- */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;
  --space-40:  160px;

  /* Vertical rhythm for marketing sections */
  --section-y:        clamp(64px, 9vw, 128px);
  --section-y-tight:  clamp(48px, 6vw, 88px);

  /* ---- Radii --------------------------------------------- */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-2xl:  36px;
  --radius-pill: 999px;

  /* ---- Borders ------------------------------------------- */
  --border-hair: 1px;    /* @kind other */
  --border-thick: 1.5px; /* @kind other */

  /* ---- Shadows (soft, low-spread, navy-tinted) ----------- */
  --shadow-xs:  0 1px 2px rgba(21, 42, 71, 0.06);
  --shadow-sm:  0 2px 6px rgba(21, 42, 71, 0.06), 0 1px 2px rgba(21, 42, 71, 0.05);
  --shadow-md:  0 10px 24px -10px rgba(21, 42, 71, 0.16), 0 2px 6px rgba(21, 42, 71, 0.06);
  --shadow-lg:  0 24px 48px -18px rgba(21, 42, 71, 0.22), 0 6px 14px -8px rgba(21, 42, 71, 0.10);
  --shadow-xl:  0 40px 80px -28px rgba(14, 33, 72, 0.30), 0 10px 24px -14px rgba(14, 33, 72, 0.14);
  --shadow-teal: 0 16px 40px -16px rgba(28, 168, 156, 0.45);
  --shadow-focus: 0 0 0 4px rgba(28, 168, 156, 0.30);

  /* ---- Motion (subtle, calm, never bouncy) --------------- */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);  /* @kind other */
  --ease-inout: cubic-bezier(0.65, 0.05, 0.36, 1);  /* @kind other */
  --ease-soft:  cubic-bezier(0.33, 0, 0.2, 1);      /* @kind other */
  --dur-fast:   140ms;  /* @kind other */
  --dur-base:   240ms;  /* @kind other */
  --dur-slow:   420ms;  /* @kind other */
  --dur-reveal: 640ms;  /* @kind other */

  /* ---- Layout -------------------------------------------- */
  --container-max: 1200px;
  --container-wide: 1320px;
  --container-text: 720px;
  --gutter: clamp(20px, 5vw, 56px);
  --nav-h: 76px;
}