/* ============================================================
   TYPOGRAPHY.CSS — Bazowe style tekstu
   Font: Inter (Google Fonts)
   ============================================================ */

/* --- Nagłówki --- */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: var(--font-bold);
    line-height: 1.2;
    color: var(--color-slate-950);
}

h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-2xl); }
h5 { font-size: var(--text-xl); }
h6 { font-size: var(--text-lg); }

/* Nagłówki na ciemnym tle */
.dark h1, .dark h2, .dark h3,
.dark h4, .dark h5, .dark h6 {
    color: var(--color-white);
}

/* --- Paragrafy --- */

p {
    font-size: var(--text-base);
    line-height: 1.75;
    color: var(--color-slate-700);
}

p.lead {
    font-size: var(--text-lg);
    font-weight: var(--font-medium);
    color: var(--color-slate-700);
}

.dark p {
    color: var(--color-slate-300);
}

/* --- Klasy pomocnicze typografii --- */

.text-accent {
    color: var(--color-primary);
}

.text-success {
    color: var(--color-success);
}

.text-muted {
    color: var(--color-slate-500);
    font-size: var(--text-sm);
}

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

/* --- Section label (mały nagłówek nad sekcją) --- */

.section-label {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: var(--space-3);
}

/* --- Responsywność nagłówków --- */

@media (max-width: 768px) {
    h1 { font-size: var(--text-4xl); }
    h2 { font-size: var(--text-3xl); }
    h3 { font-size: var(--text-2xl); }
}

@media (max-width: 480px) {
    h1 { font-size: var(--text-3xl); }
    h2 { font-size: var(--text-2xl); }
    h3 { font-size: var(--text-xl); }
}