/* Romano Battiti Design System — Responsive & Input Tokens
   Mobile-first: i valori di :root sono quelli mobile, i @media li alzano.
   Nessun componente contiene media query: legge questi token e si adatta. */

:root {
  /* ── Breakpoint ──
     Tre punti soltanto. In CSS vanno scritti a mano (le custom property non
     funzionano dentro @media): questi token servono al JS e alla doc. */
  --bp-tablet:   768px;   /* @kind other */
  --bp-desktop: 1024px;   /* @kind other */

  /* ── Container e gutter ── */
  --container-max: 1200px;
  --gutter:         16px;  /* margine di pagina — mobile */

  /* ── Densità ──
     Padding interno di card, panel e righe di lista. */
  --pad-surface:  16px;
  --pad-modal:    20px;
  --gap-grid:     12px;

  /* ── Target touch ──
     UNICA manopola per l'adattamento al dito: 0 su puntatore fine, 44px su
     puntatore grosso. I controlli la applicano come min-height / min-width,
     quindi su desktop non cambia nulla e su touch tutto sale al minimo.
     Non hardcodare 44px nei componenti: usa questo token. */
  --touch-min: 0px;

  /* ── Safe area (notch, home indicator) ── */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
}

@media (min-width: 768px) {
  :root {
    --gutter:      24px;
    --pad-surface: 20px;
    --pad-modal:   28px;
    --gap-grid:    16px;
  }
}

@media (min-width: 1024px) {
  :root {
    --gutter: 32px;
  }
}

/* Puntatore grosso: dito, pennino, telecomando. Non è "schermo piccolo" —
   un tablet grande in touch lo attiva, un laptop stretto no. */
@media (pointer: coarse) {
  :root {
    --touch-min: 44px;
    /* 16px minimum in any field: below it iOS zooms the page on focus and
       never zooms back out. */
    --field-text: 16px;
  }
}