/* ==========================================================================
   MILANO TI VOGLIO - TYPOGRAPHY & FONT SYSTEM
   ========================================================================== */

/* --------------------------------------------------------------------------
   @FONT-FACE DECLARATIONS
   -------------------------------------------------------------------------- */

/* 1. Cossette Titre */
@font-face {
  font-family: 'Cossette Titre';
  src: url('../fonts/CossetteTitre-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cossette Titre';
  src: url('../fonts/CossetteTitre-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* 2. Apfel Grotezk */
@font-face {
  font-family: 'Apfel Grotezk';
  src: url('../fonts/ApfelGrotezk-Satt.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Apfel Grotezk';
  src: url('../fonts/ApfelGrotezk-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* 3. Ronzino */
@font-face {
  font-family: 'Ronzino';
  src: url('../fonts/Ronzino-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

/* --------------------------------------------------------------------------
   TYPOGRAPHY CSS VARIABLES
   -------------------------------------------------------------------------- */
:root {
  --font-cossette: 'Cossette Titre', IMPACT, sans-serif;
  --font-apfel: 'Apfel Grotezk', system-ui, -apple-system, sans-serif;
  --font-ronzino: 'Ronzino', Georgia, serif;
}

/* --------------------------------------------------------------------------
   TYPOGRAPHY UTILITY CLASSES & BASE STYLES
   -------------------------------------------------------------------------- */

/* H1 Big: Cossette Titre - bold 128px interlinea 100% */
.h1-big,
h1.h1-big {
  font-family: var(--font-cossette);
  font-weight: 700;
  font-size: clamp(3.5rem, 8vw, 8rem); /* 128px a desktop, responsive su schermi piccoli */
  line-height: 1.0;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0;
}

/* H1: Cossette Titre - bold 64px interlinea 100% */
h1, .h1 {
  font-family: var(--font-cossette);
  font-weight: 700;
  font-size: clamp(2.25rem, 4.5vw, 4rem); /* 64px desktop */
  line-height: 1.0;
  letter-spacing: -0.01em;
  margin-top: 0;
}

/* H2: Cossette Titre - bold 32px interlinea 100% */
h2, .h2 {
  font-family: var(--font-cossette);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.5vw, 2rem); /* 32px desktop */
  line-height: 1.0;
  margin-top: 0;
}

/* H3: Cossette Titre - bold 24px interlinea 110% */
h3, .h3 {
  font-family: var(--font-cossette);
  font-weight: 700;
  font-size: clamp(1.25rem, 1.8vw, 1.5rem); /* 24px desktop */
  line-height: 1.1;
  margin-top: 0;
}

/* Eyebrow: Apfel Grotezk - Satt 24px interlinea 100% */
.eyebrow {
  font-family: var(--font-apfel);
  font-weight: 800;
  font-size: clamp(1.1rem, 1.6vw, 1.5rem); /* 24px desktop */
  line-height: 1.0;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* CTA-Menu: Apfel Grotezk - Satt 16px interlinea 100% */
.cta-text,
.menu-text,
.btn-text {
  font-family: var(--font-apfel);
  font-weight: 800;
  font-size: 1rem; /* 16px */
  line-height: 1.0;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Paragraph: Ronzino - regular 24px interlinea 110% */
p, .paragraph {
  font-family: var(--font-ronzino);
  font-weight: 400;
  font-size: clamp(1.15rem, 1.8vw, 1.5rem); /* 24px desktop */
  line-height: 1.1;
  margin-top: 0;
}

/* Small Paragraph: Ronzino - regular 16px interlinea 120% */
.paragraph-small,
p.small {
  font-family: var(--font-ronzino);
  font-weight: 400;
  font-size: 1rem; /* 16px desktop */
  line-height: 1.2;
}