/* ============================================================== *
 * REDESIGN OTTANIO V2 — TYPOGRAPHY (introdotto 2026-05-03)
 * Riferimento: docs/redesign/DeskControl Perizie - Handoff Sviluppo.md sez. 2.2
 *
 * 3 famiglie:
 *   Archivo (--ff-display)  → titoli, brand, sezioni hero, h1-h4
 *   Inter (--ff-body)        → tutto il resto: body, label, button, input
 *   JetBrains Mono (--ff-mono) → dati tecnici, codici (P-001, lat/lon, mq, percentuali, timestamp)
 *
 * Approccio: override globale h1-h4 (display) + classi helper riusabili.
 * Body resta Inter (gia' impostato in variables.css :body).
 * ============================================================== */

/* ===== Heading classi esplicite (Archivo 800) ===== *
 * Nota: NON applichiamo come override globale ai tag h1-h4 nativi per
 * non rompere le sezioni ancora legacy (i cui heading hanno size diverse).
 * Le sezioni migrate al redesign useranno le classi .h1/.h2/.h3/.h4 sui
 * loro h*, oppure su qualunque tag (es. <div class="h2">). */
.h1, .h2, .h3, .h4 {
  font-family: var(--ff-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--ink);
  margin: 0;
}
.h1 { font-size: var(--fs-22); }
.h2 { font-size: var(--fs-15); }
.h3 { font-size: var(--fs-14); }
.h4 { font-size: var(--fs-13-5); }

/* Wrapper opt-in: tutte le h1-h4 dentro .rd-scope ricevono il redesign typography */
.rd-scope h1 { font-family: var(--ff-display); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; font-size: var(--fs-22); }
.rd-scope h2 { font-family: var(--ff-display); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; font-size: var(--fs-15); }
.rd-scope h3 { font-family: var(--ff-display); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; font-size: var(--fs-14); }
.rd-scope h4 { font-family: var(--ff-display); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; font-size: var(--fs-13-5); }

/* Variante regular (per casi dove 800 e' troppo) */
.heading-regular {
  font-family: var(--ff-display);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ===== Mono — dati tecnici ===== */
.mono,
.mono * {
  font-family: var(--ff-mono);
}

/* Numeri tabulari (column align) */
.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* ===== Label CAPS sopra i campi ===== */
.label-caps {
  display: inline-block;
  font-family: var(--ff-body);
  font-size: var(--fs-10-5);
  font-weight: 600;
  letter-spacing: var(--ls-caps-wide);
  text-transform: uppercase;
  color: var(--ott-500);
  margin-bottom: 4px;
  line-height: 1.3;
}

/* ===== Eyebrow — pre-titolo CAPS mono ===== */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-mono);
  font-size: var(--fs-11);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ott-base);
  margin-bottom: 12px;
}

/* ===== Section title CAPS (header accordion / pannello) ===== */
.section-title-caps {
  font-family: var(--ff-body);
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: var(--ls-caps-tight);
  text-transform: uppercase;
  color: var(--ott-700);
}

/* ===== Help text / micro-label ===== */
.help-text {
  font-family: var(--ff-body);
  font-size: var(--fs-11);
  color: var(--ott-500);
  line-height: 1.45;
  margin: 0;
}

/* ===== Text size helpers ===== */
.text-10-5 { font-size: var(--fs-10-5); }
.text-11   { font-size: var(--fs-11); }
.text-11-5 { font-size: var(--fs-11-5); }
.text-12   { font-size: var(--fs-12); }
.text-12-5 { font-size: var(--fs-12-5); }
.text-13   { font-size: var(--fs-13); }
.text-13-5 { font-size: var(--fs-13-5); }
.text-14   { font-size: var(--fs-14); }
.text-15   { font-size: var(--fs-15); }
.text-17   { font-size: var(--fs-17); }
.text-22   { font-size: var(--fs-22); }

.text-secondary { color: var(--ott-500); }
.text-primary   { color: var(--ink); }
.text-brand     { color: var(--ott-base); }

/* ===== Body line-heights standard ===== */
.lh-tight { line-height: 1.3; }
.lh-base  { line-height: 1.45; }
.lh-loose { line-height: 1.55; }

/* ===== Anti-aliasing globale ===== */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}