/* Typography System */

/************************************************************
 * BASE TYPOGRAPHY SETUP
 *
 * We use two CSS custom properties:
 *   --font-headline  → titles, subtitles, big labels
 *   --font-body      → article body text, metadata, etc.
 *
 * Themes below just override these two variables.
 ************************************************************/

:root {
    /* Default stack if no theme class is applied */
    --font-headline: "Georgia", "Times New Roman", Times, serif;
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI",
        "Helvetica Neue", Arial, sans-serif;
}

/* Typography hooks - consistent terminology: headline and body */
.headline,
.article-headline,
.article-subtitle,
.article-kicker {
    font-family: var(--font-headline);
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

.body,
.article-body,
.article-byline,
.article-meta {
    font-family: var(--font-body);
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

/* Typographic tuning for headlines */
.headline,
.article-headline {
    font-weight: 700;
    line-height: 1.05;
}

.article-subtitle {
    font-weight: 600;
    line-height: 1.2;
}

/* Typographic tuning for body text */
.body,
.article-body {
    font-weight: 400;
    line-height: 1.5;
}

/* Apply body font to paragraphs in article content */
.reader-content p {
    font-family: var(--font-body);
    font-size: 1.125rem;
    line-height: 1.56rem;
}

/************************************************************
 * 1. "Classic Broadsheet"
 * Vibe: serious, newspaper, very neutral.
 ************************************************************/
.theme-classic-broadsheet {
    /* Headlines / standfirst (serif) */
    --font-headline: "Georgia", "Times New Roman", Times, serif;
    /* Body text (sans-serif, system-UI style) */
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI",
        "Helvetica Neue", Arial, sans-serif;
}

/************************************************************
 * 2. "Guardian-ish"
 * Vibe: modern European broadsheet — big, chunky serif
 *       headlines with clean sans-serif body text.
 *
 * Note: "Merriweather" is a Google Font. If it isn't loaded,
 *       the stack falls back to Georgia/Times.
 ************************************************************/
.theme-guardian-ish {
    /* Headlines (serif) */
    --font-headline: "Merriweather", "Georgia",
        "Times New Roman", Times, serif;
    /* Body (sans-serif) */
    --font-body: "Helvetica Neue", Helvetica, Arial,
        "Nimbus Sans", sans-serif;
}

/************************************************************
 * 3. "NYT / Magazine"
 * Vibe: more elegant, high-end magazine front page.
 *
 * Note: "Playfair Display" is a Google Font. Without it,
 *       this falls back to Times/Georgia.
 ************************************************************/
.theme-nyt-magazine {
    /* Headlines (serif, high contrast) */
    --font-headline: "Playfair Display", "Times New Roman",
        "Georgia", serif;
    /* Body (serif, calmer reading) */
    --font-body: "Georgia", "Times New Roman", Times, serif;
}

/************************************************************
 * 4. "US Cable News"
 * Vibe: bold sans-serif headlines (CNN / USA Today / Fox),
 *       readable serif body text.
 ************************************************************/
.theme-us-cable {
    /* Headlines (sans-serif – loud and clear) */
    --font-headline: "Helvetica Neue", Helvetica, Arial,
        system-ui, sans-serif;
    /* Body (serif for a slight print feel) */
    --font-body: "Georgia", "Times New Roman", Times, serif;
}

/************************************************************
 * 5. "Digital Native / Bloggy"
 * Vibe: clean product/UI style, like modern apps and big blogs.
 *
 * Note: "Inter" is a popular open-source UI font. If you don't
 *       load it, this gracefully falls back to system UI fonts.
 ************************************************************/
.theme-digital-native {
    /* Headlines (sans-serif, strong UI flavor) */
    --font-headline: "Inter", -apple-system, BlinkMacSystemFont,
        "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    /* Body (serif to keep some "print" character) */
    --font-body: "Georgia", "Times New Roman", Times, serif;
}

/************************************************************
 * 6. "Compact Tabloid"
 * Vibe: punchy, tighter copy, more utilitarian — good for
 *       high-density layouts and shorter stories.
 *
 * Note: "Cormorant Garamond" and "Roboto" are Google Fonts.
 *       Without them, we fall back to Garamond / Helvetica / Arial.
 ************************************************************/
.theme-compact-tabloid {
    /* Headlines (serif, slightly compact and dramatic) */
    --font-headline: "Cormorant Garamond", "Garamond",
        "Times New Roman", Times, serif;
    /* Body (sans-serif, sturdy & very readable) */
    --font-body: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
}