/* ============================================================
   DOSSIERO — BASE
   Come si comportano gli elementi HTML nudi, prima che qualcuno
   ci metta una classe: il testo, i link, i campi, i titoli.

   Regola di questo file: qui dentro si stilano solo TAG, mai
   classi. Le classi stanno in 03-componenti.
   ============================================================ */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.5;
  /* Sul telefono il fondo deve arrivare sotto la barra di sistema,
     altrimenti si vede una striscia bianca sotto il piede. */
  min-height: 100dvh;
}

/* I link non sono blu e non sono sottolineati: dentro un gestionale
   quasi tutto e' cliccabile, e sottolineare tutto fa rumore. Si
   capisce che e' un link da dove sta e da cosa fa al passaggio. */
a {
  color: var(--text);
  text-decoration: none;
}

a:hover {
  color: var(--accent);
}

/* ---- Titoli. La scala e' corta apposta: h1 per il titolo della
   pagina, h2 per il titolo di una card, h3 per un sottoblocco.
   Sotto non si scende. */
h1 {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-h1);
  font-weight: 700;
  letter-spacing: -0.01em;
}

h2 {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-h2);
  font-weight: 700;
}

h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-lead);
  font-weight: 700;
}

p {
  margin: 0 0 var(--space-3);
}

/* ---- Campi. Larghi quanto il contenitore: nei form di Dossiero
   la larghezza la decide la griglia che sta fuori, non il campo. */
input,
select,
textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  outline: none;
  color: var(--text);
  background: var(--bg-soft);
  font-family: inherit;
  font-size: var(--fs-body);
}

textarea {
  min-height: 96px;
  resize: vertical;
}

/* La freccia della select disegnata a mano: quella di sistema
   arriva bianca su fondo scuro o nera su fondo chiaro a seconda
   del browser, e non c'e' verso di intonarla. */
select {
  appearance: none;
  padding-right: 42px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* Il fuoco si vede sempre: bordo acceso piu' anello morbido.
   Non togliere l'outline senza rimettere qualcosa al suo posto —
   chi gira col Tab resta cieco. */
input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-ring);
}

/* L'iconcina del calendario nei campi data e' un'immagine del
   browser: sul tema scuro e' nera su nero. Si inverte. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.2);
  opacity: 0.92;
  cursor: pointer;
}

body.theme-light input[type="date"]::-webkit-calendar-picker-indicator,
body.theme-light input[type="datetime-local"]::-webkit-calendar-picker-indicator,
body.theme-light input[type="time"]::-webkit-calendar-picker-indicator,
body.theme-light input[type="month"]::-webkit-calendar-picker-indicator {
  filter: none;
}

input[type="checkbox"],
input[type="radio"] {
  width: auto;
  accent-color: var(--accent);
}

/* ---- Etichette. MAIUSCOLE, piccole, spaziate: sono targhette,
   non frasi. Se una label e' una frase intera, quella non e' una
   label — e' un aiutino, e va in .hint (vedi 03-componenti). */
label {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--muted);
  font-size: var(--fs-small);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ---- Barre di scorrimento sottili, in tinta. Fuori da Firefox
   servono i pseudo-elementi WebKit. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--accent-soft) transparent;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--line-strong);
  background-clip: content-box;
}

/* Chi ha chiesto meno animazioni non le vede. */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}