/* ============================================================
   THE MEP SHOP — ELEVATION, RADII & BORDERS
   The brand reads industrial & precise: modest radii,
   crisp hairline borders, restrained shadows.
   ============================================================ */

:root {
  /* ---- Corner radii ---- */
  --radius-none: 0;
  --radius-xs:  3px;
  --radius-sm:  5px;
  --radius-md:  8px;    /* default — cards, inputs, buttons */
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 22px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* ---- Border widths ---- */
  --border-hairline: 1px;
  --border-medium:   1.5px;
  --border-thick:    2px;
  --border-heavy:    3px;   /* brand accent underbar (logo) */

  /* ---- Shadows (cool slate-tinted, low spread) ---- */
  --shadow-xs:  0 1px 2px rgba(14, 17, 19, 0.06);
  --shadow-sm:  0 1px 3px rgba(14, 17, 19, 0.08), 0 1px 2px rgba(14, 17, 19, 0.04);
  --shadow-md:  0 4px 12px rgba(14, 17, 19, 0.08), 0 2px 4px rgba(14, 17, 19, 0.05);
  --shadow-lg:  0 12px 28px rgba(14, 17, 19, 0.12), 0 4px 8px rgba(14, 17, 19, 0.06);
  --shadow-xl:  0 24px 48px rgba(14, 17, 19, 0.16), 0 8px 16px rgba(14, 17, 19, 0.08);

  /* Brand-tinted shadow for primary/blue surfaces */
  --shadow-brand: 0 8px 24px rgba(0, 132, 204, 0.28);

  /* Focus ring (see colors.css for --focus-ring) */
  --ring-offset: 2px;
}