/* ========================================================================== 
   P.A.F. TYPOGRAPHY SYSTEM
   Sistema tipográfico premium para visual cyberpunk/hacker
   ========================================================================== */

/* ==========================================================================
   FONT IMPORTS
   ========================================================================== */

/* Orbitron - Display/Headers: Futurista e high-tech */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&display=swap');

/* JetBrains Mono - Body/Code: Monospace moderno e legível */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&display=swap');

/* Space Grotesk - UI/Navigation: Limpo e geométrico */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

/* Rajdhani - Accent/Subtitles: Técnico e angular */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap');

/* VT323 - Retro Terminal Effect */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

/* ==========================================================================
   CSS CUSTOM PROPERTIES - TYPOGRAPHY
   ========================================================================== */

:root {
    /* Font Families */
    --font-display: 'Orbitron', 'VT323', monospace;
    --font-body: 'JetBrains Mono', 'Courier Prime', 'Consolas', monospace;
    --font-ui: 'Space Grotesk', 'Segoe UI', sans-serif;
    --font-accent: 'Rajdhani', 'Arial Narrow', sans-serif;

    /* Font Sizes - Mobile First */
    --text-xs: clamp(0.625rem, 1.5vw, 0.75rem);
    /* 10-12px */
    --text-sm: clamp(0.75rem, 1.8vw, 0.875rem);
    /* 12-14px */
    --text-base: clamp(0.875rem, 2vw, 1rem);
    /* 14-16px */
    --text-lg: clamp(1rem, 2.2vw, 1.125rem);
    /* 16-18px */
    --text-xl: clamp(1.125rem, 2.5vw, 1.25rem);
    /* 18-20px */
    --text-2xl: clamp(1.25rem, 3vw, 1.5rem);
    /* 20-24px */
    --text-3xl: clamp(1.5rem, 4vw, 1.875rem);
    /* 24-30px */
    --text-4xl: clamp(1.875rem, 5vw, 2.25rem);
    /* 30-36px */
    --text-5xl: clamp(2.25rem, 6vw, 3rem);
    /* 36-48px */
    --text-6xl: clamp(2.75rem, 8vw, 3.75rem);
    /* 44-60px */
    --text-7xl: clamp(3.5rem, 10vw, 4.5rem);
    /* 56-72px */
    --text-hero: clamp(4rem, 12vw, 6rem);
    /* 64-96px */

    /* Line Heights */
    --leading-none: 1;
    --leading-tight: 1.15;
    --leading-snug: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.65;

    /* Letter Spacing */
    --tracking-tighter: -0.05em;
    --tracking-tight: -0.025em;
    --tracking-normal: 0;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;
    --tracking-ultra: 0.2em;
    --tracking-mega: 0.5em;

    /* Font Weights */
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-black: 900;
}

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

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    font-weight: var(--font-normal);
    letter-spacing: var(--tracking-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "liga" 1, "calt" 1;
}

/* ==========================================================================
   HEADING STYLES
   ========================================================================== */

/* Display Headers - Use Orbitron for maximum impact */
.display-hero {
    font-family: var(--font-display);
    font-size: var(--text-hero);
    font-weight: var(--font-black);
    line-height: var(--leading-none);
    letter-spacing: var(--tracking-tight);
    text-transform: uppercase;
}

.display-xl {
    font-family: var(--font-display);
    font-size: var(--text-7xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
}

.display-lg {
    font-family: var(--font-display);
    font-size: var(--text-5xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-normal);
}

/* Section Titles */
h1,
.h1 {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-wide);
}

h2,
.h2 {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: var(--font-semibold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-wide);
}

h3,
.h3 {
    font-family: var(--font-accent);
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
}

h4,
.h4 {
    font-family: var(--font-accent);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-wide);
}

/* ==========================================================================
   TEXT UTILITY CLASSES
   ========================================================================== */

/* Body Text Variants */
.text-body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
}

.text-body-sm {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
}

.text-body-lg {
    font-family: var(--font-body);
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
}

/* UI Text */
.text-ui {
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-wide);
}

.text-ui-sm {
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-wider);
}

/* Label/Badge Text */
.text-label {
    font-family: var(--font-accent);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
}

.text-label-lg {
    font-family: var(--font-accent);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-mega);
    text-transform: uppercase;
}

/* Code/Terminal Text */
.text-code {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--font-normal);
    line-height: var(--leading-relaxed);
    letter-spacing: var(--tracking-normal);
}

.text-terminal {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--font-normal);
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-wide);
}

/* Countdown/Stats Display */
.text-countdown {
    font-family: var(--font-display);
    font-weight: var(--font-bold);
    line-height: var(--leading-none);
    letter-spacing: var(--tracking-tight);
    font-variant-numeric: tabular-nums;
}

.text-stats {
    font-family: var(--font-body);
    font-weight: var(--font-bold);
    line-height: var(--leading-none);
    font-variant-numeric: tabular-nums;
}

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

/* Glitch Effect Text */
.text-glitch {
    position: relative;
}

.text-glitch::before,
.text-glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.text-glitch::before {
    animation: glitch-1 0.3s infinite linear alternate-reverse;
    color: hsla(var(--h-magenta), var(--s-magenta), var(--l-magenta), 0.75);
    clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
}

.text-glitch::after {
    animation: glitch-2 0.3s infinite linear alternate-reverse;
    color: hsla(var(--h-green), var(--s-green), var(--l-green), 0.75);
    clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
}

@keyframes glitch-1 {
    0% {
        transform: translate(-2px, -1px);
    }

    100% {
        transform: translate(2px, 1px);
    }
}

@keyframes glitch-2 {
    0% {
        transform: translate(2px, 1px);
    }

    100% {
        transform: translate(-2px, -1px);
    }
}

/* Scanline Effect */
.text-scanline {
    background: linear-gradient(transparent 50%,
            rgba(0, 0, 0, 0.15) 50%);
    background-size: 100% 4px;
    animation: scanlines 0.1s linear infinite;
}

@keyframes scanlines {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 0 4px;
    }
}

/* Gradient Text */
.text-gradient-green {
    background: linear-gradient(135deg,
            hsla(var(--h-green), var(--s-green), var(--l-green), 1) 0%,
            hsla(var(--h-green), var(--s-green), calc(var(--l-green) - 15%), 1) 50%,
            hsla(var(--h-green), var(--s-green), var(--l-green), 1) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-gradient-magenta {
    background: linear-gradient(135deg,
            hsla(var(--h-magenta), var(--s-magenta), var(--l-magenta), 1) 0%,
            hsla(var(--h-magenta), var(--s-magenta), calc(var(--l-magenta) + 10%), 1) 50%,
            hsla(var(--h-magenta), var(--s-magenta), var(--l-magenta), 1) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-gradient-cyber {
    background: linear-gradient(135deg,
            hsla(var(--h-green), var(--s-green), var(--l-green), 1) 0%,
            hsla(var(--h-magenta), var(--s-magenta), var(--l-magenta), 1) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Neon Text Shadows */
.text-neon-green {
    text-shadow:
        0 0 5px hsla(var(--h-green), var(--s-green), var(--l-green), 0.8),
        0 0 10px hsla(var(--h-green), var(--s-green), var(--l-green), 0.6),
        0 0 20px hsla(var(--h-green), var(--s-green), var(--l-green), 0.4),
        0 0 40px hsla(var(--h-green), var(--s-green), var(--l-green), 0.2);
}

.text-neon-magenta {
    text-shadow:
        0 0 5px hsla(var(--h-magenta), var(--s-magenta), var(--l-magenta), 0.8),
        0 0 10px hsla(var(--h-magenta), var(--s-magenta), var(--l-magenta), 0.6),
        0 0 20px hsla(var(--h-magenta), var(--s-magenta), var(--l-magenta), 0.4),
        0 0 40px hsla(var(--h-magenta), var(--s-magenta), var(--l-magenta), 0.2);
}

.text-shadow-magenta {
    text-shadow:
        0 0 10px hsla(var(--h-magenta), var(--s-magenta), var(--l-magenta), 0.7),
        0 0 20px hsla(var(--h-magenta), var(--s-magenta), var(--l-magenta), 0.5),
        0 0 30px hsla(var(--h-magenta), var(--s-magenta), var(--l-magenta), 0.3);
}

/* ==========================================================================
   COMPONENT-SPECIFIC TYPOGRAPHY
   ========================================================================== */

/* Navigation Tabs */
.tab-btn {
    font-family: var(--font-accent);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
}

/* Section Titles - Override */
.section-title {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
}

/* Card Titles */
.card-title {
    font-family: var(--font-accent);
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

/* Card Body */
.card-text {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--font-normal);
    line-height: var(--leading-relaxed);
}

/* Button Text */
.btn-text {
    font-family: var(--font-accent);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
}

/* Status/Badge Text */
.status-text {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
}

/* Countdown Big Display */
.countdown-display {
    font-family: var(--font-display);
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-tight);
    font-variant-numeric: tabular-nums lining-nums;
}

/* Protocol/Code Style */
.protocol-text {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--font-normal);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
}

/* Footer Text */
.footer-text {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--font-normal);
    letter-spacing: var(--tracking-wide);
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 768px) {
    :root {
        --text-base: 0.875rem;
    }

    .display-hero {
        letter-spacing: var(--tracking-normal);
    }

    .section-title {
        font-size: var(--text-2xl);
    }
}

@media (min-width: 1024px) {
    .display-hero {
        letter-spacing: var(--tracking-tighter);
    }
}

/* ==========================================================================
   FALLBACK FONT STYLES (maintains Tailwind compatibility)
   ========================================================================== */

.font-display {
    font-family: var(--font-display);
}

.font-body {
    font-family: var(--font-body);
}

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

.font-accent {
    font-family: var(--font-accent);
}

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