/* Doggenius spacing & shape tokens — 8px grid (Tailwind-numbered names). */
:root {
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;   /* screen padding mobile (x) */
  --space-6:  24px;   /* card padding mobile / screen padding desktop (x) */
  --space-8:  32px;   /* card padding desktop / section gap */
  --space-10: 40px;
  --space-12: 48px;   /* section bottom margin */
  --space-16: 64px;
  --space-20: 80px;

  /* — Shape: één warme vormtaal —
     pills als knoppen, 16px kaarten, 12px inputs. --radius-organic (9999px) voor
     avatars, breed-pills, status dots, reactie-pills. De scherpe [01]-number-badge
     (0px, in het component zelf) is de énige uitzondering. */
  --radius-structural: 16px;   /* kaarten, modals, grote vlakken */
  --radius-input: 12px;        /* inputs, selects, textareas */
  --radius-cta: 9999px;        /* knoppen zijn pills */
  --radius-organic: 9999px;

  /* Randen alleen functioneel (inputs, focus) */
  --border-width: 1.5px;

  /* Accessibility floor (55+ segment): interactive elements ≥44px */
  --touch-target: 44px;
}