/* ============================================================
   PARKNHA — SPACING, SIZING & LAYOUT TOKENS
   4px base grid. Rounded, roomy brand → bias toward larger gaps.
   ============================================================ */

:root {
  /* Spacing scale (4px grid) */
  --space-0:  0;
  --space-1:  0.25rem; /* 4 */
  --space-2:  0.5rem;  /* 8 */
  --space-3:  0.75rem; /* 12 */
  --space-4:  1rem;    /* 16 */
  --space-5:  1.25rem; /* 20 */
  --space-6:  1.5rem;  /* 24 */
  --space-8:  2rem;    /* 32 */
  --space-10: 2.5rem;  /* 40 */
  --space-12: 3rem;    /* 48 */
  --space-16: 4rem;    /* 64 */
  --space-20: 5rem;    /* 80 */

  /* Semantic spacing */
  --gap-inline:   var(--space-2);
  --gap-stack:    var(--space-4);
  --pad-card:     var(--space-5);
  --pad-screen:   var(--space-5);
  --pad-control:  var(--space-3);

  /* Container widths */
  --width-app:     420px;  /* phone canvas */
  --width-content: 1120px; /* website max content */
  --width-prose:   680px;

  /* Component sizing */
  --control-h-sm: 36px;
  --control-h:    48px;  /* default touch target */
  --control-h-lg: 56px;
  --tap-min:      44px;  /* minimum hit target */
  --icon-sm:      18px;
  --icon-md:      24px;
  --icon-lg:      32px;
}