/* ============================================================
   Sociala Widget — Spacing, radii, shadows, motion
   4px base grid. Card radius 24, controls 12, pills 999.
   ============================================================ */

:root {
  /* ---- Spacing (4px base) -------------------------------- */
  --space-0: 0;
  --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;

  /* ---- Radii --------------------------------------------- */
  --radius-xs: 8px;     /* small chips, inner icon buttons      */
  --radius-sm: 12px;    /* inputs, icon buttons, service tiles  */
  --radius-md: 16px;    /* buttons, medium surfaces             */
  --radius-lg: 24px;    /* cards, sheets, widget panels         */
  --radius-pill: 999px; /* badges, segment control, avatars     */

  /* ---- Elevation (very soft, near-black low-alpha) -------- */
  --shadow-xs: 0 1px 2px rgba(6, 9, 19, 0.04);
  --shadow-sm: 0 2px 8px rgba(6, 9, 19, 0.06);
  --shadow-md: 0 8px 24px rgba(6, 9, 19, 0.08);
  --shadow-lg: 0 16px 40px rgba(6, 9, 19, 0.12);
  --shadow-focus: 0 0 0 3px rgba(204, 255, 0, 0.5);

  /* ---- Motion -------------------------------------------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 320ms; /* @kind other */

  /* ---- Control sizing ------------------------------------ */
  --control-h-sm: 36px; /* @kind spacing */
  --control-h-md: 48px; /* @kind spacing */
  --control-h-lg: 56px; /* @kind spacing */
  --tap-target: 44px; /* @kind spacing */
}