/* ============================================================
   uplitMD · RADIUS, SHADOW, BORDERS, MOTION, FOCUS
   Soft-but-not-round corners; the brand's depth comes from
   surface color steps and hairlines, not heavy drop shadows.
   ============================================================ */
:root {
  /* ---- Corner radii ---- */
  --radius-xs:   6px;    /* badges, tags, small chips */
  --radius-sm:   10px;   /* nav pills, inputs-in-line */
  --radius-md:   12px;   /* buttons, thumbnails */
  --radius-lg:   14px;   /* cards */
  --radius-xl:   18px;   /* plans, feature panels */
  --radius-pill: 999px;  /* stage pills, rails */

  /* ---- Shadows (used sparingly on the dark canvas) ---- */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.30);
  --shadow-md:  0 8px 24px rgba(0,0,0,0.35);
  --shadow-lg:  0 24px 60px rgba(0,0,0,0.45);
  --shadow-glow: 0 0 0 1px rgba(126,248,111,0.35), 0 8px 30px rgba(126,248,111,0.25); /* green CTA glow */

  /* ---- Border widths ---- */
  --bw-hair: 1px; /* @kind other */
  --bw:      1.5px; /* @kind other */
  --bw-2:    2px; /* @kind other */

  /* ---- Motion ---- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast:   0.15s; /* @kind other */
  --dur:        0.25s; /* @kind other */
  --dur-slow:   0.6s; /* @kind other */

  /* ---- Focus ---- */
  --focus-width: 3px; /* @kind other */
  --focus-offset: 3px; /* @kind other */
}