/* ============================================================
   SellTheNews — Spacing, radius, elevation, motion
   ------------------------------------------------------------
   4 / 8pt base grid. Content margins ~16pt. Minimal radius.
   Elevation is RESERVED for sheets + toasts — the feed separates
   with whitespace + hairlines, not shadows (Notion ergonomics).
   Motion is short + functional — no celebratory animation.
   ============================================================ */

:root {
  /* ---- Spacing (4/8pt base) ---- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;   /* content margin */
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  --content-margin: 16px;   /* screen-edge gutter */
  --touch-min: 44px;        /* min hit target (accessibility hard rule) */

  /* ---- Radius (minimal) ---- */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px;   /* default — cards, buttons, inputs */
  --radius-lg: 14px;   /* sheets */
  --radius-pill: 999px;/* chips, segmented control, badges */

  /* ---- Elevation — sheets + toasts only ---- */
  --elevation-card:  0 1px 2px rgba(0, 0, 0, 0.04);                       /* hairline-soft */
  --elevation-sheet: 0 -8px 28px rgba(0, 0, 0, 0.18);                     /* bottom sheet  */
  --elevation-toast: 0 6px 24px rgba(0, 0, 0, 0.16);                      /* transient     */
  --elevation-popover: 0 4px 16px rgba(0, 0, 0, 0.12);

  /* ---- Motion — short, functional ---- */
  --duration-fast: 120ms;   /* @kind other */ /* press / hover feedback */
  --duration-base: 200ms;   /* @kind other */ /* most transitions       */
  --duration-sheet: 320ms;  /* @kind other */ /* sheet present / dismiss */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);   /* @kind other */ /* enter/exit */
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);       /* @kind other */
}