/* ============================================================
   Virtual Voice — Spacing, radius, shadow, motion tokens
   ============================================================ */
:root {
  /* ---- Spacing scale ---- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-15: 60px;   /* section vertical rhythm */
  --space-16: 64px;

  /* ---- Container widths ---- */
  --container-narrow: 820px;   /* residential section width */
  --container-wide:   860px;   /* business / office section width */
  --gutter:           32px;    /* page horizontal padding */

  /* ---- Radius ---- */
  --r-sm:  6px;    /* small controls, chips inner */
  --r-btn: 9px;    /* buttons (8–10px) */
  --r-md:  10px;   /* inputs, small cards */
  --r-lg:  12px;   /* feature cards */
  --r-xl:  14px;   /* panels */
  --r-2xl: 16px;   /* plan / pricing cards */
  --r-3xl: 20px;   /* large builders, pills container */
  --r-pill: 20px;  /* badges, pills */
  --r-full: 9999px;

  /* ---- Shadows ----
     Default state has NO shadow. Lift appears on hover. */
  --shadow-none: none;
  --shadow-card-hover: 0 12px 36px rgba(0,105,240,0.10);
  --shadow-card-hover-sm: 0 10px 32px rgba(0,105,240,0.09);
  --shadow-toggle: 0 1px 4px rgba(0,0,0,0.08);
  --shadow-pop: 0 8px 28px rgba(13,31,60,0.14);

  /* ---- Borders ---- */
  --bw-hairline: 1px;
  --bw-card:     1.5px;   /* the brand's default card / control border */

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --dur:  0.2s; /* @kind other */
  --transition: all 0.2s ease; /* @kind other */
  --lift: translateY(-3px);     /* @kind other */
  --lift-sm: translateY(-1px);  /* @kind other */
}