/* =============================================
   DIYOURTRAVEL — Design System Tipografico
   File:   assets/css/typography.css
   Ruolo:  UNICA FONTE DI VERITÀ per font, scale
           dimensioni, pesi e spaziature.

   ⚠️  Non usare mai font-size, font-family o
       font-weight hardcoded nel resto del sito.
       Usa sempre le variabili definite qui.

   Importato PRIMA di ogni altro CSS:
   <link rel="stylesheet" href="assets/css/typography.css">
============================================= */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@500;600;700&display=swap');


/* ══════════════════════════════════════════
   VARIABILI GLOBALI
══════════════════════════════════════════ */
:root {

  /* ── FONT FAMILIES ── */
  --font-body:    'Inter', system-ui, sans-serif;
  --font-heading: 'Poppins', sans-serif;

  /* ── SCALE DIMENSIONI ── */
  --text-xs:   12px;   /* label, badge, meta */
  --text-sm:   14px;   /* nav, footer, button, card meta */
  --text-base: 16px;   /* body, paragrafi normali */
  --text-md:   18px;   /* paragrafi articoli / descrizioni */
  --text-lg:   20px;   /* h4, sottotitoli */
  --text-xl:   24px;   /* h4 grande, section label */
  --text-2xl:  32px;   /* h3 */
  --text-3xl:  40px;   /* h2 */
  --text-4xl:  48px;   /* h1 */

  /* ── PESI ── */
  --weight-light:    300;
  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ── LINE HEIGHT ── */
  --line-tight:  1.2;
  --line-normal: 1.5;
  --line-loose:  1.7;

  /* ── LETTER SPACING ── */
  --heading-spacing: -0.02em;
  --nav-spacing:      0.04em;
  --label-spacing:    0.08em;

  /* ── LEGGIBILITÀ ── */
  --prose-max: 700px;   /* larghezza max per testi lunghi */
}


/* ══════════════════════════════════════════
   BASE — body e reset tipografico
══════════════════════════════════════════ */
body {
  font-family:              var(--font-body);
  font-size:                var(--text-base);
  font-weight:              var(--weight-normal);
  line-height:              var(--line-normal);
  color:                    #222;
  -webkit-font-smoothing:   antialiased;
  -moz-osx-font-smoothing:  grayscale;
}


/* ══════════════════════════════════════════
   TITOLI
══════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
  font-family:    var(--font-heading);
  line-height:    var(--line-tight);
  font-weight:    var(--weight-semibold);
  letter-spacing: var(--heading-spacing);
}

h1 {
  font-size:     var(--text-4xl);       /* 48px */
  font-weight:   var(--weight-bold);
  margin-bottom: 24px;
}

h2 {
  font-size:     var(--text-3xl);       /* 40px */
  font-weight:   var(--weight-semibold);
  margin-bottom: 20px;
}

h3 {
  font-size:     var(--text-2xl);       /* 32px */
  font-weight:   var(--weight-semibold);
  line-height:   1.3;
  margin-bottom: 16px;
}

h4 {
  font-size:     var(--text-xl);        /* 24px */
  font-weight:   var(--weight-medium);
  margin-bottom: 12px;
}

h5, h6 {
  font-size:     var(--text-lg);        /* 20px */
  font-weight:   var(--weight-medium);
  margin-bottom: 10px;
}


/* ══════════════════════════════════════════
   TESTO — paragrafi e descrizioni
══════════════════════════════════════════ */
p {
  font-size:     var(--text-md);        /* 18px — editoriale */
  line-height:   var(--line-loose);
  margin-bottom: 16px;
}

/* Articoli e prose lunghe */
.prose {
  max-width:     var(--prose-max);
  font-size:     var(--text-md);
  line-height:   var(--line-loose);
}

/* Testi secondari, card, anteprime */
.text-small {
  font-size:   var(--text-sm);          /* 14px */
  line-height: var(--line-normal);
}

.text-xs {
  font-size:   var(--text-xs);          /* 12px */
  line-height: var(--line-normal);
}


/* ══════════════════════════════════════════
   COMPONENTI UI — classi riutilizzabili
══════════════════════════════════════════ */

/* Navigazione */
.header-nav,
.navbar-links a {
  font-family:     var(--font-body);
  font-size:       var(--text-sm);      /* 14px */
  font-weight:     var(--weight-medium);
  letter-spacing:  var(--nav-spacing);
  text-transform:  uppercase;
}

/* Pulsanti */
.button,
.btn-nv {
  font-family:    var(--font-body);
  font-size:      var(--text-sm);       /* 14px */
  font-weight:    var(--weight-semibold);
  letter-spacing: 0.03em;
}

/* Footer */
.footer,
.footer-links a,
.footer-brand-desc {
  font-size:   var(--text-sm);          /* 14px */
  line-height: var(--line-normal);
}

/* Section label — etichetta sopra titolo sezione */
.section-label {
  font-family:    var(--font-body);
  font-size:      var(--text-xs);       /* 12px */
  font-weight:    var(--weight-bold);
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
}

/* Section title — titolo sezione principale */
.section-title {
  font-family:    var(--font-heading);
  font-size:      clamp(var(--text-xl), 3.5vw, var(--text-3xl));
  font-weight:    var(--weight-semibold);
  line-height:    var(--line-tight);
  letter-spacing: var(--heading-spacing);
}

/* Input e form */
input, textarea, select, button {
  font-family: var(--font-body);
  font-size:   var(--text-sm);
}


/* ══════════════════════════════════════════
   RESPONSIVE — riduzione mobile
══════════════════════════════════════════ */
@media (max-width: 768px) {
  h1 { font-size: 36px; }
  h2 { font-size: 30px; }
  h3 { font-size: 24px; }
  h4 { font-size: 20px; }
  p  { font-size: var(--text-base); }   /* 16px su mobile */
}

@media (min-width: 769px) and (max-width: 1024px) {
  h1 { font-size: 40px; }
  h2 { font-size: 34px; }
  h3 { font-size: 27px; }
  h4 { font-size: 22px; }
}