/* ============================================================
   GOPHY — Spacing, radii, shadow & motion (authoritative)
   design-tokens.json: 'space' unit === 0.25rem. radius base 1rem.
   Soft, rounded, warm. No sharp 90° corners on cards; soft shadows
   only (never hard outlines, never text shadows).
   ============================================================ */

:root {
  /* ---- Spacing (0.25rem unit) ---- */
  --space-1:  0.25rem;   /* 4  */
  --space-2:  0.5rem;    /* 8  */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 — default gap / card padding */
  --space-5:  1.25rem;   /* 20 */
  --space-6:  1.5rem;    /* 24 */
  --space-8:  2rem;      /* 32 */
  --space-10: 2.5rem;    /* 40 */
  --space-12: 3rem;      /* 48 */

  /* ---- Radii (from design-tokens.json) ---- */
  --radius-sm:   0.5rem;    /* 8  — chips, inputs */
  --radius-md:   0.875rem;  /* 14 — small cards, buttons */
  --radius-base: 1rem;      /* 16 — default card radius */
  --radius-lg:   1rem;      /* 16 */
  --radius-xl:   1.5rem;    /* 24 — sheets, large cards */
  --radius-full: 9999px;    /* pills, avatars */
  --radius: var(--radius-base);

  /* ---- Shadow (soft only) ---- */
  --shadow-soft:   0 2px 8px rgba(0,0,0,0.08);   /* default card lift */
  --shadow-medium: 0 4px 16px rgba(0,0,0,0.12);  /* sheets, modals, FAB */
  --shadow-none:   none;

  /* ---- Motion ---- */
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);  /* @kind other */
  --transition-fast:   all 0.15s cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);                 /* @kind other */

  /* ---- Layout (mobile-first) ---- */
  --app-width:     390px;   /* iPhone 14 portrait */
  --app-height:    844px;
  --container-max: 32rem;   /* 512 — centered max width on tablet+ */
  --gutter:        1rem;
  --min-tap:       44px;    /* minimum tap target */
  --nav-height:    72px;    /* bottom nav */
  --header-height: 60px;
}