/**
 * Design System v3.0 - Base
 *
 * Reset e stile degli elementi HTML nudi. Nessuna classe: qui si decide come
 * si comporta un <h2>, un <a> o un <input> prima che qualcuno gli dia una
 * classe. Richiede design-tokens.css.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  /* La barra superiore e la tabbar inferiore sono sticky: senza questo, un
     ancora interna finisce sotto la testata. */
  scroll-padding-top: calc(var(--header-height) + var(--space-4));
}

body {
  margin: 0;
  padding: 0;
  min-height: 100dvh;
  font-family: var(--font-sans);
  font-size: var(--type-body-size);
  font-weight: var(--font-regular);
  line-height: var(--leading-normal);
  color: var(--fg-default);
  background-color: var(--surface-page);
  font-feature-settings: "cv05" 1; /* Inter: la l con la coda, meno confondibile con I e 1 */
}

/* ===========================================
   TIPOGRAFIA DEGLI ELEMENTI
   ===========================================
   I titoli non hanno margine proprio: la distanza fra blocchi la decide il
   contenitore con --gap-*. Un margine sul titolo e uno sul contenitore
   producono la spaziatura doppia che fa sembrare le sezioni scollate. */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-family: inherit;
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-heading);
  text-wrap: balance;
}

h1 {
  font-size: var(--type-h1-size);
}
h2 {
  font-size: var(--type-h2-size);
}
h3 {
  font-size: var(--type-h3-size);
  font-weight: var(--font-semibold);
}
h4,
h5,
h6 {
  font-size: var(--type-h4-size);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-normal);
}

p {
  margin: 0;
  color: var(--fg-muted);
  text-wrap: pretty;
}

small {
  font-size: var(--type-small-size);
  color: var(--fg-subtle);
}

strong,
b {
  font-weight: var(--font-semibold);
  color: var(--fg-default);
}

ul,
ol {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

hr {
  height: 1px;
  margin: var(--gap-block) 0;
  border: 0;
  background-color: var(--border-subtle);
}

code,
kbd,
samp,
pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* I numeri di un dato non devono cambiare larghezza mentre si aggiornano. */
output,
time,
[data-numeric] {
  font-variant-numeric: var(--numeric-tabular);
}

/* ===========================================
   LINK
   =========================================== */
a {
  color: var(--fg-link);
  text-decoration: none;
  text-underline-offset: 0.2em;
  transition: color var(--transition-base);
}

a:hover {
  color: var(--fg-link-hover);
  text-decoration: underline;
}

/* Un link dentro un blocco di testo si distingue anche senza colore: il
   colore da solo non basta a segnalarlo (WCAG 1.4.1). */
p > a,
li > a {
  text-decoration: underline;
}

/* ===========================================
   CONTROLLI NUDI
   =========================================== */
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}

button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
}

textarea {
  resize: vertical;
}

img,
svg,
canvas,
video {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

/* ===========================================
   FOCUS
   ===========================================
   Un solo anello, definito una volta. Il mouse non lo vede (:focus-visible),
   la tastiera si. Mai rimuoverlo con outline:none in un foglio a valle: se un
   componente ha bisogno di un anello diverso, ridefinisce --focus-ring
   localmente. */
:focus {
  outline: none;
}

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
  position: relative;
  z-index: var(--z-dropdown);
}

::selection {
  background-color: var(--brand-200);
  color: var(--brand-950);
}

/* ===========================================
   SCROLLBAR
   =========================================== */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--neutral-300) transparent;
}

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

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--neutral-300);
  border: 3px solid var(--surface-page);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--neutral-400);
}

/* ===========================================
   PREFERENZE UTENTE
   =========================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* In modalita a colori forzati il sistema sostituisce le nostre tinte: i
   bordi devono restare, altrimenti card e campi collassano in un unico
   blocco indistinto. */
@media (forced-colors: active) {
  * {
    forced-color-adjust: auto;
  }
}