/* ═══════════════════════════════════════════════════════════════
   TYPOGRAPHY — Volpe Pasticceria
   Headings: Jost (Futura-style) | Accents: Cormorant Garamond
   Body: Lato
   ═══════════════════════════════════════════════════════════════ */

/* ── Google Fonts Import ─────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Jost:wght@300;400;500;600;700;900&family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400&display=swap');
/* display=swap già incluso nel parametro URL — garantisce FOUT invece di FOIT */

/* ── Display / Hero ──────────────────────────────────────────── */

.display-xl {
  font-family: var(--font-heading);
  font-size: var(--text-hero);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-tight);
  line-height: 0.95;
}

.display-lg {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.0;
}

/* ── Headings ─────────────────────────────────────────────────── */

h1, .h1 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

h2, .h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

h3, .h3 {
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 2.5vw, 1.75rem);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-normal);
  line-height: var(--leading-snug);
}

h4, .h4 {
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
}

h5, .h5 {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

/* ── Display Serif (Cormorant) ───────────────────────────────── */

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

.display-serif {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-tight);
  line-height: 1.05;
  font-style: italic;
}

.quote-text {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  font-weight: var(--weight-light);
  font-style: italic;
  line-height: var(--leading-relaxed);
  letter-spacing: 0.01em;
}

/* ── Labels / Eyebrows ────────────────────────────────────────── */

.label {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  line-height: 1;
}

.label--gold {
  color: var(--gold);
}

.label--blue {
  color: var(--blue);
}

.label--muted {
  color: var(--text-muted);
}

/* ── Body Text ────────────────────────────────────────────────── */

.body-lg {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

.body-md {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

.body-sm {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-muted);
}

/* ── Prose (long-form text) ──────────────────────────────────── */

.prose {
  max-width: var(--container-text);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  font-size: var(--text-base);
}

.prose > * + * { margin-top: var(--space-4); }
.prose p { margin-bottom: var(--space-4); line-height: var(--leading-relaxed); }
.prose p:last-child { margin-bottom: 0; }

.prose strong {
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.prose em {
  font-family: var(--font-display);
  font-style: italic;
}

.prose h1, .prose h2, .prose h3, .prose h4, .prose h5 {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
  line-height: var(--leading-tight);
}
.prose h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.prose h2 { font-size: clamp(1.25rem, 2.5vw, 1.6rem); }
.prose h3 { font-size: clamp(1.1rem, 2vw, 1.3rem); }
.prose h4 { font-size: var(--text-base); }
.prose h5 { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: var(--tracking-wider); }

.prose ul, .prose ol {
  padding-left: var(--space-6);
  margin-bottom: var(--space-4);
}
.prose ul { list-style-type: disc; }
.prose ol { list-style-type: decimal; }
.prose li {
  margin-bottom: var(--space-2);
  line-height: var(--leading-relaxed);
}
.prose li::marker { color: var(--gold); }

.prose a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition-base);
}
.prose a:hover { color: var(--gold); }

.prose blockquote {
  border-left: 3px solid var(--gold);
  padding: var(--space-4) var(--space-6);
  background: var(--blue-ghost);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-block: var(--space-6);
  font-family: var(--font-display);
  font-style: italic;
  color: var(--text-secondary);
}

.prose code {
  font-family: 'Courier New', monospace;
  font-size: 0.875em;
  background: var(--blue-ghost);
  color: var(--blue);
  padding: 0.1em 0.4em;
  border-radius: 3px;
}

.prose pre {
  background: var(--blue-deeper);
  color: rgba(255,255,255,0.85);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin-block: var(--space-6);
}
.prose pre code {
  background: none;
  color: inherit;
  padding: 0;
  font-size: var(--text-sm);
}

.prose hr {
  border: none;
  border-top: 1px solid var(--border);
  margin-block: var(--space-8);
}

.prose img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  margin-block: var(--space-6);
}

.prose s, .prose del { text-decoration: line-through; opacity: 0.7; }

/* ── Utilities ────────────────────────────────────────────────── */

.text-center  { text-align: center; }
.text-left    { text-align: left; }
.text-right   { text-align: right; }

.uppercase    { text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.italic       { font-style: italic; }

.text-gold    { color: var(--gold); }
.text-blue    { color: var(--blue); }
.text-white   { color: var(--white); }
.text-muted   { color: var(--text-muted); }