/* ===================================================
   EYECUBE Design System — Typography
   Caricamento font: CDN attivo + slot per self-hosted.
=================================================== */

/* ---------------------------------------------------
   Caricamento via CDN (default — sempre attivo)
   --------------------------------------------------- */

/* Display: EB Garamond (regular 400 + medium 500 + italic 400) */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400&display=swap');

/* Mono: IBM Plex Mono (400 + 500) */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap');

/* Body: Mona Sans — GitHub open font, via fontsource CDN */
@import url('https://cdn.jsdelivr.net/npm/@fontsource/mona-sans@5/index.css');

/* ---------------------------------------------------
   FASE 4 — self-hosted (abilitare quando download.sh
   ha pescato i .woff2 in design-system/fonts/).
   Decommenta il blocco sotto. I @font-face locali
   hanno priorità sui @import CDN (browser sceglie
   la prima fonte disponibile per lo stesso font-family).
   Per indipendenza CDN totale, rimuovi anche gli @import
   sopra dopo aver verificato che i .woff2 caricano.
   --------------------------------------------------- */

/*
@font-face {
  font-family: 'EB Garamond';
  src: url('./fonts/eb-garamond-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('./fonts/eb-garamond-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('./fonts/eb-garamond-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Mona Sans';
  src: url('./fonts/mona-sans-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mona Sans';
  src: url('./fonts/mona-sans-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('./fonts/ibm-plex-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('./fonts/ibm-plex-mono-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
*/

/* ---------- Classi tipografiche atomiche ---------- */

.t-d1, .t-display-1 {
  font-family: var(--ff-display);
  font-size: var(--text-d1);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-wider);
}

.t-d2, .t-display-2 {
  font-family: var(--ff-display);
  font-size: var(--text-d2);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

.t-h1 {
  font-family: var(--ff-display);
  font-size: var(--text-h1);
  font-weight: 400;
  line-height: var(--lh-snug);
}

.t-h2 {
  font-family: var(--ff-display);
  font-size: var(--text-h2);
  font-weight: 400;
  line-height: var(--lh-snug);
}

.t-h3 {
  font-family: var(--ff-display);
  font-size: var(--text-h3);
  font-weight: 500;
}

.t-lede {
  font-family: var(--ff-display);
  font-size: var(--text-lede);
  font-style: italic;
  line-height: var(--lh-loose);
}

.t-body {
  font-family: var(--ff-body);
  font-size: var(--text-body);
  line-height: var(--lh-normal);
}

.t-cap, .t-caption {
  font-family: var(--ff-body);
  font-size: var(--text-cap);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
}

.t-mono {
  font-family: var(--ff-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--ls-wide);
}

/* ---------- Evento / programma (v1.2.0)
   Tre strati semantici della riga-programma evento:
   giorno (vocativo), orario (dato), nota (qualificatore).
   Tutto Mona Sans uppercase: il mono è riservato a KPI tecnici,
   un programma evento è editoriale, non tecnico. --------- */

.t-event-day {
  font-family: var(--ff-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}

.t-event-time {
  font-family: var(--ff-body);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}

.t-event-note {
  font-family: var(--ff-body);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}

/* ---------- Colorazione semantica ---------- */

.t-accent       { color: var(--color-accent); }
.t-primary      { color: var(--color-text-primary); }
.t-dim          { color: var(--color-text-dim); }
.t-ghost        { color: var(--color-text-ghost); }

/* ---------- Reset display per tag semantici, se servono ---------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-display);
  font-weight: 400;
  line-height: var(--lh-snug);
  color: var(--color-text-primary);
}

/* ---------- Utility mono inline ---------- */
/* Per numeri tecnici dentro paragrafi di body (es. <span class="mono">25.000</span>) */
.mono {
  font-family: var(--ff-mono);
  font-size: 0.94em;
  letter-spacing: 0.01em;
  color: var(--color-accent);
  font-weight: 400;
}