/* StreamPets Design Tokens — single source of truth for spacing, sizing, radii, type
   Never use raw px for these. Round to nearest token. Flag if no token fits.
   See STYLE_GUIDE.md for usage rules. */

:root {
  /* ── Spacing (4px base) ──────────────────────────── */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ── Component sizing ────────────────────────────── */
  --sz-xs:  24px;   /* tiny icons, indicator dots    */
  --sz-sm:  32px;   /* small avatars, icon buttons   */
  --sz-md:  48px;   /* standard avatars, swatches    */
  --sz-lg:  64px;   /* large avatars                 */
  --sz-xl:  80px;   /* hero avatars                  */
  --sz-2xl: 96px;   /* feature / showcase avatars    */

  /* ── Border radius ───────────────────────────────── */
  /* Keep existing dashboard names as canonical values  */
  --radius-xs:   8px;
  --radius-sm:  12px;
  --radius:     20px;
  --radius-pill: 999px;
  --radius-full:  50%;

  /* ── Typography ──────────────────────────────────── */
  --fs-xs:   10px;
  --fs-sm:   12px;
  --fs-base: 14px;
  --fs-md:   16px;
  --fs-lg:   18px;
  --fs-xl:   20px;
  --fs-2xl:  24px;
  --fs-3xl:  32px;

  /* ── Swatch / avatar row conventions ─────────────── */
  /* State changes (selected, locked) modify ring/opacity ONLY — never size */
  --swatch-size:   var(--sz-md);   /* 48px — every swatch circle             */
  --swatch-gap:    var(--sp-2);    /* 8px  — gap between swatches in a row   */
  --swatch-border: 3px;            /* ring width for selected state           */
  --swatch-item-w: 64px;           /* fixed item column width keeps gaps even */
}