/* ============================================================
   GroupApp 2.0 — Spacing, radii, shadows, layout tokens
   Auto-layout gaps/paddings observed in the source cluster on
   4 / 8 / 10 / 12 / 16 / 20 / 24.
   ============================================================ */
:root {
  /* ---- Spacing scale ---- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-13: 53px; /* upcoming-events card internal gap */

  /* ---- Radii ---- */
  --radius-xs: 4px;   /* small avatars inside tiles */
  --radius-sm: 6px;   /* status pills */
  --radius-md: 8px;   /* buttons, small inputs */
  --radius-lg: 10px;  /* menu items, community tiles */
  --radius-xl: 14px;  /* inner media, post tiles */
  --radius-pill: 18px;/* search field pill */
  --radius-toggle: 22px;
  --radius-2xl: 20px; /* cards & panels */
  --radius-full: 9999px;

  /* ---- Border widths ---- */
  --border-1: 1px;     /* @kind spacing */
  --border-1-5: 1.5px; /* @kind spacing */
  --border-3: 3px;     /* @kind spacing */

  /* ---- Shadows ---- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-card: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.25);
  --shadow-avatar: inset 0 0 0 1px #ffffff, 0 2px 4px rgba(0, 0, 0, 0.1);

  /* Border-as-shadow rings (used pervasively instead of border) */
  --ring-card: inset 0 0 0 1px var(--border-default);
  --ring-strong: inset 0 0 0 1px var(--border-strong);
  --ring-emphasis: 0 0 0 1px var(--black);

  /* ---- Layout constants (Desktop App shell) ---- */
  --nav-height: 52px;     /* @kind spacing */
  --rail-width: 72px;     /* @kind spacing */
  --sidebar-width: 280px; /* @kind spacing */
  --feed-width: 680px;    /* @kind spacing */
  --rightrail-width: 280px; /* @kind spacing */

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out: cubic-bezier(0, 0, 0.2, 1); /* @kind other */
  --duration-fast: 120ms; /* @kind other */
  --duration-base: 180ms; /* @kind other */
  --duration-slow: 240ms; /* @kind other */
}