/* Romano Battiti Design System — Spacing & Radius Tokens */

:root {
  /* ── Spacing scale (4px base) ── */
  --space-0:  0px;
  --space-px: 1px;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;

  /* ── Border radii ──
     Controls (bottoni, campi, badge, tag) usano archi circolari: sotto i
     ~40px di altezza una superellisse concentra massa negli angoli e il
     bordo sembra ispessito. Gli angoli continui restano alle superfici
     grandi — card, modali, popover — dove la curva ha spazio per leggersi. */
  --corner-shape: squircle;  /* only on opt-in surfaces, see styles.css */

  --radius-sm:   4px;   /* tag, checkbox, small accents */
  --radius-md:   6px;   /* badge, icon button, menu rows */
  --radius-lg:   8px;   /* buttons, fields */
  --radius-xl:   16px;  /* card, panel, popover — squircle */
  --radius-2xl:  22px;  /* modals — squircle */
  --radius-full: 9999px; /* pill — sempre round */

  /* ── Field shell (select, multiselect, combobox, text input) ──
     One shared shell keeps every control on the same rhythm as Button md. */
  --field-height:    36px;
  --field-pad-x:     12px;
  --field-gap:       8px;
  --field-radius:    var(--radius-lg);
  /* Field text size. Overridden to 16px on coarse pointers in responsive.css:
     below 16px iOS zooms the page on focus and never zooms back out. */
  --field-text:      var(--text-sm);
  --popover-radius:  var(--radius-xl);
  --popover-max-h:   260px;
}