/*
 * RailScanPro Typography - Industrial Heritage
 * 
 * Font Stack:
 * - Bebas Neue: Display headlines (industrial, bold)
 * - Oswald: Section headings (geometric, strong)
 * - IBM Plex Sans: Body text (technical but readable)
 * - JetBrains Mono: Code, data (modern monospace)
 *
 * Created: December 2025
 */

/* ========================================
 * GOOGLE FONTS IMPORTS
 * ======================================== */

/* Bebas Neue - Display font for hero headlines */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

/* Oswald - Heading font with multiple weights */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&display=swap');

/* IBM Plex Sans - Body font with all weights */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

/* JetBrains Mono - Monospace for technical content */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ========================================
 * FONT FAMILY DEFINITIONS
 * ======================================== */

:root {
    --font-display: 'Bebas Neue', 'Oswald', 'Impact', sans-serif;
    --font-heading: 'Oswald', 'Archivo', 'Inter', sans-serif;
    --font-body: 'IBM Plex Sans', 'Source Sans 3', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', 'IBM Plex Mono', 'Fira Code', monospace;
}

/* ========================================
 * TYPOGRAPHY UTILITY CLASSES
 * ======================================== */

/* Display - Hero headlines */
.font-display {
    font-family: var(--font-display);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Heading - Section titles */
.font-heading {
    font-family: var(--font-heading);
    font-weight: 500;
}

/* Body - Default text */
.font-body {
    font-family: var(--font-body);
}

/* Mono - Technical content */
.font-mono {
    font-family: var(--font-mono);
}

/* ========================================
 * HEADLINE STYLES
 * ======================================== */

/* Hero headline - Bebas Neue */
.hero-headline {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 8vw, 5rem);
    line-height: 1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Section headline - Oswald */
.section-headline {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 600;
    line-height: 1.2;
}

/* Card headline - Oswald */
.card-headline {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.3;
}

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

/* Lead paragraph */
.text-lead {
    font-family: var(--font-body);
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* Body text */
.text-body {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-primary);
}

/* Small text */
.text-small {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-secondary);
}

/* Caption text */
.text-caption {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.025em;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* ========================================
 * DATA/TECHNICAL STYLES
 * ======================================== */

/* Data value - Large numbers */
.data-value {
    font-family: var(--font-mono);
    font-size: 2rem;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* Data label */
.data-label {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Code/Technical */
.code-text {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.6;
}

/* Version number */
.version-text {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.025em;
}

/* ========================================
 * BUTTON & UI TEXT STYLES
 * ======================================== */

/* Button text */
.btn-text {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* Button text - Large */
.btn-text-lg {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* Navigation text */
.nav-text {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 500;
}

/* Tab text */
.tab-text {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/* Badge text */
.badge-text {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ========================================
 * SPECIAL EFFECTS
 * ======================================== */

/* Railroad-style stencil text */
.text-stencil {
    font-family: var(--font-display);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    -webkit-text-stroke: 1px currentColor;
    -webkit-text-fill-color: transparent;
}

/* Brass embossed effect */
.text-embossed {
    font-family: var(--font-heading);
    text-shadow: 
        1px 1px 1px rgba(0, 0, 0, 0.3),
        -1px -1px 1px rgba(255, 255, 255, 0.1);
}

/* Industrial shadow */
.text-industrial-shadow {
    text-shadow: 
        2px 2px 0 var(--color-locomotive-black),
        4px 4px 0 rgba(0, 0, 0, 0.2);
}