/**
 * typography.css — Font stack and typographic baseline.
 *
 * Covers font-family, base font sizes, and line-height rhythm.
 * Font-size values are sizing styles and intentionally live here
 * alongside the font declarations they belong to.
 * Color styles for text are handled via Tailwind utilities that
 * reference tokens in colors.css.
 */

/* ── Font import ── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=Inter:wght@400;500;600;700&display=swap');

/* ── Base document typography ── */
html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: 'DM Sans', 'Inter', 'Helvetica Neue', Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-text-primary);
}

/* ── Element-level line-height rhythm ── */
p,
li,
label {
    line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5 {
    line-height: 1.2;
}

/* ── Heading scale ── */
h1 { font-size: 1.5rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.125rem; }

h1, h2, h3, h4, h5 { letter-spacing: -0.02em; }