/* ============================================================
   Lightfoot — Effects: radii, borders, shadows, motion
   The physical brand is rounded-rectangular (the "box" body of
   the scooter, the yellow badge disc). Corners are soft but
   confident — never pill-everything, never sharp-tech.
   Shadows are low and warm; the brand lives in daylight.
   ============================================================ */

:root {
  /* Corner radii */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   14px;  /* default card / button radius */
  --radius-lg:   20px;
  --radius-xl:   28px;  /* big feature panels — echoes the body panel */
  --radius-pill: 999px; /* badges, chips, the swift disc */
  --radius-round:50%;

  /* Border widths */
  --border-1: 1px;
  --border-2: 2px;
  --border-3: 3px;  /* bold outline buttons / focus */

  /* Shadows — soft, warm, daylight. Never blue-black. */
  --shadow-xs: 0 1px 2px rgba(46, 58, 107, 0.08);
  --shadow-sm: 0 2px 6px rgba(46, 58, 107, 0.10);
  --shadow-md: 0 6px 18px rgba(46, 58, 107, 0.12);
  --shadow-lg: 0 16px 40px rgba(46, 58, 107, 0.16);
  /* Playful "lifted sticker" shadow — a hard offset, no blur */
  --shadow-sticker: 4px 4px 0 var(--lf-asphalt);
  --shadow-sticker-navy: 5px 5px 0 var(--lf-road-navy);

  /* Focus ring */
  --ring: 0 0 0 3px rgba(46, 58, 107, 0.35);

  /* Motion — quick, springy, cheeky. Nothing slow or dramatic. */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-base:   200ms; /* @kind other */
  --dur-slow:   320ms; /* @kind other */
}