/* css/base/typography.css */
@font-face {
    font-family: 'SF Pro Display';
    src: url('/assets/fonts/SFProDisplay-Regular.woff2') format('woff2'),
         url('/assets/fonts/SFProDisplay-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Display';
    src: url('/assets/fonts/SFProDisplay-Medium.woff2') format('woff2'),
         url('/assets/fonts/SFProDisplay-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Display';
    src: url('/assets/fonts/SFProDisplay-SemiboldItalic.woff2') format('woff2'),
         url('/assets/fonts/SFProDisplay-SemiboldItalic.woff') format('woff');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Display';
    src: url('/assets/fonts/SFProDisplay-Bold.woff2') format('woff2'),
         url('/assets/fonts/SFProDisplay-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Display';
    src: url('/assets/fonts/SFProDisplay-BlackItalic.woff2') format('woff2'),
         url('/assets/fonts/SFProDisplay-BlackItalic.woff') format('woff');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

html, body {
    font-family: var(--sys-font);
    font-size: 13px;
    color: var(--os-text-main);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body,
button,
input,
textarea,
select,
option,
label,
span,
p,
div,
li,
a {
    font-family: var(--sys-font);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--sys-font-bold);
    font-weight: 700;
    margin-bottom: 0.5em;
    color: var(--os-text-main);
    letter-spacing: -0.02em;
}

strong, b {
    font-family: var(--sys-font-bold);
    font-weight: 700;
}

em, i {
    font-family: var(--sys-font-italic);
    font-style: italic;
}

.terminal-font {
    font-family: 'Consolas', 'Courier New', monospace;
}

.text-accent {
    color: var(--os-accent);
}

.text-muted {
    color: var(--os-text-muted);
}