/**
 * docs/design/03_Typography.md — Plus Jakarta Sans (headings) + Inter (body).
 * Self-hosted per §3.11 to avoid a third-party render-blocking request.
 *
 * NOTE: the variable-font .woff2 binaries referenced below are not part of
 * this codebase (binary assets can't be authored as source code) — download
 * the variable-font files for Plus Jakarta Sans, Inter, and JetBrains Mono
 * from Google Fonts / the JetBrains Mono repo and place them at the paths
 * below before launch. Every font-family token already lists a system
 * sans-serif/monospace fallback (assets/css/variables.css), so the site
 * renders correctly with system fonts in the meantime — this is a content
 * asset to add, not a functional gap in the CSS itself.
 */

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/assets/fonts/plus-jakarta-sans-var.woff2') format('woff2-variations');
    font-weight: 400 800;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('/assets/fonts/inter-var.woff2') format('woff2-variations');
    font-weight: 400 700;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('/assets/fonts/jetbrains-mono-var.woff2') format('woff2-variations');
    font-weight: 400 700;
    font-display: swap;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-body-md);
    color: var(--color-neutral-900);
    background: var(--color-neutral-50);
}

h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 {
    font-family: var(--font-heading);
    font-weight: var(--weight-semibold);
    color: var(--color-neutral-900);
}

h1, .h1 { font-size: var(--text-h1); line-height: var(--leading-tight); font-weight: var(--weight-bold); }
h2, .h2 { font-size: var(--text-h2); line-height: var(--leading-snug); }
h3, .h3 { font-size: var(--text-h3); line-height: var(--leading-snug); }
h4, .h4 { font-size: var(--text-h4); line-height: 1.35; }
h5, .h5 { font-size: var(--text-h5); line-height: 1.4; font-family: var(--font-body); }

.display-xl { font-family: var(--font-heading); font-size: var(--text-display-xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); }
.display-lg { font-family: var(--font-heading); font-size: var(--text-display-lg); font-weight: var(--weight-bold); line-height: 1.15; }

p, .body-md { font-size: var(--text-body-md); line-height: var(--leading-relaxed); }
.body-lg { font-size: var(--text-body-lg); line-height: var(--leading-relaxed); color: var(--color-neutral-700); }
.subtitle { font-size: var(--text-subtitle); line-height: var(--leading-normal); color: var(--color-neutral-700); }
.body-sm { font-size: var(--text-body-sm); line-height: var(--leading-normal); color: var(--color-neutral-700); }
.caption { font-size: var(--text-caption); color: var(--color-neutral-500); }

.eyebrow {
    font-size: var(--text-label);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-primary-600);
    margin-bottom: var(--space-2);
}

a {
    color: var(--color-primary-700);
    transition: color var(--duration-fast) var(--ease-out);
}

a:hover {
    color: var(--color-link-hover-text);
    text-decoration: underline;
}

.rich-text {
    max-width: 720px;
    font-size: 1.1875rem;
    line-height: var(--leading-relaxed);
    color: var(--color-neutral-900);
}

.rich-text p { margin-bottom: var(--space-5); }
.rich-text li { margin-bottom: var(--space-2); }
.rich-text h2 { margin: var(--space-8) 0 var(--space-4); }
.rich-text h3 { margin: var(--space-6) 0 var(--space-3); }
.rich-text ul, .rich-text ol { margin-bottom: var(--space-4); padding-left: var(--space-6); }
.rich-text ul { list-style: disc; }
.rich-text ol { list-style: decimal; }
.rich-text blockquote {
    border-left: 3px solid var(--color-primary-600);
    padding-left: var(--space-6);
    color: var(--color-neutral-700);
    font-size: var(--text-body-lg);
}

/* Pull-quote — a distinct larger/centred treatment CMS authors can reach
   for via <blockquote class="pull-quote"> to break up long-form copy. */
.rich-text blockquote.pull-quote {
    border-left: none;
    text-align: center;
    max-width: 560px;
    margin: var(--space-8) auto;
    font-family: var(--font-heading);
    font-size: var(--text-h4);
    font-weight: var(--weight-semibold);
    color: var(--color-primary-600);
    line-height: var(--leading-snug, 1.3);
}

.rich-text a {
    color: var(--color-secondary-700);
    font-weight: var(--weight-semibold);
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1.5px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    padding-bottom: 1px;
}

@media (prefers-reduced-motion: no-preference) {
    .rich-text a { transition: background-size var(--duration-base) var(--ease-out); }
}

@media (hover: hover) {
    .rich-text a:hover { background-size: 100% 1.5px; }
}

.rich-text figure { margin: var(--space-8) 0; }
.rich-text figure img { width: 100%; height: auto; border-radius: var(--radius-lg); display: block; }
.rich-text figcaption {
    margin-top: var(--space-2);
    text-align: center;
    font-size: var(--text-caption);
    color: var(--color-neutral-500);
}

.rich-text pre {
    background: var(--color-primary-900);
    color: var(--color-neutral-100);
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    overflow-x: auto;
    margin: var(--space-6) 0;
    font-size: var(--text-body-sm);
    line-height: var(--leading-relaxed);
}

.rich-text pre code {
    background: none;
    padding: 0;
    color: inherit;
}

code {
    font-family: var(--font-mono);
    font-size: var(--text-body-sm);
    background: var(--color-neutral-100);
    padding: 2px var(--space-1);
    border-radius: var(--radius-sm);
}

.container--reading {
    max-width: 720px;
}