/* Sito account.piugiovanieinforma.it (D50). Valori da shared/design/tokens.json, regole di leggibilità di D31:
   testo corrente almeno 15 px (qui 19 px, body.large), contrasto almeno 4,5:1, aree di tocco almeno 44 px.
   Nessuna risorsa esterna: i font del marchio (DM Serif Display, Outfit) non si caricano, si usano i ripieghi.
   Colori (dal 21/10/2026, D57): in tokens.css, generato dai token con scripts/web-tokens.mjs. *Prima:* copiati qui a
   mano in :root (--ink, --surface, --text-secondary, --blush, --accent). */

@import url("/assets/tokens.css");

:root {
  --font-display: Georgia, "Times New Roman", serif;   /* font.display, ripiego */
  --font-text: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; /* font.text, ripiego */
}

* { box-sizing: border-box; }

/* Solo tema chiaro (21/10/2026): i browser integrati delle app di posta (Gmail, Samsung Internet) con l'oscuramento
   forzato ricoloravano la fascia rosa e il nome del marchio spariva. Va insieme a <meta name="color-scheme">. */
html { -webkit-text-size-adjust: 100%; color-scheme: only light; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 19px;      /* type.body.large */
  line-height: 28px;
}

/* Intestazione (rivista il 21/10/2026: su un telefono il nome compariva tagliato, "Natur" contro il bordo sinistro).
   Margine laterale mai sotto i 24 px né sotto l'area sicura del telefono; il nome non va mai a capo né si taglia;
   altezza che cresce con il testo ingrandito invece di un'interlinea fissa. */
header {
  display: block;
  background: var(--blush);
  border-bottom: 1px solid var(--ink); /* border.hairline */
  padding: 16px max(24px, env(safe-area-inset-right)) 16px max(24px, env(safe-area-inset-left)); /* space.4, space.5 */
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: visible;
}

/* Indirizzi email e parole lunghe vanno a capo invece di allargare la pagina e farla scorrere di lato. */
main { overflow-wrap: anywhere; }

main {
  max-width: 560px;
  margin: 0 auto;
  padding: 32px 24px 64px;  /* space.6, space.5, space.8 */
}

h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 32px;          /* type.display.2 */
  line-height: 38px;
  margin: 0 0 24px;
}

p { margin: 0 0 16px; }

.secondary { color: var(--text-secondary); font-size: 17px; line-height: 26px; }

.actions { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; } /* space.3, space.6 */

button {
  font-family: var(--font-text);
  font-size: 17px;          /* type.button */
  line-height: 22px;
  font-weight: 600;
  min-height: 52px;         /* oltre l'area di tocco minima di 44 px */
  padding: 14px 24px;
  border-radius: 4px;       /* radius.button */
  border: 1px solid var(--ink);
  cursor: pointer;
  width: 100%;
}

button.primary { background: var(--ink); color: var(--surface); }   /* color.buttonPrimary, onButtonPrimary */
button.secondary { background: var(--surface); color: var(--ink); }
button:disabled { opacity: 0.6; cursor: wait; }
button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

[hidden] { display: none !important; }

/* Campi della pagina "Cancella il tuo account" (dal 16/10/2026). */
label { display: block; font-weight: 600; margin: 16px 0 6px; }
input[type="email"], input[type="password"], input[type="text"] {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  font-family: var(--font-text);
  font-size: 19px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--ink);
  border-radius: 4px;
}
input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.check { display: flex; align-items: flex-start; gap: 12px; margin-top: 24px; }
.check label { display: inline; font-weight: 400; margin: 0; }
.check input[type="checkbox"] { width: 28px; height: 28px; margin: 0; flex: none; accent-color: var(--ink); }
.message { color: var(--accent); font-weight: 600; margin-top: 16px; }

a { color: var(--accent); text-decoration: underline; }