/* ============================================================
   EFFECTS — radii, shadows, transitions
   Rounded cards + soft shadows; pill buttons; circular badges
   ============================================================ */
:root {
  /* Corner radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;    /* default card */
  --radius-xl: 24px;    /* large feature cards */
  --radius-photo: 20px; /* rounded-corner photos */
  --radius-pill: 999px; /* buttons, chips, badges */

  /* Soft shadows (cool navy-tinted, never harsh black) */
  --shadow-xs: 0 1px 2px rgba(10, 37, 64, 0.06);
  --shadow-sm: 0 2px 8px rgba(10, 37, 64, 0.07);
  --shadow-md: 0 8px 24px rgba(10, 37, 64, 0.09);
  --shadow-lg: 0 18px 44px rgba(10, 37, 64, 0.12);
  --shadow-cta: 0 8px 20px rgba(242, 101, 34, 0.32); /* orange glow on CTAs */

  /* Ring / focus */
  --ring-accent: 0 0 0 3px rgba(242, 101, 34, 0.35);
  --ring-navy: 0 0 0 3px rgba(10, 37, 64, 0.25);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 320ms; /* @kind other */
}