/* ============================================================
   Pick Me Up — Spacing, radius & iconography tokens
   8dp grid. Soft, generous shapes — a sanctuary, not a dashboard.
   Radius values are Phase 1 reconciled (matched to the shipped app).
   ============================================================ */

:root {
  /* --- Spacing: 8dp grid (4 & 12 are the only sub-units) --- */
  --space-0:  0;
  --space-4:  4px;
  --space-8:  8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;

  /* --- Semantic spacing --- */
  --screen-inset: var(--space-16); /* left/right screen padding */
  --card-inset:   var(--space-16); /* card padding (24 for roomy cards) */
  --stack-tight:  var(--space-8);  /* between tightly-related items */
  --stack:        var(--space-16); /* between elements */
  --section:      var(--space-32); /* between major sections */
  --control-min:  44px;            /* min tap target; primary CTAs use 52px */

  /* --- Radius scale --- */
  --radius-none: 0;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-3xl:  36px;
  --radius-pill: 9999px;

  /* --- Semantic radius (Phase 1: reconciled to the shipped mobile app) --- */
  --radius-button:       var(--radius-pill);
  --radius-button-block: var(--radius-xl);
  --radius-card:         24px;              /* mobile-app card standard */
  --radius-input:        14px;              /* inputs */
  --radius-tile:         18px;              /* quick-access / quick-help tiles */
  --radius-sheet:        var(--radius-2xl); /* 28 — sheet top corners */
  --radius-sheet-bottom: 42px;              /* matches the phone bezel */
  --radius-chip:         var(--radius-pill);

  /* --- Iconography (Phosphor Icons — regular weight) --- */
  /* Default weight is "regular"; the Feel Better heart is the lone fill.
     Sizes track the 8dp grid; icons color via currentColor. */
  --icon-sm: 16px;   /* inline with text, captions, chip leading icons */
  --icon-md: 20px;   /* default — bottom-nav, card heads, list rows     */
  --icon-lg: 24px;   /* list leading tiles, section headers             */
  --icon-xl: 28px;   /* hero / FAB glyphs                               */
}