/* =============================================================
 * MyDigital Agency — Sistema Tipografico
 * =============================================================
 * Font: IBM Plex Sans (Open Font License, IBM)
 * Versione: 1.0.0
 * Generato: 4 maggio 2026
 *
 * Questo file implementa l'intero sistema tipografico definito
 * nel brand book di MyDigital Agency, sezione tipografia.
 *
 * Implementazione: self-hosted, zero dipendenze esterne.
 * Tutti i 7 pesi (100-700) e i relativi italic sono caricati.
 * I pesi attivi del sistema (300, 400, 500, 600, 700) sono
 * documentati nelle utility classes. I pesi 100 e 200 esistono
 * nei file ma non sono usati nei componenti del sistema.
 *
 * Breakpoints:
 *   mobile  : < 768px
 *   tablet  : 768px - 1023px
 *   desktop : >= 1024px
 *
 * Body sempre 16px in tutti i breakpoints (leggibilità minima).
 * ============================================================= */


/* =============================================================
 * 1. @FONT-FACE — IBM Plex Sans (self-hosted, tutti i pesi)
 * =============================================================
 * I file font vanno collocati in /assets/fonts/ del progetto.
 * Formato richiesto: WOFF2 (max compressione, supporto universale).
 * Subset: latin + latin-ext (italiano completo, ~80% in meno di peso).
 *
 * Sostituire il path "/assets/fonts/" con quello del proprio
 * progetto se necessario.
 * ============================================================= */

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/assets/fonts/IBMPlexSans-Thin.woff2') format('woff2');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/assets/fonts/IBMPlexSans-ThinItalic.woff2') format('woff2');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/assets/fonts/IBMPlexSans-ExtraLight.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/assets/fonts/IBMPlexSans-ExtraLightItalic.woff2') format('woff2');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/assets/fonts/IBMPlexSans-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/assets/fonts/IBMPlexSans-LightItalic.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/assets/fonts/IBMPlexSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/assets/fonts/IBMPlexSans-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/assets/fonts/IBMPlexSans-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/assets/fonts/IBMPlexSans-MediumItalic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/assets/fonts/IBMPlexSans-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/assets/fonts/IBMPlexSans-SemiBoldItalic.woff2') format('woff2');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/assets/fonts/IBMPlexSans-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/assets/fonts/IBMPlexSans-BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}


/* =============================================================
 * 1.bis @FONT-FACE — IBM Plex Mono (self-hosted, 6 pesi)
 * =============================================================
 * Per code inline, code block, riferimenti normativi tecnici.
 * Pesi attivi: 400 / 500 / 700 + italic dei tre.
 * Stesso pattern del Sans: subset latin+latin-ext, swap.
 * ============================================================= */

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/fonts/IBMPlexMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/fonts/IBMPlexMono-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/fonts/IBMPlexMono-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/fonts/IBMPlexMono-MediumItalic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/fonts/IBMPlexMono-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/fonts/IBMPlexMono-BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}


/* =============================================================
 * 1.ter @FONT-FACE — IBM Plex Serif (self-hosted, 6 pesi)
 * =============================================================
 * SOLO per body articolo long-form. NON per UI generale.
 * Pesi attivi: 400 / 500 / 600 + italic dei tre.
 * Stesso pattern del Sans: subset latin+latin-ext, swap.
 * ============================================================= */

@font-face {
  font-family: 'IBM Plex Serif';
  src: url('/assets/fonts/IBMPlexSerif-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Serif';
  src: url('/assets/fonts/IBMPlexSerif-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Serif';
  src: url('/assets/fonts/IBMPlexSerif-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Serif';
  src: url('/assets/fonts/IBMPlexSerif-MediumItalic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Serif';
  src: url('/assets/fonts/IBMPlexSerif-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Serif';
  src: url('/assets/fonts/IBMPlexSerif-SemiBoldItalic.woff2') format('woff2');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}


/* =============================================================
 * 2. DESIGN TOKENS — variabili CSS del sistema
 * ============================================================= */

:root {

  /* ===== FONT FAMILY ===== */
  --font-sans:
    'IBM Plex Sans',
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    sans-serif;

  /* ===== FONT FAMILY MONO ===== */
  /* IBM Plex Mono — solo per code inline, code block, riferimenti tecnici */
  --font-mono:
    'IBM Plex Mono',
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;

  /* ===== FONT FAMILY SERIF (solo body articolo) ===== */
  /* IBM Plex Serif — SOLO per il body degli articoli long-form, mai per UI */
  --font-serif:
    'IBM Plex Serif',
    Georgia,
    'Iowan Old Style',
    Cambria,
    serif;

  /* ===== FONT WEIGHTS ===== */
  /* Pesi attivi nel sistema: 300, 400, 500, 600, 700 */
  /* Pesi disponibili nei file ma non usati nei componenti: 100, 200 */
  --fw-thin:        100;
  --fw-extralight:  200;
  --fw-light:       300;
  --fw-regular:     400;
  --fw-medium:      500;
  --fw-semibold:    600;
  --fw-bold:        700;

  /* ===== FONT SIZES — DESKTOP (>= 1024px) ===== */
  --fs-display-d:   56px;
  --fs-h1-d:        36px;
  --fs-h2-d:        24px;
  --fs-h3-d:        18px;
  --fs-body-d:      16px;
  --fs-small-d:     14px;
  --fs-eyebrow-d:   12px;
  --fs-article-body-d: 18px;   /* Body articolo (serif) — leggermente più grande del body UI */

  /* ===== FONT SIZES — TABLET (768px - 1023px) ===== */
  --fs-display-t:   44px;
  --fs-h1-t:        32px;
  --fs-h2-t:        22px;
  --fs-h3-t:        18px;
  --fs-body-t:      16px;
  --fs-small-t:     14px;
  --fs-eyebrow-t:   12px;
  --fs-article-body-t: 17px;   /* Body articolo (serif) */

  /* ===== FONT SIZES — MOBILE (< 768px) ===== */
  --fs-display-m:   36px;
  --fs-h1-m:        28px;
  --fs-h2-m:        20px;
  --fs-h3-m:        17px;
  --fs-body-m:      16px;
  --fs-small-m:     13px;
  --fs-eyebrow-m:   11px;
  --fs-article-body-m: 16px;   /* Body articolo (serif) — uguale al body UI su mobile */

  /* ===== LINE HEIGHTS ===== */
  /* Stessi valori in desktop, tablet, mobile.
     Eccezione: body su mobile usa --lh-body-mobile (1.55). */
  --lh-display:        1.05;
  --lh-h1:             1.1;
  --lh-h2:             1.25;
  --lh-h3:             1.35;
  --lh-body:           1.65;
  --lh-body-mobile:    1.55;
  --lh-small:          1.55;
  --lh-eyebrow:        1.5;
  --lh-article-body:   1.75;  /* Body articolo (serif) — più aperto del body sans */

  /* ===== LETTER SPACING — DESKTOP ===== */
  --ls-display-d:   -0.03em;
  --ls-h1-d:        -0.022em;
  --ls-h2-d:        -0.015em;
  --ls-h3-d:        -0.005em;
  --ls-body-d:       0;
  --ls-small-d:      0;
  --ls-eyebrow-d:    0.08em;

  /* ===== LETTER SPACING — TABLET ===== */
  --ls-display-t:   -0.026em;
  --ls-h1-t:        -0.02em;
  --ls-h2-t:        -0.013em;
  --ls-h3-t:        -0.005em;
  --ls-body-t:       0;
  --ls-small-t:      0;
  --ls-eyebrow-t:    0.08em;

  /* ===== LETTER SPACING — MOBILE ===== */
  --ls-display-m:   -0.022em;
  --ls-h1-m:        -0.018em;
  --ls-h2-m:        -0.012em;
  --ls-h3-m:        -0.005em;
  --ls-body-m:       0;
  --ls-small-m:      0;
  --ls-eyebrow-m:    0.1em;

  /* ===== LETTER SPACING — SEMANTIC ALIASES ===== */
  --ls-tight:           -0.022em;
  --ls-snug:            -0.012em;
  --ls-normal:           0;
  --ls-wide:             0.08em;
  --ls-extra-wide:       0.1em;
  --ls-article-body:     0.005em;  /* Body articolo (serif) — tracking leggermente positivo */

  /* ===== READING MEASURES ===== */
  --measure-body:   70ch;

  /* ===== VERTICAL SPACING SCALE ===== */
  --space-1:   8px;
  --space-2:  12px;
  --space-3:  16px;
  --space-4:  24px;
  --space-5:  32px;
  --space-6:  48px;
  --space-7:  64px;
  --space-8:  96px;

  /* ===== ACCENT COLOR (per accent puntuali nei numeri narrativi) ===== */
  --color-accent: #DF0B0B;
}


/* =============================================================
 * 3. UTILITY CLASSES — scala primaria del sistema
 * =============================================================
 * Ogni classe definisce: font-family, peso, dimensione (mobile-
 * first), line-height, letter-spacing.
 * Le dimensioni si adattano automaticamente con i breakpoints.
 * ============================================================= */

/* ===== DISPLAY ===== */
.text-display {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-display-m);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display-m);
}
@media (min-width: 768px) {
  .text-display {
    font-size: var(--fs-display-t);
    letter-spacing: var(--ls-display-t);
  }
}
@media (min-width: 1024px) {
  .text-display {
    font-size: var(--fs-display-d);
    letter-spacing: var(--ls-display-d);
  }
}

/* ===== H1 ===== */
.text-h1 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h1-m);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1-m);
}
@media (min-width: 768px) {
  .text-h1 {
    font-size: var(--fs-h1-t);
    letter-spacing: var(--ls-h1-t);
  }
}
@media (min-width: 1024px) {
  .text-h1 {
    font-size: var(--fs-h1-d);
    letter-spacing: var(--ls-h1-d);
  }
}

/* ===== H2 ===== */
.text-h2 {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h2-m);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2-m);
}
@media (min-width: 768px) {
  .text-h2 {
    font-size: var(--fs-h2-t);
    letter-spacing: var(--ls-h2-t);
  }
}
@media (min-width: 1024px) {
  .text-h2 {
    font-size: var(--fs-h2-d);
    letter-spacing: var(--ls-h2-d);
  }
}

/* ===== H3 ===== */
.text-h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h3-m);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3-m);
}
@media (min-width: 768px) {
  .text-h3 {
    font-size: var(--fs-h3-t);
    letter-spacing: var(--ls-h3-t);
  }
}
@media (min-width: 1024px) {
  .text-h3 {
    font-size: var(--fs-h3-d);
    letter-spacing: var(--ls-h3-d);
  }
}

/* ===== BODY ===== */
.text-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-m);
  line-height: var(--lh-body-mobile);
  letter-spacing: var(--ls-body-m);
  max-width: var(--measure-body);
}
@media (min-width: 768px) {
  .text-body {
    font-size: var(--fs-body-t);
    line-height: var(--lh-body);
    letter-spacing: var(--ls-body-t);
  }
}
@media (min-width: 1024px) {
  .text-body {
    font-size: var(--fs-body-d);
    line-height: var(--lh-body);
    letter-spacing: var(--ls-body-d);
  }
}

/* ===== SMALL ===== */
.text-small {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-small-m);
  line-height: var(--lh-small);
  letter-spacing: var(--ls-small-m);
}
@media (min-width: 768px) {
  .text-small {
    font-size: var(--fs-small-t);
    letter-spacing: var(--ls-small-t);
  }
}
@media (min-width: 1024px) {
  .text-small {
    font-size: var(--fs-small-d);
    letter-spacing: var(--ls-small-d);
  }
}

/* ===== EYEBROW (etichette di categoria, ALL CAPS) ===== */
.text-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-eyebrow-m);
  line-height: var(--lh-eyebrow);
  letter-spacing: var(--ls-eyebrow-m);
  text-transform: uppercase;
}
@media (min-width: 768px) {
  .text-eyebrow {
    font-size: var(--fs-eyebrow-t);
    letter-spacing: var(--ls-eyebrow-t);
  }
}
@media (min-width: 1024px) {
  .text-eyebrow {
    font-size: var(--fs-eyebrow-d);
    letter-spacing: var(--ls-eyebrow-d);
  }
}


/* =============================================================
 * 4. UTILITY CLASSES — combinazioni fuori scala
 * =============================================================
 * Eccezioni intenzionali alla scala. Ogni famiglia ha regole
 * d'uso strette definite nel brand book (Punto M).
 * ============================================================= */

/* ===== FAMIGLIA 1 — NUMERI GIGANTI NARRATIVI ===== */
/* Range: 88px - 144px. Solo Bold (futuro/crescita) o Light (origine/storia). */

.numeric-display-bold {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: 96px;
  line-height: 0.9;
  letter-spacing: -0.045em;
}

.numeric-display-light {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: 96px;
  line-height: 0.9;
  letter-spacing: -0.045em;
}

.numeric-display-xl {
  font-size: 128px;
}

.numeric-display-xxl {
  font-size: 144px;
}

/* Accent puntuale (per il "+", l'apostrofo, il punto finale) */
.numeric-accent {
  color: var(--color-accent);
}


/* ===== FAMIGLIA 2 — MIX DI PESI NEL TITOLO ===== */
/* Combinazioni ammesse: Bold + Regular, Bold + Light, SemiBold + Light. */
/* Una sola variazione per titolo. */

.title-mix-emphasis {
  font-weight: var(--fw-bold);
}

.title-mix-context {
  font-weight: var(--fw-light);
}

/* Variante: contesto in Regular invece che Light */
.title-mix-context-regular {
  font-weight: var(--fw-regular);
}


/* ===== FAMIGLIA 3 — RATIO AUDACI ===== */
/* Differenze max 2:1. Solo numeri e simboli, mai parole intere. */

.ratio-bold-2-1 {
  display: inline-flex;
  align-items: flex-start;
  gap: 4px;
}
.ratio-bold-2-1 .primary {
  font-weight: var(--fw-bold);
  font-size: 120px;
  line-height: 0.85;
  letter-spacing: -0.045em;
}
.ratio-bold-2-1 .secondary {
  font-weight: var(--fw-medium);
  font-size: 60px;
  line-height: 1;
  margin-top: 4px;
  color: var(--color-accent);
}


/* ===== FAMIGLIA 4 — DISPLAY OVERSIZE SEZIONALI ===== */
/* Range: 80px - 120px. Sempre con generoso white space attorno. */

.display-section {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: 96px;
  line-height: 1.02;
  letter-spacing: -0.04em;
  margin: var(--space-7) 0 var(--space-5);
}


/* =============================================================
 * 5. UTILITY CLASSES — trattamento dei numeri (5 regole)
 * ============================================================= */

/* Regola 4: numeri tabellari (dati a colonna) */
.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* Regola 5: numeri inline editoriali (paragrafi fluiti) */
.oldstyle-nums {
  font-variant-numeric: oldstyle-nums;
}

/* Default (lining figures) — non serve attivarlo, è il default */
.lining-nums {
  font-variant-numeric: lining-nums;
}


/* =============================================================
 * 6. UTILITY CLASSES — corsivo e maiuscole
 * ============================================================= */

/* Corsivo — usabile solo nei tre casi del Punto K:
   1. Citazioni dirette
   2. Titoli di opere/documenti/prodotti
   3. Parole straniere non assimilate */
.italic-quote {
  font-style: italic;
  font-weight: var(--fw-regular);
}

.italic-title-of-work {
  font-style: italic;
  font-weight: var(--fw-medium);
}

.italic-foreign-term {
  font-style: italic;
  font-weight: inherit;
}

/* All caps — usabile solo nei quattro casi del Punto L:
   1. Eyebrow (già coperta da .text-eyebrow)
   2. Tag/badge piccoli
   3. Sigle e acronimi (per grammatica, sempre maiuscoli)
   4. Watermark/firma stampata */

.tag-badge {
  font-size: 10px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 4px;
  display: inline-block;
}

.watermark-print {
  font-size: 14px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}


/* =============================================================
 * 7. ALLINEAMENTO E COMPOSIZIONE (Punto J)
 * ============================================================= */

/* Allineamento di default: sinistra */
.align-default {
  text-align: left;
}

/* Centrato — riservato a tre casi:
   1. Hero della homepage
   2. Copertine di documenti formali
   3. Manifesto stampato */
.align-hero,
.align-cover,
.align-manifesto {
  text-align: center;
}


/* =============================================================
 * 7.bis UTILITY CLASSES — Mono (code, dati tecnici)
 * =============================================================
 * IBM Plex Mono usato SOLO in 3 contesti:
 *   1. Code inline (<code> dentro un paragrafo)
 *   2. Code block (<pre><code>)
 *   3. Riferimenti normativi tecnici (art. 32 GDPR, D.Lgs. 196/2003, ID)
 *
 * NON usato per UI generale, body, eyebrow, numeri di body comuni.
 * I numeri tabellari delle tabelle dati restano in Sans (.tabular-nums).
 * ============================================================= */

.text-mono {
  font-family: var(--font-mono);
}

/* Code inline (dentro un paragrafo) */
.code-inline {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background-color: rgba(0, 0, 0, 0.04);
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: var(--fw-regular);
}

/* Code block (multilinea) */
.code-block {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.6;
  background-color: rgba(0, 0, 0, 0.04);
  padding: 16px 20px;
  border-radius: 6px;
  overflow-x: auto;
  white-space: pre;
  font-weight: var(--fw-regular);
}


/* =============================================================
 * 7.ter UTILITY CLASSES — Serif (body articolo long-form)
 * =============================================================
 * IBM Plex Serif usato SOLO per il corpo degli articoli.
 *
 * NON usato per:
 *   - UI generale (menu, button, header, footer, sidebar)
 *   - Titoli di sezione del sito
 *   - Eyebrow, label, caption
 *   - H2/H3 DENTRO l'articolo (restano Sans per coerenza UI)
 *   - Citazioni inline (restano Sans italic come da Punto K)
 *
 * Applicare .article-body al contenitore del corpo articolo.
 * ============================================================= */

.text-serif {
  font-family: var(--font-serif);
}

/* Body articolo — scala 18/17/16 con line-height più aperto */
.article-body {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  font-size: var(--fs-article-body-m);
  line-height: var(--lh-article-body);
  letter-spacing: var(--ls-article-body);
  max-width: var(--measure-body);
}
@media (min-width: 768px) {
  .article-body {
    font-size: var(--fs-article-body-t);
  }
}
@media (min-width: 1024px) {
  .article-body {
    font-size: var(--fs-article-body-d);
  }
}


/* =============================================================
 * 8. APPENDICE — note implementative
 * =============================================================
 *
 * 8.1 — STRATEGIA DI HOSTING
 * I file font sono self-hosted (zero dipendenze esterne).
 * I 14 file (7 pesi × 2 stili) vivono in /assets/fonts/.
 * Compatibile con GDPR, ottimale per progetti PA italiani.
 *
 * 8.2 — FORMATO FILE
 * WOFF2 esclusivamente. Subset latin + latin-ext.
 * Peso totale stimato: ~360 KB (14 file).
 *
 * 8.3 — FONT-DISPLAY
 * Tutti i pesi usano `font-display: swap` in modo uniforme.
 * Coerente con il principio "trattati identici, niente eccezioni".
 *
 * 8.4 — PRELOAD
 * Nessun preload selettivo. Il caricamento dei font è uniforme,
 * gestito dal browser tramite il CSS sopra.
 *
 * 8.5 — DARK MODE
 * Non sono previste regolazioni tipografiche specifiche per il
 * dark mode (i pesi restano gli stessi).
 *
 * 8.6 — OPENTYPE FEATURES ATTIVE
 * - lining-nums  : default (non serve attivarlo)
 * - tabular-nums : attivare con .tabular-nums dove ci sono dati a colonna
 * - oldstyle-nums : attivare con .oldstyle-nums in testi editoriali fluiti
 *
 * Altri stylistic sets di IBM Plex Sans (ss01, ss02, ss03) non
 * sono inclusi nel sistema per mantenere la massima coerenza visiva.
 *
 * 8.7 — DOWNLOAD DEI FONT
 * Scaricare IBM Plex Sans dal sito ufficiale:
 *   https://github.com/IBM/plex/releases
 * Cartella richiesta: IBM-Plex-Sans/fonts/complete/woff2/
 * Copiare i 14 file in /assets/fonts/ del progetto.
 *
 * 8.8 — VERIFICA POST-IMPLEMENTAZIONE
 * - Tutti i pesi devono caricarsi senza errori 404
 * - Il fallback stack deve mostrarsi correttamente in caso di
 *   font non disponibile
 * - Il body deve sempre rispettare la dimensione minima 16px
 *
 * 8.9 — IBM PLEX MONO (aggiunta v1.1)
 * 6 file aggiuntivi: 3 pesi (400 / 500 / 700) + italic dei tre.
 * Stessa cartella /assets/fonts/. Stesso pattern WOFF2, subset
 * latin+latin-ext, font-display: swap.
 * Uso ESCLUSIVO: code inline, code block, riferimenti normativi
 * tecnici. Mai per UI generale, body, eyebrow.
 *
 * 8.10 — IBM PLEX SERIF (aggiunta v1.1)
 * 6 file aggiuntivi: 3 pesi (400 / 500 / 600) + italic dei tre.
 * Stessa cartella /assets/fonts/. Stesso pattern WOFF2, subset
 * latin+latin-ext, font-display: swap.
 * Uso ESCLUSIVO: body degli articoli long-form (.article-body).
 * NON usato in UI, navigazione, header, footer, sidebar, eyebrow,
 * caption, label. I titoli (H2/H3) DENTRO l'articolo restano Sans
 * per coerenza UI. Le citazioni inline restano Sans italic.
 *
 * 8.11 — DOWNLOAD AGGIUNTIVI (Mono + Serif)
 * Scaricare anche:
 *   https://github.com/IBM/plex/releases
 *   - IBM-Plex-Mono/fonts/complete/woff2/  (6 file: Regular,
 *     Italic, Medium, MediumItalic, Bold, BoldItalic)
 *   - IBM-Plex-Serif/fonts/complete/woff2/ (6 file: Regular,
 *     Italic, Medium, MediumItalic, SemiBold, SemiBoldItalic)
 * Copiare i 12 file in /assets/fonts/ del progetto.
 * Peso totale aggiuntivo stimato: ~300 KB (12 file × ~25 KB).
 *
 * 8.12 — VERIFICA POST-IMPLEMENTAZIONE (aggiornata)
 * - I 14 file Plex Sans + 6 file Plex Mono + 6 file Plex Serif
 *   devono caricarsi senza errori 404 (totale: 26 file)
 * - Il fallback stack deve mostrarsi correttamente per ognuna delle
 *   tre famiglie (Sans / Mono / Serif)
 * - Plex Serif NON deve mai apparire fuori da .article-body
 *
 * ============================================================= */