/* Font/typography options — applied via body class */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600&family=IBM+Plex+Sans:wght@300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Libre+Franklin:wght@300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;500;600;700&family=Roboto:wght@300;400;500&display=swap');

/* ── 1. Classic Serif (default — Playfair Display + Source Sans 3) ── */
/* No class needed: this is the baseline from style.css */

/* ── 2. Modern Sans — Inter ── */
body.font-modern {
    --font-heading: 'Inter', -apple-system, sans-serif;
    --font-body: 'Inter', -apple-system, sans-serif;
    font-family: var(--font-body);
    letter-spacing: -0.01em;
    line-height: 1.6;
}
body.font-modern h1, body.font-modern h2, body.font-modern h3 {
    font-family: var(--font-heading);
    letter-spacing: -0.02em;
    font-weight: 600;
}
body.font-modern header .logo {
    font-family: var(--font-heading);
    letter-spacing: -0.01em;
    text-transform: none;
    font-weight: 700;
}
body.font-modern label {
    font-family: var(--font-body);
    letter-spacing: 0.04em;
}
body.font-modern .btn {
    font-family: var(--font-body);
    letter-spacing: 0.02em;
}
body.font-modern .ranked-list li::before {
    font-family: var(--font-heading);
}

/* ── 3. Geometric — DM Sans ── */
body.font-geometric {
    --font-heading: 'DM Sans', sans-serif;
    --font-body: 'DM Sans', sans-serif;
    font-family: var(--font-body);
    letter-spacing: 0;
    line-height: 1.6;
}
body.font-geometric h1, body.font-geometric h2, body.font-geometric h3 {
    font-family: var(--font-heading);
    letter-spacing: -0.01em;
    font-weight: 700;
}
body.font-geometric header .logo {
    font-family: var(--font-heading);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-weight: 700;
}
body.font-geometric label {
    font-family: var(--font-body);
    letter-spacing: 0.06em;
}
body.font-geometric .btn {
    font-family: var(--font-body);
    letter-spacing: 0.04em;
}
body.font-geometric .ranked-list li::before {
    font-family: var(--font-heading);
}

/* ── 4. Monospace — IBM Plex Mono + IBM Plex Sans ── */
body.font-mono {
    --font-heading: 'IBM Plex Mono', 'Courier New', monospace;
    --font-body: 'IBM Plex Sans', -apple-system, sans-serif;
    font-family: var(--font-body);
    letter-spacing: 0;
    line-height: 1.6;
}
body.font-mono h1, body.font-mono h2, body.font-mono h3 {
    font-family: var(--font-heading);
    letter-spacing: 0;
    font-weight: 600;
}
body.font-mono header .logo {
    font-family: var(--font-heading);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 1.1rem;
}
body.font-mono header nav a {
    font-family: var(--font-heading);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
}
body.font-mono label {
    font-family: var(--font-heading);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
}
body.font-mono .btn {
    font-family: var(--font-heading);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
}
body.font-mono .ranked-list li::before {
    font-family: var(--font-heading);
    font-size: 1.2rem;
}

/* ── 5. Literary — Libre Baskerville + Libre Franklin ── */
body.font-literary {
    --font-heading: 'Libre Baskerville', 'Georgia', serif;
    --font-body: 'Libre Franklin', 'Helvetica Neue', sans-serif;
    font-family: var(--font-body);
    letter-spacing: 0;
    line-height: 1.7;
}
body.font-literary h1, body.font-literary h2, body.font-literary h3 {
    font-family: var(--font-heading);
    letter-spacing: -0.01em;
    font-weight: 700;
    font-style: normal;
}
body.font-literary header .logo {
    font-family: var(--font-heading);
    text-transform: none;
    /* True italic wordmark: genuine Libre Baskerville 400-italic (the @import
       loads the real ital,wght@1,400 face, so this is NOT the synthesized "faux
       italic" we started with). Deliberately weight 400 — Libre Baskerville has
       no 700-italic face — which gives the "editorial masthead" look. */
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0.02em;
}
body.font-literary label {
    font-family: var(--font-body);
    letter-spacing: 0.06em;
}
body.font-literary .btn {
    font-family: var(--font-body);
    letter-spacing: 0.04em;
}
body.font-literary .ranked-list li::before {
    font-family: var(--font-heading);
}

/* ── 6. Bold Display — Space Grotesk ── */
body.font-display {
    --font-heading: 'Space Grotesk', sans-serif;
    --font-body: 'Space Grotesk', sans-serif;
    font-family: var(--font-body);
    letter-spacing: -0.01em;
    line-height: 1.6;
}
body.font-display h1, body.font-display h2, body.font-display h3 {
    font-family: var(--font-heading);
    letter-spacing: -0.03em;
    font-weight: 700;
}
body.font-display h1 { font-size: 1.4rem; }
body.font-display header .logo {
    font-family: var(--font-heading);
    letter-spacing: -0.02em;
    text-transform: uppercase;
    font-weight: 700;
}
body.font-display label {
    font-family: var(--font-body);
    letter-spacing: 0.06em;
    font-weight: 500;
}
body.font-display .btn {
    font-family: var(--font-body);
    letter-spacing: 0.03em;
    font-weight: 600;
}
body.font-display .ranked-list li::before {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 700;
}

/* ── 7. Slab — Roboto Slab + Roboto ── */
body.font-slab {
    --font-heading: 'Roboto Slab', 'Georgia', serif;
    --font-body: 'Roboto', -apple-system, sans-serif;
    font-family: var(--font-body);
    letter-spacing: 0;
    line-height: 1.6;
    font-weight: 400;
}
body.font-slab h1, body.font-slab h2, body.font-slab h3 {
    font-family: var(--font-heading);
    letter-spacing: 0;
    font-weight: 600;
}
body.font-slab header .logo {
    font-family: var(--font-heading);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-weight: 700;
}
body.font-slab label {
    font-family: var(--font-body);
    letter-spacing: 0.06em;
    font-weight: 500;
}
body.font-slab .btn {
    font-family: var(--font-body);
    letter-spacing: 0.04em;
}
body.font-slab .ranked-list li::before {
    font-family: var(--font-heading);
}