/**
 * Elite Tactician Design System - Typography v3
 * Space Grotesk (display/headlines), Inter (body), JetBrains Mono (data)
 *
 * Version: 3.0
 * Date: March 2026
 */

/* =========================================
   BASE TYPOGRAPHY
   ========================================= */
body {
    font-family: var(--font-body);
    color: var(--et-on-surface);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* =========================================
   HEADINGS - Space Grotesk
   ========================================= */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-display);
    color: var(--et-on-surface);
    letter-spacing: -0.02em;
}

h1, .h1 {
    font-weight: 900;
    letter-spacing: -0.03em;
}

h2, .h2 {
    font-weight: 700;
    letter-spacing: -0.025em;
}

/* Page title - hero style */
.page-title-text,
.title-hero {
    font-family: var(--font-headline);
    color: var(--et-primary);
    letter-spacing: -0.03em;
}

/* Section title - uppercase label */
.section-title,
.title-section {
    font-family: var(--font-headline);
    color: var(--et-on-surface-variant);
}

/* =========================================
   BODY TEXT
   ========================================= */
p {
    color: var(--text-secondary);
}

/* =========================================
   LINKS - Crimson
   ========================================= */
.main-content a:not(.btn),
.main-content-v3 a:not(.btn),
.modal-content a:not(.btn),
article a:not(.btn) {
    color: var(--et-secondary);
}

.main-content a:not(.btn):hover,
.main-content-v3 a:not(.btn):hover,
.modal-content a:not(.btn):hover,
article a:not(.btn):hover {
    color: var(--goal-red-hover);
}

a:focus-visible {
    outline: 2px solid var(--et-secondary);
    outline-offset: 2px;
}

/* =========================================
   CODE - Primary container background
   ========================================= */
code {
    background: var(--et-surface-container);
    color: var(--et-secondary);
}

pre {
    background: var(--et-primary);
}

kbd {
    background: var(--et-primary-container);
}

/* =========================================
   BLOCKQUOTE - Crimson accent
   ========================================= */
blockquote {
    border-left-color: var(--et-secondary);
    background: var(--et-surface-container-low);
}

/* =========================================
   HR - Ghost border
   ========================================= */
hr {
    background: rgba(197, 198, 205, 0.2);
}

/* =========================================
   FONT FAMILY UTILITIES
   ========================================= */
.font-headline { font-family: var(--font-headline); }