/* Typography — Font declarations and text utilities */

/* Font-face declarations (loaded from Google Fonts via link tags, but
   defined here for fallback/self-hosted scenarios) */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Inter Regular'), local('Inter-Regular');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: local('Inter Medium'), local('Inter-Medium');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: local('Inter SemiBold'), local('Inter-SemiBold');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('Inter Bold'), local('Inter-Bold');
}

@font-face {
    font-family: 'IBM Plex Serif';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('IBM Plex Serif'), local('IBMPlexSerif');
}

@font-face {
    font-family: 'IBM Plex Serif';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: local('IBM Plex Serif Medium'), local('IBMPlexSerif-Medium');
}

@font-face {
    font-family: 'IBM Plex Serif';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: local('IBM Plex Serif SemiBold'), local('IBMPlexSerif-SemiBold');
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('JetBrains Mono'), local('JetBrainsMono-Regular');
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: local('JetBrains Mono Medium'), local('JetBrainsMono-Medium');
}

/* Heading styles */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-serif);
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-text-primary);
}

h1 { font-size: var(--text-4xl); font-weight: 700; }
h2 { font-size: var(--text-3xl); font-weight: 700; }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }

@media (min-width: 768px) {
    h1 { font-size: 4.5rem; }  /* 72px */
    h2 { font-size: 3rem; }    /* 48px */
    h3 { font-size: 1.5rem; }  /* 24px */
}

/* Text utilities */
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-tertiary { color: var(--color-text-tertiary); }
.text-accent { color: var(--color-accent-cyan); }

.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }
.text-4xl { font-size: var(--text-4xl); }
.text-5xl { font-size: var(--text-5xl); }

.font-ui { font-family: var(--font-ui); }
.font-serif { font-family: var(--font-serif); }
.font-mono { font-family: var(--font-mono); }

.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

.leading-tight { line-height: 1.2; }
.leading-normal { line-height: 1.6; }
.leading-relaxed { line-height: 1.8; }

.tracking-tight { letter-spacing: -0.02em; }
.tracking-normal { letter-spacing: 0; }
.tracking-wide { letter-spacing: 0.05em; }

.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Prose: long-form content styling */
.prose {
    font-size: var(--text-base);
    line-height: 1.8;
    color: var(--color-text-secondary);
}

.prose h1,
.prose h2,
.prose h3,
.prose h4 {
    color: var(--color-text-primary);
    margin-top: 2em;
    margin-bottom: 0.5em;
}

.prose p {
    margin-bottom: 1.25em;
}

.prose a {
    color: var(--color-accent-cyan);
    border-bottom: 1px solid transparent;
    transition: border-color var(--transition-fast);
}

.prose a:hover {
    border-bottom-color: var(--color-accent-cyan);
}

.prose ul,
.prose ol {
    margin-bottom: 1.25em;
    padding-left: 1.5em;
}

.prose ul {
    list-style: disc;
}

.prose ol {
    list-style: decimal;
}

.prose li {
    margin-bottom: 0.5em;
}

.prose blockquote {
    border-left: 3px solid var(--color-accent-cyan);
    padding-left: var(--space-md);
    margin: 1.5em 0;
    color: var(--color-text-secondary);
    font-style: italic;
}