/* ===========================================================================
   LinkUp — Spacing, radius & elevation tokens
   4px spacing scale. Soft/rounded product: 8px inline, 20px cards, full pills.
   Flat by default; elevation reserved for floating surfaces.
   =========================================================================== */

:root {
  /* --- Spacing (Tailwind 4px scale, common steps) --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;   /* px-4 py-3 container vertical          */
  --space-4: 16px;   /* container padding, card padding p-4   */
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* --- Layout --- */
  --container-pad: 16px;       /* horizontal page padding       */
  --app-frame-width: 390px;    /* desktop "mobile frame"        */
  --header-height: 64px;       /* fixed top bar                 */
  --bottom-nav-height: 86px;   /* floating bottom nav + safe    */
  --tap-target-min: 44px;      /* iOS minimum hit target        */

  /* --- Radius scale --- */
  --radius: 8px;        /* base (--radius) inline actions      */
  --radius-sm: 6px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-3xl: 28px;
  --radius-card: 20px;  /* cards                               */
  --radius-pill: 9999px;/* primary CTAs, filter chips          */

  /* --- Elevation (subtle, monochrome) --- */
  --shadow-subtle: 0 1px 2px rgba(0, 0, 0, .05);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, .06);
  --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, .08);
  --shadow-fab: 0 8px 25px -8px rgba(102, 126, 234, .6); /* brand-tinted only */

  /* --- Motion --- */
  --ease-glass: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */ /* nav pill slide */
  --ease-press: ease; /* @kind other */
  --dur-press: 0.15s; /* @kind other */
  --dur-fade: 0.5s; /* @kind other */
  --dur-slide: 0.3s; /* @kind other */
  --dur-scale: 0.2s; /* @kind other */
  --dur-glass: 430ms; /* @kind other */
}