/* app/static/css/base/typography.css */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

/* Base Typography */
body {
    font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: var(--text-dark);
    font-size: 16px;
    /* Firefox scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--primary-blue) var(--background);
}
/* WebKit-based browsers (Chrome, Edge, Safari) */
body::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

body::-webkit-scrollbar-track {
    background: var(--background);
    border-radius: 8px;
    margin: 4px 0;
}

body::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--primary-blue), var(--accent-purple));
    border-radius: 8px;
    border: 3px solid var(--background);
    min-height: 40px;
}

body::-webkit-scrollbar-thumb:hover {
    filter: brightness(1.05);
}

body::-webkit-scrollbar-corner {
    background: var(--background);
}
html, body {
    scrollbar-width: thin;
    scrollbar-color: var(--primary-blue) var(--background);
}

/* WebKit */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
    background: var(--background);
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--primary-blue), var(--accent-purple));
    border-radius: 8px;
    border: 3px solid var(--background);
}


/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: var(--space-md);
    color: var(--text-dark);
}

h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
}

h2 {
    font-size: clamp(2rem, 4vw, 3rem);
}

h3 {
    font-size: clamp(1.5rem, 3vw, 2rem);
}

h4 {
    font-size: 1.25rem;
}

/* Paragraphs */
p {
    margin-bottom: var(--space-md);
    color: var(--text-soft);
    line-height: 1.6;
}

/* Links */
a {
    color: var(--primary-blue);
    text-decoration: none;
    transition: color var(--transition-fast);
}



/* Special Text Classes */
.text-gradient {
    background: linear-gradient(135deg, var(--primary-blue), var(--accent-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-primary {
    color: var(--primary-blue);
}

.text-success {
    color: var(--success);
}

.text-warning {
    color: var(--warning);
}

.text-error {
    color: var(--error);
}

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

/* Code */
code {
    font-family: 'Space Mono', monospace;
    background: var(--background);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    border: 1px solid var(--border);
}

pre {
    font-family: 'Space Mono', monospace;
    background: var(--surface);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    overflow-x: auto;
    border: 1px solid var(--border);
    margin-bottom: var(--space-md);
}

/* Lists */
ul, ol {
    margin-bottom: var(--space-md);
    padding-left: var(--space-lg);
}

li {
    margin-bottom: var(--space-sm);
    color: var(--text-soft);
}

/* Utilities */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

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

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