/**
 * Typography System
 * 
 * Classi tipografiche riutilizzabili.
 * Usa queste classi per garantire coerenza tipografica.
 */

/* ========================================
   TITLES - Font Sans (Scorekard)
   ======================================== */

/**
 * .title - Titolo principale di sezione
 * Uso: titoli h2 di sezione
 */
.title {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-2xl); /* 30px */
  font-weight: var(--font-weight-bold); /* 700 */
  color: var(--grey-900);
  line-height: var(--line-height-none); /* 1 */
  letter-spacing: 0.2px;
  margin: 0;
}

/**
 * .title--md - Titolo medio
 * Uso: titoli h3, titoli modal
 */
.title--md {
  font-size: var(--font-size-xl); /* 24px */
  font-weight: var(--font-weight-bold); /* 700 */
}

/**
 * .title--sm - Sottotitolo
 * Uso: titoli h4, sottosezioni
 */
.title--sm {
  font-size: var(--font-size-lg); /* 21px */
  font-weight: var(--font-weight-bold); /* 700 */
}

/**
 * .title--uppercase - Variante maiuscolo
 * Uso: intestazioni di sezione, categorie
 */
.title--uppercase {
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/**
 * Sottotitolo maiuscolo = 19px
 */
.title--sm.title--uppercase {
  font-size: 19px;
}

/* ========================================
   TEXT - Font Serif (Inter)
   ======================================== */

/**
 * .text - Corpo testo principale
 * Uso: paragrafi, contenuti narrativi
 */
.text {
  font-family: var(--font-family-serif);
  font-size: var(--font-size-base); /* 18px */
  font-weight: var(--font-weight-normal); /* 400 */
  color: var(--grey-900);
  line-height: var(--line-height-relaxed); /* 1.6 */
  margin: 0;
}

/**
 * .text--sm - Testo piccolo
 * Uso: note, testi secondari
 */
.text--sm {
  font-size: var(--font-size-sm); /* 15px */
}

/**
 * .text--xs - Testo extra small
 * Uso: disclaimer, metadata
 */
.text--xs {
  font-size: var(--font-size-xs); /* 13px */
}

/* ========================================
   CAPTION - Didascalie
   ======================================== */

/**
 * .caption - Didascalia
 * Uso: attribuzioni, note a piè di pagina
 */
.caption {
  font-family: var(--font-family-serif);
  font-size: var(--font-size-sm); /* 15px */
  font-style: italic;
  color: var(--grey-600);
  margin: 0;
}

/* ========================================
   LABEL - Etichette UI
   ======================================== */

/**
 * .label - Etichetta
 * Uso: label form, categorie, tag
 */
.label {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-sm); /* 15px */
  font-weight: var(--font-weight-medium); /* 500 */
  color: var(--grey-600);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
}

/* ========================================
   MODIFIERS - Modificatori generici
   ======================================== */

/* Colori */
.text--muted {
  color: var(--grey-600);
}

/* Pesi */
.text--bold {
  font-weight: var(--font-weight-bold);
}

.text--medium {
  font-weight: var(--font-weight-medium);
}

/* Stili */
.text--italic {
  font-style: italic;
}

/* Margini bottom standard */
.mb-s {
  margin-bottom: var(--spacing-s);
}

.mb-m {
  margin-bottom: var(--spacing-m);
}

.mb-l {
  margin-bottom: var(--spacing-l);
}

.mb-xl {
  margin-bottom: var(--spacing-xl);
}

.mb-xxl {
  margin-bottom: var(--spacing-xxl);
}