/* ============================================================
   SPACING, RADII & LAYOUT — Alchimique
   8px-based rhythm; the mobile frame is 430px wide with a
   20px gutter (taken from the Figma menus / selectors).
   ============================================================ */
:root {
  /* Spacing scale */
  --sp-0: 0;       /* @kind spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;   /* standard screen gutter */
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* Layout */
  --screen-w: 430px;      /* iPhone Pro Max design width */
  --gutter: 20px;         /* page side padding */
  --header-h: 64px;       /* CabeçalhoTel height */
  --footer-h: 72px;       /* BarraFooter height */

  /* Radii — Alchimique is mostly crisp; small rounds on chips/buttons */
  --r-none: 0;     /* @kind radius */
  --r-xs: 2px;
  --r-sm: 5px;     /* selectors, small frames */
  --r-md: 7px;     /* buttons, input fields */
  --r-lg: 12px;
  --r-pill: 999px;
  --r-hex: 0;      /* @kind radius */

  /* Control sizes */
  --control-h: 36px;      /* button / input height */
  --control-h-lg: 52px;   /* selector / category row height */
  --hit-min: 44px;        /* min touch target */
}