/* ============================================================
   RADIUS, SHADOWS, MOTION
   Soft, lightly-rounded corners. Calm, low-contrast shadows.
   ============================================================ */
:root {
  /* Radii — slightly rounded, never pill-everything */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;    /* default cards / inputs */
  --radius-lg: 16px;    /* large cards / panels */
  --radius-xl: 24px;    /* hero media, feature blocks */
  --radius-pill: 999px; /* badges, chips, CTA buttons */

  /* Shadows — teal-tinted, soft, never harsh */
  --shadow-xs:  0 1px 2px rgba(10, 46, 59, 0.06);
  --shadow-sm:  0 2px 6px rgba(10, 46, 59, 0.07);
  --shadow-md:  0 6px 18px rgba(10, 46, 59, 0.09);
  --shadow-lg:  0 16px 38px rgba(10, 46, 59, 0.12);
  --shadow-cta: 0 8px 20px rgba(242, 106, 27, 0.28);   /* warm glow on orange CTA */
  --shadow-focus: 0 0 0 3px var(--ring);

  /* Motion — quick, calm, no bounce */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);     /* @kind other */
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);     /* @kind other */
  --dur-fast: 120ms;  /* @kind other */
  --dur-base: 200ms;  /* @kind other */
  --dur-slow: 320ms;  /* @kind other */
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}