/* =====================================================================
 * VIVI IN DUE — Typography v2
 *
 * Pairing Inter (sans) + Playfair Display (serif italic) per dare al
 * brand una voce narrativa, premium ma calda. Inter porta il peso
 * tecnico/UI (button, label, body), Playfair italic gli accenti emotivi
 * (microcopy, racconto, timestamp, saluti personalizzati).
 *
 * Le classi --vid-* qui definite NON usano !important: i componenti
 * futuri (PR3..PR7) le applicheranno direttamente senza combattere con
 * redesign.css legacy.
 * ===================================================================== */

/* ---------- TYPE SCALE UTILITY ---------- */
.vid-text-xs   { font-size: var(--vid-text-xs);   line-height: var(--vid-lh-snug);  }
.vid-text-sm   { font-size: var(--vid-text-sm);   line-height: var(--vid-lh-normal);}
.vid-text-base { font-size: var(--vid-text-base); line-height: var(--vid-lh-normal);}
.vid-text-lg   { font-size: var(--vid-text-lg);   line-height: var(--vid-lh-snug);  }
.vid-text-xl   { font-size: var(--vid-text-xl);   line-height: var(--vid-lh-snug);  }
.vid-text-2xl  { font-size: var(--vid-text-2xl);  line-height: var(--vid-lh-tight); }
.vid-text-3xl  { font-size: var(--vid-text-3xl);  line-height: var(--vid-lh-tight); }
.vid-text-hero { font-size: var(--vid-text-hero); line-height: var(--vid-lh-tight); letter-spacing: var(--vid-tracking-tight); }

/* ---------- WEIGHTS ---------- */
.vid-w-400 { font-weight: 400; }
.vid-w-500 { font-weight: 500; }
.vid-w-600 { font-weight: 600; }
.vid-w-700 { font-weight: 700; }
.vid-w-800 { font-weight: 800; }
.vid-w-900 { font-weight: 900; }

/* ---------- FAMILY HELPERS ---------- */
.vid-serif       { font-family: var(--vid-font-serif); }
.vid-sans        { font-family: var(--vid-font-sans);  }
.vid-italic      { font-style: italic; }

/* ---------- HEADLINE PATTERNS ---------- */

/* Eyebrow: tiny uppercase label sopra un H2/H3 (gold). */
.vid-eyebrow {
    font-family: var(--vid-font-sans);
    font-size: var(--vid-text-xs);
    font-weight: 700;
    color: var(--vid-gold-text);
    letter-spacing: var(--vid-tracking-widest);
    text-transform: uppercase;
    margin: 0 0 var(--vid-s-2) 0;
}

/* Wordmark: brand "VIVI IN DUE" con tracking esteso. Coerente cross-view
 * (header, auth, hero). Esistenti `.hero-brand-name` / `.header-text` /
 * `.auth-title` resteranno parallele finché PR3 li unifica.
 */
.vid-wordmark {
    font-family: var(--vid-font-sans);
    font-weight: 900;
    letter-spacing: var(--vid-tracking-widest);
    text-transform: uppercase;
    line-height: 1;
}
.vid-wordmark__accent {
    color: var(--vid-gold);
}

/* Narrative: paragrafo emotivo, racconto breve ("dal 1987", "Socia dal..."
 * "famiglia lavora il pane..."). Serif italic, dimensione body. Da usare
 * sopra/sotto l'offerta in detail view (PR5) e in tessera (PR6).
 */
.vid-narrative {
    font-family: var(--vid-font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: var(--vid-text-base);
    line-height: var(--vid-lh-loose);
    color: var(--vid-ink-soft);
}

/* Timestamp: "Adesso · martedì sera" — serif italic, gold, piccolo. */
.vid-timestamp {
    font-family: var(--vid-font-serif);
    font-style: italic;
    font-weight: 500;
    font-size: var(--vid-text-sm);
    color: var(--vid-gold-text);
    letter-spacing: var(--vid-tracking-normal);
}

/* Counter hero: numero grande Playfair italic gold (per time-strip PR4). */
.vid-counter {
    font-family: var(--vid-font-serif);
    font-style: italic;
    font-weight: 700;
    font-size: var(--vid-text-hero);
    color: var(--vid-gold);
    line-height: 1;
    letter-spacing: var(--vid-tracking-tight);
}

/* Greeting: "Buonasera, Roberto." mixed Inter + Playfair italic sul nome. */
.vid-greeting {
    font-family: var(--vid-font-sans);
    font-weight: 700;
    font-size: var(--vid-text-2xl);
    line-height: var(--vid-lh-tight);
    color: var(--vid-ink);
    margin: 0;
}
.vid-greeting__name {
    font-family: var(--vid-font-serif);
    font-style: italic;
    font-weight: 500;
    color: var(--vid-ink);
}

/* Section heading: eyebrow + h2. Componibili nei nuovi feed sections. */
.vid-section-title {
    font-family: var(--vid-font-sans);
    font-weight: 800;
    font-size: var(--vid-text-xl);
    line-height: var(--vid-lh-snug);
    color: var(--vid-ink);
    margin: 0 0 var(--vid-s-3) 0;
    letter-spacing: var(--vid-tracking-tight);
}
.vid-section-hint {
    font-family: var(--vid-font-sans);
    font-size: var(--vid-text-sm);
    color: var(--vid-muted);
    margin: 0 0 var(--vid-s-3) 0;
}