/**
 * Typography System
 * Urban gritty aesthetic with comic book influences
 * 
 * NOTE: Fonts are loaded via <link> in HTML for better performance.
 * Do NOT use @import here - it blocks rendering.
 */

/* ==========================================================================
   BASE TYPOGRAPHY
   ========================================================================== */

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--weight-regular);
    line-height: var(--leading-normal);
    color: var(--color-chalk);
}

/* ==========================================================================
   HEADINGS
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-heading);
    font-weight: var(--weight-regular);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-wide);
    color: var(--color-white);
    text-transform: uppercase;
}

h1, .h1 {
    font-size: var(--text-6xl);
    letter-spacing: var(--tracking-wider);
}

h2, .h2 {
    font-size: var(--text-5xl);
}

h3, .h3 {
    font-size: var(--text-4xl);
}

h4, .h4 {
    font-size: var(--text-3xl);
}

h5, .h5 {
    font-size: var(--text-2xl);
}

h6, .h6 {
    font-size: var(--text-xl);
}

/* ==========================================================================
   BODY TEXT
   ========================================================================== */

p {
    margin-bottom: var(--space-4);
    max-width: 122ch;
}

p:last-child {
    margin-bottom: 0;
}

.lead {
    font-size: var(--text-xl);
    line-height: var(--leading-relaxed);
    color: var(--color-cement);
}

.small {
    font-size: var(--text-sm);
}

strong, b,
.bold {
    font-weight: var(--weight-bold);
}

em, i,
.italic {
    font-style: italic;
}

/* ==========================================================================
   LINKS
   ========================================================================== */

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-white);
}

.link {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.link:hover {
    text-decoration-thickness: 2px;
}

/* ==========================================================================
   ACCENT TEXT - Graffiti Style
   ========================================================================== */

.text-accent,
.graffiti {
    font-family: var(--font-accent);
    letter-spacing: var(--tracking-normal);
    text-transform: none;
}

/* ==========================================================================
   CODE
   ========================================================================== */

code, kbd, samp, pre {
    font-family: var(--font-mono);
    font-size: 0.9em;
}

code {
    background-color: var(--color-brick-dark);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
}

pre {
    background-color: var(--color-black);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    overflow-x: auto;
    border-left: var(--border-thick) solid var(--color-brick-light);
}

pre code {
    background: none;
    padding: 0;
}

kbd {
    background-color: var(--color-brick);
    border: var(--border-thin) solid var(--color-brick-light);
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-2);
    box-shadow: inset 0 -2px 0 var(--color-brick-dark);
}

/* ==========================================================================
   LISTS
   ========================================================================== */

ul, ol {
    padding-left: var(--space-6);
    margin-bottom: var(--space-4);
}

li {
    margin-bottom: var(--space-2);
}

li:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   BLOCKQUOTES
   ========================================================================== */

blockquote {
    border-left: var(--border-thick) solid var(--color-brick-light);
    padding-left: var(--space-6);
    margin: var(--space-6) 0;
    font-style: italic;
    color: var(--color-cement);
}

blockquote cite {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    font-style: normal;
    color: var(--color-stone);
}

/* ==========================================================================
   HORIZONTAL RULE
   ========================================================================== */

hr {
    border: none;
    height: var(--border-medium);
    background: linear-gradient(
        90deg,
        transparent,
        var(--color-brick-light) 20%,
        var(--color-brick-light) 80%,
        transparent
    );
    margin: var(--space-8) 0;
}

/* ==========================================================================
   SELECTION
   ========================================================================== */

::selection {
    background-color: var(--color-white);
    color: var(--color-black);
}

/* ==========================================================================
   COLOR UTILITY CLASSES
   ========================================================================== */

.text-ai { color: var(--color-ai-primary); }
.text-fivem { color: var(--color-fivem-primary); }
.text-api { color: var(--color-api-primary); }
.text-muted { color: var(--color-stone); }
.text-white { color: var(--color-white); }