/* ─────────────────────────────────────────────────────────────
   Eicon · Spacing, radius, shadow & motion tokens
   The app breathes on a 2px base step; screen gutters are 20–22px,
   corners are generously rounded, and buttons are full pills.
   ───────────────────────────────────────────────────────────── */
:root {
  /* ── Spacing scale (px) ── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 28px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;

  /* ── Layout ── */
  --gutter: 20px;          /* default screen side padding */
  --gutter-wide: 22px;     /* content-heavy screens */
  --nav-height: 84px;      /* bottom nav */
  --status-height: 54px;   /* top status bar */

  /* ── Radii ── */
  --r-lg: 26px;            /* large cards, points panel */
  --r-md: 18px;            /* default card, sheet, toast */
  --r-sm: 12px;            /* inputs, small chips, list rows */
  --r-xs: 8px;             /* badges, tiny thumbs */
  --r-pill: 100px;         /* buttons, chips, nav pills, avatars */

  /* ── Shadows ── */
  --shadow-card: 0 1px 3px rgba(13, 13, 12, 0.06);
  --shadow-pop: 0 16px 40px rgba(0, 0, 0, 0.3);          /* toast, notif */
  --shadow-sheet: 0 -20px 50px rgba(0, 0, 0, 0.3);       /* bottom sheets */
  --shadow-float: 0 18px 40px -12px rgba(0, 0, 0, 0.35); /* lifted artwork */
  --shadow-device: 0 50px 90px -20px rgba(0, 0, 0, 0.55);

  /* inset "borders" — Eicon draws strokes with inset shadow, not border */
  --ring-hair: inset 0 0 0 1.5px var(--hair);
  --ring-strong: inset 0 0 0 1.5px var(--hair-2);

  /* ── Motion ── */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);   /* @kind other */
  --ease-pop: cubic-bezier(0.2, 0.7, 0.3, 1.4);    /* @kind other */
  --dur-tap: 0.12s;        /* @kind other */
  --dur-fast: 0.2s;        /* @kind other */
  --dur-screen: 0.34s;     /* @kind other */
}