/* ============================================================
   Route Star — Elevation: radii, borders, shadows
   Soft, low-spread, green-tinted shadows. Premium, never heavy.
   ============================================================ */

:root {
  /* ---- Corner radii ---- */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  10px;  /* inputs, buttons */
  --radius-lg:  14px;  /* cards */
  --radius-xl:  20px;  /* large panels */
  --radius-2xl: 28px;  /* hero / feature cards */
  --radius-full: 9999px;

  /* ---- Border widths ---- */
  --border-hairline: 1px;
  --border-thick: 1.5px;

  /* ---- Shadows (tinted with deep green ink) ---- */
  --shadow-xs: 0 1px 2px rgba(12, 22, 17, 0.06);
  --shadow-sm: 0 1px 3px rgba(12, 22, 17, 0.08), 0 1px 2px rgba(12, 22, 17, 0.04);
  --shadow-md: 0 4px 12px -2px rgba(12, 22, 17, 0.10), 0 2px 6px -2px rgba(12, 22, 17, 0.06);
  --shadow-lg: 0 12px 32px -8px rgba(12, 22, 17, 0.16), 0 4px 12px -4px rgba(12, 22, 17, 0.08);
  --shadow-xl: 0 24px 60px -12px rgba(8, 46, 34, 0.22), 0 8px 20px -8px rgba(8, 46, 34, 0.12);

  /* Inner shadow for wells / pressed */
  --shadow-inset: inset 0 1px 2px rgba(12, 22, 17, 0.08);

  /* Brand glow (use sparingly, on accent CTAs) */
  --shadow-brand: 0 8px 24px -6px rgba(14, 94, 66, 0.40);
  --shadow-accent: 0 8px 24px -6px rgba(232, 163, 23, 0.42);
}