/*
 * Typography
 * Pritika — Editorial Personal Portfolio
 *
 * Playfair Display — serif headlines, quotes, poems
 * Inter — body text, navigation, metadata
 * Space Mono — dates, labels, tags, categories
 */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Inter:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Space+Mono:wght@400;700&display=swap');

/* ── Script Font ── */
.font-script {
    font-family: var(--font-script);
}

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

/* ── Display — enormous editorial masthead ── */
.display {
    font-family: var(--font-serif);
    font-size: var(--text-display);
    font-weight: 700;
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-display);
    color: var(--color-text);
}

/* ── Headings ── */
h1, .h1 {
    font-family: var(--font-serif);
    font-size: var(--text-h1);
    font-weight: 600;
    line-height: var(--leading-heading);
    letter-spacing: var(--tracking-heading);
    color: var(--color-text);
}

h2, .h2 {
    font-family: var(--font-serif);
    font-size: var(--text-h2);
    font-weight: 600;
    line-height: var(--leading-heading);
    letter-spacing: var(--tracking-heading);
    color: var(--color-text);
}

h3, .h3 {
    font-family: var(--font-serif);
    font-size: var(--text-h3);
    font-weight: 500;
    line-height: var(--leading-tight);
    letter-spacing: -0.01em;
    color: var(--color-text);
}

/* ── Body ── */
.body-lg {
    font-family: var(--font-sans);
    font-size: var(--text-body-lg);
    font-weight: 400;
    line-height: var(--leading-body);
    color: var(--color-text);
}

body {
    font-family: var(--font-sans);
    font-size: var(--text-body);
    font-weight: 400;
    line-height: var(--leading-body);
    color: var(--color-text);
}

/* ── Labels — Space Mono ── */
.label {
    font-family: var(--font-mono);
    font-size: var(--text-label);
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.label-sm {
    font-family: var(--font-mono);
    font-size: var(--text-tiny);
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
}

/* ── Section label with line ── */
.section-label {
    font-family: var(--font-mono);
    font-size: var(--text-tiny);
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: var(--space-16);
}

.section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

/* ── Muted text ── */
.text-muted {
    color: var(--color-text-muted);
}

/* ── Accent text ── */
.text-accent {
    color: var(--color-accent);
}

/* ── Serif italic (for thoughts, quotes) ── */
.serif-italic {
    font-family: var(--font-serif);
    font-style: italic;
}

/* ── Small text ── */
small, .text-small {
    font-size: var(--text-small);
}