/* ============================================================
   SHADOWS — soft, low-spread, cool-tinted (rgba 16,24,40)
   ============================================================ */
:root {
  /* elevation scale */
  --shadow-card: 0 1px 3px rgba(16, 24, 40, 0.04);   /* resting card */
  --shadow-sm:   0 1px 3px rgba(16, 24, 40, 0.06);
  --shadow-md:   0 4px 14px rgba(16, 24, 40, 0.10);  /* hover / popover */
  --shadow-lg:   0 16px 40px rgba(16, 24, 40, 0.16); /* dialog / overlay */

  /* coloured glow under the primary button */
  --shadow-primary: 0 8px 18px rgba(45, 80, 230, 0.22);

  /* focus ring (input / interactive) */
  --ring-focus: 0 0 0 3px rgba(45, 80, 230, 0.12);
}