/* web/static/css/base/_typography.css */

body {
    font-family: var(--font-sans);
    background-color: var(--surface-2);
    color: var(--text-1);
    margin: 0;
    line-height: var(--font-lineheight-3);
    font-size: var(--font-size-1);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-weight-6);
    line-height: var(--font-lineheight-2);
    color: var(--text-1);
    margin-block-start: 0;
    margin-block-end: var(--size-3);
}

h1 { font-size: var(--font-size-5); font-weight: var(--font-weight-6); }
h2 { font-size: var(--font-size-3); } /* Page/Section Titles */
h3 { font-size: var(--font-size-2); } /* Sub-section Titles */

a {
    color: var(--link-color);
    text-decoration: none;
    transition: color var(--transition-speed) ease;
}
a:hover {
    color: var(--brand);
    text-decoration: none;
}

p {
    margin-block-start: 0;
    margin-block-end: var(--size-4); /* Default paragraph spacing */
    max-width: var(--size-content-3); /* Limit line length for readability */
}

/* Utility Classes */
.text-muted { color: var(--text-2); }
.text-subtle { color: var(--text-3); }
.font-medium { font-weight: var(--font-weight-5); }
.font-semibold { font-weight: var(--font-weight-6); }
.font-bold { font-weight: var(--font-weight-7); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }