/*
 * OSFILE Frontend Typography System — V10
 * Strict responsive hierarchy requested for the Printer Tool Library.
 * Mobile-first sizes mirror Tailwind: text-2xl/md:text-4xl, etc.
 */

:root {
    --os-type-hero-mobile: 1.5rem;       /* 24px */
    --os-type-hero-desktop: 2.25rem;     /* 36px */
    --os-type-section-mobile: 1.25rem;   /* 20px */
    --os-type-section-desktop: 1.5rem;   /* 24px */
    --os-type-card-mobile: 1rem;         /* 16px */
    --os-type-card-desktop: 1.125rem;    /* 18px */
    --os-type-body-mobile: 0.75rem;      /* 12px */
    --os-type-body-desktop: 0.875rem;    /* 14px */
    --os-type-meta-mobile: 0.6875rem;    /* 11px */
    --os-type-meta-desktop: 0.75rem;     /* 12px */
    --os-type-button-mobile: 0.75rem;    /* 12px */
    --os-type-button-desktop: 0.875rem;  /* 14px */
    --os-type-code-mobile: 0.75rem;      /* 12px */
    --os-type-code-desktop: 0.8125rem;   /* 13px */
}

/* ---------- Headings: one hierarchy across every frontend surface ---------- */
main h1 {
    font-family: Manrope, Inter, system-ui, -apple-system, "Segoe UI", sans-serif !important;
    font-size: var(--os-type-hero-mobile) !important;
    font-weight: 800 !important;
    line-height: 1.16 !important;
    letter-spacing: -0.025em !important;
}

main h2 {
    font-family: Manrope, Inter, system-ui, -apple-system, "Segoe UI", sans-serif !important;
    font-size: var(--os-type-section-mobile) !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.015em !important;
}

main h3 {
    font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif !important;
    font-size: var(--os-type-card-mobile) !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    letter-spacing: -0.01em !important;
}

/* ---------- Body copy / technical instructions ---------- */
main p,
main li,
main td,
main dd,
main blockquote,
main .ut-copy,
main .ut-copy p,
main .ut-copy li {
    font-size: var(--os-type-body-mobile) !important;
    font-weight: 400 !important;
    line-height: 1.72 !important;
    letter-spacing: 0 !important;
}

/* Technical article copy stays justified as requested; UI copy stays natural. */
.tool-unified .ut-article p,
.tool-unified .ut-article li,
.tool-unified .ut-disclaimer p,
.ep-main-article p,
.ep-main-article li,
.content-card p,
.content-card li {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
}

/* Hero descriptions are compact body copy, not oversized marketing text. */
main .ut-hero-description,
main .tl-hero-copy > p,
main .ep-hero p,
main .ep-series-hero p,
main .catalog-head p,
main .article-head > div > p {
    font-size: var(--os-type-body-mobile) !important;
    font-weight: 400 !important;
    line-height: 1.72 !important;
}

/* ---------- Card / row titles that are semantically strong rather than h3 ---------- */
main .tl-family-card strong,
main .tl-tool-card > strong,
main .tl-problem-card strong,
main .tl-list-card strong,
main .ph-brand-card strong,
main .ph-mini-card strong,
main .ph-model-grid strong,
main .ep-series-grid strong,
main .ep-model-card h3,
main .tool-card h3 {
    font-size: var(--os-type-card-mobile) !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    letter-spacing: -0.01em !important;
}

/* ---------- Metadata / badges / tags / breadcrumbs ---------- */
main small,
main .badge,
main [class*="-badge"],
main .ut-chip,
main .ut-section-label,
main .ut-breadcrumb,
main .ut-quick-row > span,
main .ut-file-row > span,
main .tl-hero-label,
main .tl-popular-searches,
main .tl-popular-searches strong,
main .tl-search-results small,
main .ep-kicker,
main .ep-breadcrumb,
main .ep-model-code,
main .ep-inline-badge,
main .ep-file-table span,
main .tool-meta span,
main .result-summary,
main .crumbs {
    font-size: var(--os-type-meta-mobile) !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
    letter-spacing: 0 !important;
}

/* Eyebrow labels can keep uppercase tracking while staying within metadata scale. */
main .ut-section-label,
main .tl-hero-label,
main .ep-kicker,
main .eyebrow,
main .section-title > span,
main .catalog-head > span {
    font-weight: 600 !important;
    letter-spacing: .08em !important;
}

/* ---------- CTA and form typography ---------- */
main button,
main .btn,
main a.ut-primary-btn,
main a.ut-secondary-btn,
main .ut-secondary-btn,
main a.ep-primary-btn,
main a.ep-secondary-btn,
main .ep-secondary-btn,
main .tl-search button,
main .ep-search button,
main .filter-bar button,
main .download-btn {
    font-size: var(--os-type-button-mobile) !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
}

main input,
main select,
main textarea {
    font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
}

/* ---------- Code / password / hashes / keys ---------- */
main code,
main pre,
main kbd,
main samp,
main .ep-hash-short {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
    font-size: var(--os-type-code-mobile) !important;
    font-weight: 500 !important;
    line-height: 1.55 !important;
}

/* ---------- Readability / accessibility safeguards ---------- */
.tool-unified,
.ep-hub,
.ep-article-page,
.tool-library-home,
.catalog-band,
.article-wrap {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.tool-unified .ut-article,
.ep-main-article,
.content-card {
    color: #334155;
}

.tool-unified .ut-article h1,
.tool-unified .ut-article h2,
.tool-unified .ut-article h3,
.ep-main-article h1,
.ep-main-article h2,
.ep-main-article h3,
.content-card h1,
.content-card h2,
.content-card h3 {
    color: #0f172a;
}

/* Desktop breakpoint equivalent to Tailwind md:. */
@media (min-width: 768px) {
    main h1 {
        font-size: var(--os-type-hero-desktop) !important;
    }

    main h2 {
        font-size: var(--os-type-section-desktop) !important;
    }

    main h3,
    main .tl-family-card strong,
    main .tl-tool-card > strong,
    main .tl-problem-card strong,
    main .tl-list-card strong,
    main .ph-brand-card strong,
    main .ph-mini-card strong,
    main .ph-model-grid strong,
    main .ep-series-grid strong,
    main .ep-model-card h3,
    main .tool-card h3 {
        font-size: var(--os-type-card-desktop) !important;
    }

    main p,
    main li,
    main td,
    main dd,
    main blockquote,
    main .ut-copy,
    main .ut-copy p,
    main .ut-copy li,
    main .ut-hero-description,
    main .tl-hero-copy > p,
    main .ep-hero p,
    main .ep-series-hero p,
    main .catalog-head p,
    main .article-head > div > p {
        font-size: var(--os-type-body-desktop) !important;
    }

    main small,
    main .badge,
    main [class*="-badge"],
    main .ut-chip,
    main .ut-section-label,
    main .ut-breadcrumb,
    main .ut-quick-row > span,
    main .ut-file-row > span,
    main .tl-hero-label,
    main .tl-popular-searches,
    main .tl-popular-searches strong,
    main .tl-search-results small,
    main .ep-kicker,
    main .ep-breadcrumb,
    main .ep-model-code,
    main .ep-inline-badge,
    main .ep-file-table span,
    main .tool-meta span,
    main .result-summary,
    main .crumbs {
        font-size: var(--os-type-meta-desktop) !important;
    }

    main button,
    main .btn,
    main a.ut-primary-btn,
    main a.ut-secondary-btn,
    main .ut-secondary-btn,
    main a.ep-primary-btn,
    main a.ep-secondary-btn,
    main .ep-secondary-btn,
    main .tl-search button,
    main .ep-search button,
    main .filter-bar button,
    main .download-btn {
        font-size: var(--os-type-button-desktop) !important;
    }

    main code,
    main pre,
    main kbd,
    main samp,
    main .ep-hash-short {
        font-size: var(--os-type-code-desktop) !important;
    }
}