/* ============================================
   RenDS — Primitive Sizing Tokens
   ============================================
   Touch targets, component heights, icon sizes,
   and common width constraints.

   Apple HIG: 44px minimum touch target.
   ============================================ */

:root {
  /* ─── Touch Target ─── */
  --touch-min: 2.75rem;  /* 44px — Apple HIG minimum */

  /* ─── Component Heights ─── */
  --size-xs:  1.5rem;    /* 24px — compact inline */
  --size-sm:  2rem;      /* 32px — small button/badge */
  --size-md:  2.25rem;   /* 36px — medium control */
  --size-lg:  2.75rem;   /* 44px — standard (touch target) */
  --size-xl:  3.25rem;   /* 52px — large button */
  --size-2xl: 3.75rem;   /* 60px — extra large */

  /* ─── Icon Sizes ─── */
  --icon-xs:  0.75rem;   /* 12px — inline micro */
  --icon-sm:  1rem;      /* 16px — inline small */
  --icon-md:  1.25rem;   /* 20px — default */
  --icon-lg:  1.5rem;    /* 24px — toolbar */
  --icon-xl:  2rem;      /* 32px — featured */
  --icon-2xl: 3rem;      /* 48px — hero */

  /* ─── Avatar Sizes ─── */
  --avatar-xs:  1.5rem;  /* 24px */
  --avatar-sm:  2rem;    /* 32px */
  --avatar-md:  2.5rem;  /* 40px */
  --avatar-lg:  3rem;    /* 48px */
  --avatar-xl:  4rem;    /* 64px */
  --avatar-2xl: 5rem;    /* 80px */

  /* ─── Content Widths ─── */
  --width-xs:   20rem;   /* 320px */
  --width-sm:   24rem;   /* 384px */
  --width-md:   28rem;   /* 448px */
  --width-lg:   32rem;   /* 512px */
  --width-xl:   36rem;   /* 576px */
  --width-2xl:  42rem;   /* 672px */
  --width-3xl:  48rem;   /* 768px */
  --width-4xl:  56rem;   /* 896px */
  --width-5xl:  64rem;   /* 1024px */
  --width-6xl:  72rem;   /* 1152px */
  --width-7xl:  80rem;   /* 1280px */
  --width-full: 100%;
  --width-prose: 65ch;   /* optimal reading width */

  /* ─── Border / Stroke Widths ─── */
  --stroke-0:    0;
  --stroke-1:    1px;
  --stroke-2:    2px;
  --stroke-3:    3px;
  --stroke-4:    4px;
}