/* tolkey.it — un solo foglio di stile per tutte le pagine.
 *
 * Colori e scala tipografica sono quelli dell'app (estate-manager,
 * packages/design-tokens): stessi valori, nessuno inventato.
 * Font Geist (WOFF2) servito da questo sito (cartella fonti/, licenza SIL OFL in
 * fonti/OFL.txt): nessuna richiesta a server di terzi.
 */

@font-face {
  font-family: "Geist";
  src: url("fonti/Geist-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("fonti/Geist-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("fonti/Geist-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("fonti/Geist-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --- Colori: token dell'app (colors.ts) --------------------------------- */
:root {
  color-scheme: light dark;
  --primary: #2789fe;
  --primary-dark: #0054fb;
  --background: #f7f7f9;
  --surface: #ffffff;
  --border: #eef0f4;
  --text: #17171e; /* textPrimary */
  /* textNeutral (6.92:1 sul bianco): il grigio per il testo secondario.
     textSecondary (#7A808D, 3.96:1) è troppo chiaro per leggere. */
  --text-soft: #545a67;
  --link: #0054fb; /* primaryDark: sul bianco regge come testo */
}

/* Tema scuro: la palette delle card scure dell'app (ink, inkSoft, inkLine,
   textOnInk, textOnInkMuted). */
@media (prefers-color-scheme: dark) {
  :root {
    --background: #17171e; /* ink */
    --surface: #242430; /* inkSoft */
    --border: #34373f; /* inkLine */
    --text: #ffffff; /* textOnInk */
    --text-soft: #b8bcc6; /* più chiaro di textOnInkMuted, per leggere */
    --link: #7fb7ff; /* primary schiarito: sul fondo scuro regge come testo */
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--text);
  font-family: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif;
  /* Più grande del body dell'app (15): qui si legge testo legale. 17 è un
     gradino della stessa scala (cardName). */
  font-size: 17px;
  line-height: 1.65;
}

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover {
  text-decoration-thickness: 2px;
}

/* La colonna di lettura: ~70 caratteri, gutter di 24 come l'app. */
.colonna {
  width: 100%;
  max-width: 68ch;
  margin: 0 auto;
  padding: 0 24px;
}

/* --- Intestazione delle pagine interne ---------------------------------- */
.testata {
  padding-top: 24px;
  padding-bottom: 8px;
}
.testata a.marchio {
  font-weight: 700;
  font-size: 19px;
  color: var(--text);
  text-decoration: none;
}

/* --- Tipografia: la scala dell'app (typography.ts) ---------------------- */
h1 {
  font-size: 32px; /* display */
  line-height: 1.19;
  font-weight: 700;
  margin: 24px 0 8px;
  letter-spacing: -0.01em;
}
h2 {
  font-size: 24px; /* h1 dell'app */
  line-height: 1.21;
  font-weight: 700;
  margin: 48px 0 12px;
}
h3 {
  font-size: 19px; /* h2 dell'app */
  line-height: 1.32;
  font-weight: 600;
  margin: 32px 0 8px;
}
h4 {
  font-size: 17px;
  line-height: 1.3;
  font-weight: 600;
  margin: 24px 0 4px;
}
p,
ul,
ol {
  margin: 0 0 16px;
}
li {
  margin: 0 0 8px;
}
li > ul,
li > ol {
  margin-top: 8px;
}
strong {
  font-weight: 600;
}
hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 48px 0;
}

.aggiornato {
  font-size: 15px;
  color: var(--text-soft);
  margin: 0 0 32px;
}

main {
  padding-bottom: 48px;
}

/* --- Landing ------------------------------------------------------------ */
.landing {
  min-height: 72vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.landing h1 {
  /* Il titolo della landing: il doppio del display dell'app (32 → 64 su
     schermi larghi), ridotto sul telefono. */
  font-size: clamp(48px, 14vw, 64px);
  line-height: 1.05;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
}
.landing .sottotitolo {
  font-size: 24px;
  line-height: 1.35;
  font-weight: 500;
  color: var(--text-soft);
  margin: 0;
  max-width: 28ch;
}

/* --- Tabella fornitori -------------------------------------------------- */
.tabella {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.5;
  margin: 24px 0;
}
.tabella th,
.tabella td {
  text-align: left;
  vertical-align: top;
  padding: 12px;
  border-bottom: 1px solid var(--border);
}
.tabella th {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tabella td a {
  overflow-wrap: anywhere;
}
/* La pagina fornitori è più larga: la tabella ha cinque colonne. */
.colonna.larga {
  max-width: 1100px;
}

/* Sul telefono la tabella diventa un elenco di blocchi: ogni riga una card,
   ogni cella con la sua etichetta davanti. */
@media (max-width: 760px) {
  .tabella,
  .tabella tbody,
  .tabella tr,
  .tabella td {
    display: block;
    width: 100%;
  }
  .tabella thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .tabella tr {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px; /* radius.lg */
    padding: 8px 16px;
    margin: 0 0 16px;
  }
  .tabella td {
    border: 0;
    padding: 8px 0;
  }
  .tabella td::before {
    content: attr(data-etichetta);
    display: block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-soft);
    margin-bottom: 2px;
  }
  .tabella td:first-child {
    font-size: 17px;
    font-weight: 600;
  }
}

/* --- Piè di pagina ------------------------------------------------------ */
.piede {
  border-top: 1px solid var(--border);
  padding-top: 24px;
  padding-bottom: 48px;
  font-size: 15px;
  color: var(--text-soft);
}
.piede nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0 0 12px;
}
.piede p {
  margin: 0 0 4px;
}