/**
 * PIXSOLS TYPOGRAPHY — Inter font + readability polish
 *
 * Loaded by all HTML pages to ensure consistent typography.
 * Uses `html body` selector (specificity 0,0,2) to override
 * per-page inline <style> body declarations (specificity 0,0,1).
 */

/* ===== Inter Font Loading ===== */
/* Self-hosted Inter font (no external dependencies, CSP-compliant) */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/inter/Inter-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/inter/Inter-Medium.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/inter/Inter-SemiBold.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/inter/Inter-Bold.woff2') format('woff2');
}

/* ===== Global Font Override ===== */
html body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
}

/* Ensure form elements and buttons inherit Inter */
html input,
html textarea,
html select,
html button {
    font-family: inherit;
}

/* ===== Heading Hierarchy Polish ===== */
html h1 {
    letter-spacing: -0.03em;
    line-height: 1.15;
}

html h2 {
    letter-spacing: -0.02em;
    line-height: 1.2;
}

html h3 {
    letter-spacing: -0.015em;
    line-height: 1.25;
}

html h4, html h5, html h6 {
    letter-spacing: -0.01em;
    line-height: 1.3;
}

/* ===== Paragraph Readability ===== */
html p {
    line-height: 1.65;
}

html li {
    line-height: 1.6;
}

/* Readable line length for paragraphs on wide screens */
html p {
    max-width: 75ch;
}

/* Exempt centered text, footers, and constrained containers */
html footer p,
html [style*="text-align: center"] p,
html [style*="text-align:center"] p,
html .text-center p,
html .hero p,
html .plan-card p,
html .product-card p,
html .principle-card p,
html .evidence-card p,
html .cta-buttons + p,
html .plans-grid p,
html .note p {
    max-width: none;
}

/* ===== Mobile Readability ===== */
@media (max-width: 767px) {
    html p {
        line-height: 1.7;
    }
}