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

/* Title - Press Start 2P */
h1, .title-xl {
  font-family: var(--font-title);
  font-size: clamp(24px, 5vw, var(--size-xl));
  color: var(--color-neon-green);
  text-shadow: var(--glow-green);
  letter-spacing: 2px;
  text-transform: uppercase;
}

h2, .title-lg {
  font-family: var(--font-title);
  font-size: clamp(20px, 4vw, var(--size-lg));
  color: var(--color-neon-yellow);
  text-shadow: var(--glow-yellow);
  letter-spacing: 1.5px;
}

h3, .title-md {
  font-family: var(--font-title);
  font-size: clamp(16px, 3vw, var(--size-md));
  color: var(--color-neon-red);
  text-shadow: var(--glow-red);
  letter-spacing: 1px;
}

h4 {
  font-family: var(--font-body);
  font-size: var(--size-body);
  color: var(--color-text-primary);
  font-weight: 700;
}

/* Body Text - Noto Sans */
.body-text {
  font-family: var(--font-body);
  font-size: var(--size-body);
  color: var(--color-text-primary);
}

.body-text-sm {
  font-size: var(--size-sm);
  color: var(--color-text-secondary);
}

/* Timestamps - VT323 */
.timestamp, time {
  font-family: var(--font-retro);
  font-size: clamp(18px, 2vw, 24px);
  color: var(--color-neon-green);
  letter-spacing: 1px;
}

/* Labels - IBM Plex Mono */
.label, label {
  font-family: var(--font-mono);
  font-size: var(--size-caption);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 600;
}

/* Caption Text */
.caption {
  font-size: var(--size-caption);
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* Pixel Text Effect */
.pixel-text {
  font-family: var(--font-title);
  image-rendering: pixelated;
  text-rendering: optimizeSpeed;
}

/* Glitch Text Effect */
.glitch {
  position: relative;
  animation: glitch 3s infinite;
}

@keyframes glitch {
  0%, 90%, 100% {
    transform: translate(0);
  }
  92% {
    transform: translate(-2px, 2px);
  }
  94% {
    transform: translate(2px, -2px);
  }
  96% {
    transform: translate(-2px, -2px);
  }
  98% {
    transform: translate(2px, 2px);
  }
}

/* Neon Glow Text */
.neon-glow {
  animation: neon-pulse 2s ease-in-out infinite;
}

@keyframes neon-pulse {
  0%, 100% {
    text-shadow: 
      0 0 10px var(--color-neon-green),
      0 0 20px var(--color-neon-green),
      0 0 30px var(--color-neon-green);
  }
  50% {
    text-shadow: 
      0 0 5px var(--color-neon-green),
      0 0 10px var(--color-neon-green),
      0 0 15px var(--color-neon-green);
  }
}

/* Link Styles */
a.link-green {
  color: var(--color-neon-green);
  border-bottom: 1px solid transparent;
  transition: all var(--transition-fast);
}

a.link-green:hover {
  border-bottom-color: var(--color-neon-green);
  text-shadow: var(--glow-green);
}

/* Blockquote */
blockquote {
  border-left: 4px solid var(--color-neon-green);
  padding-left: var(--space-md);
  margin: var(--space-md) 0;
  font-style: italic;
  color: var(--color-text-secondary);
}

/* Code */
code, pre {
  font-family: var(--font-mono);
  background: rgba(0, 0, 0, 0.4);
  padding: var(--space-xs);
  border-radius: var(--radius-sm);
  font-size: var(--size-sm);
}

pre {
  padding: var(--space-md);
  overflow-x: auto;
  border: 1px solid var(--color-neon-green);
}