/* ============================================================
   EFFECTS — radius, shadows, motion
   Cards are softly rounded with cool, low-opacity navy-tinted
   shadows. Buttons and chips are fully pill-shaped. Motion is
   quick and eased; reveals rise a touch and fade in.
   ============================================================ */

:root {
  /* ---- Radius ---- */
  --radius-sm: 7px;     /* chips, metric tags, small inputs */
  --radius: 14px;       /* default card / control */
  --radius-md: 11px;    /* inputs, icon tiles */
  --radius-lg: 22px;    /* large panels, member cards */
  --radius-xl: 28px;    /* CTA block */
  --radius-pill: 999px; /* buttons, eyebrows, badges */

  /* ---- Shadows (cool, navy-tinted) ---- */
  --shadow-sm: 0 1px 2px rgba(12, 32, 50, .06), 0 2px 8px rgba(12, 32, 50, .05);
  --shadow: 0 4px 14px rgba(12, 32, 50, .08), 0 18px 50px rgba(12, 32, 50, .10);
  --shadow-lg: 0 10px 30px rgba(12, 32, 50, .12), 0 40px 90px rgba(12, 32, 50, .16);

  /* glow used by the brand node / approved states */
  --shadow-gold: 0 0 0 3px rgba(191, 139, 58, .18);
  --shadow-brand: 0 8px 22px rgba(30, 78, 120, .28);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(.2, .7, .2, 1);  /* @kind other */
  --dur-fast: .15s;  /* @kind other */
  --dur: .2s;        /* @kind other */
  --dur-slow: .45s;  /* @kind other */
}