/* ShipSimple — Radii, shadows, borders, motion
   Cards are softly rounded with light grey hairlines and subtle elevation.
   The brand pill button (hero "Get Your Instant Quote Now") is fully rounded
   black; product CTAs are green. Motion is quick and confident, no bounce. */

:root {
  /* ---- Corner radii ---- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;   /* default card */
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;  /* hero CTA, nav pills, chips */

  /* ---- Borders ---- */
  --border-width: 1px;
  --border-hairline: 1px solid var(--grey-200);

  /* ---- Elevation (cool navy-tinted shadows, never harsh black) ---- */
  --shadow-xs: 0 1px 2px rgba(8, 8, 94, 0.06);
  --shadow-sm: 0 2px 6px rgba(8, 8, 94, 0.08);
  --shadow-md: 0 8px 20px rgba(8, 8, 94, 0.10);
  --shadow-lg: 0 18px 40px rgba(8, 8, 94, 0.14);
  --shadow-brand: 0 10px 24px rgba(50, 205, 50, 0.30);   /* green CTA lift */
  --shadow-focus: 0 0 0 3px rgba(50, 205, 50, 0.35);     /* focus ring */

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-base:   200ms; /* @kind other */
  --dur-slow:   320ms; /* @kind other */

  /* ---- Z-index ---- */
  --z-header: 100; /* @kind other */
  --z-overlay: 900; /* @kind other */
  --z-modal: 1000; /* @kind other */
  --z-toast: 1100; /* @kind other */
}