/* ========================================
   Hour Gaming Ion – Fonts
   hg-fonts.css
   ======================================== */

/* Google Fonts imports handled via <link> in HTML for performance.
   This file defines font usage, fallbacks, and custom text styles. */

/* ── Font Stacks ────────────────────────── */
.font-display  { font-family: 'Orbitron', 'Syne', 'Space Grotesk', sans-serif; }
.font-body     { font-family: 'Inter', 'DM Sans', 'Helvetica Neue', sans-serif; }
.font-mono     { font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace; }
.font-accent   { font-family: 'Rajdhani', 'Barlow Condensed', sans-serif; }

/* ── Text Sizes ─────────────────────────── */
.text-xs   { font-size: 0.75rem; }
.text-sm   { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg   { font-size: 1.125rem; }
.text-xl   { font-size: 1.25rem; }
.text-2xl  { font-size: 1.5rem; }
.text-3xl  { font-size: 1.875rem; }
.text-4xl  { font-size: 2.25rem; }
.text-5xl  { font-size: 3rem; }
.text-6xl  { font-size: 3.75rem; }

/* ── Weights ────────────────────────────── */
.font-light    { font-weight: 300; }
.font-normal   { font-weight: 400; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }
.font-extrabold{ font-weight: 800; }
.font-black    { font-weight: 900; }

/* ── Letter Spacing ─────────────────────── */
.tracking-tighter { letter-spacing: -0.05em; }
.tracking-tight   { letter-spacing: -0.025em; }
.tracking-normal  { letter-spacing: 0; }
.tracking-wide    { letter-spacing: 0.05em; }
.tracking-wider   { letter-spacing: 0.1em; }
.tracking-widest  { letter-spacing: 0.2em; }

/* ── Line Heights ───────────────────────── */
.leading-none   { line-height: 1; }
.leading-tight  { line-height: 1.25; }
.leading-snug   { line-height: 1.375; }
.leading-normal { line-height: 1.5; }
.leading-relaxed{ line-height: 1.75; }
.leading-loose  { line-height: 2; }

/* ── Color utilities ────────────────────── */
.text-primary   { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-muted     { color: var(--text-muted) !important; }
.text-cyan      { color: var(--accent-cyan) !important; }
.text-purple    { color: var(--accent-purple) !important; }
.text-pink      { color: var(--accent-pink) !important; }
.text-green     { color: var(--accent-green) !important; }
.text-white     { color: #fff !important; }

/* ── Gradient text ──────────────────────── */
.text-gradient {
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-warm {
  background: linear-gradient(135deg, #ff6b35, #f7c59f);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Special styles ─────────────────────── */
.uppercase { text-transform: uppercase; }
.capitalize { text-transform: capitalize; }
.italic { font-style: italic; }
.not-italic { font-style: normal; }

.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

/* ── Code / Mono text ────────────────────── */
code {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.88em;
  background: rgba(0,212,255,0.08);
  border: 1px solid rgba(0,212,255,0.15);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--accent-cyan);
}

pre {
  font-family: 'JetBrains Mono', monospace;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 20px;
  overflow-x: auto;
  font-size: 0.875rem;
  line-height: 1.7;
}

/* ── Blockquote special ─────────────────── */
.quote-large {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(1.3rem, 2.5vw, 2rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-primary);
}

/* ── Label / Tag ────────────────────────── */
.label {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
}

.label-cyan {
  color: var(--accent-cyan);
  background: rgba(0,212,255,0.1);
  border: 1px solid rgba(0,212,255,0.2);
}

.label-purple {
  color: var(--accent-purple);
  background: rgba(124,58,237,0.1);
  border: 1px solid rgba(124,58,237,0.2);
}

.label-green {
  color: var(--accent-green);
  background: rgba(0,230,118,0.1);
  border: 1px solid rgba(0,230,118,0.2);
}

/* ── Display font intro ─────────────────── */
.eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-cyan);
}

/* ── Dropcap ────────────────────────────── */
.dropcap::first-letter {
  font-family: 'Orbitron', sans-serif;
  font-size: 4.5rem;
  font-weight: 900;
  line-height: 0.8;
  float: left;
  margin-right: 10px;
  margin-top: 6px;
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Pull quote ─────────────────────────── */
.pull-quote {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--accent-cyan);
  border-left: 4px solid var(--accent-cyan);
  padding-left: 24px;
  margin: 40px 0;
  line-height: 1.5;
}

/* ── Reading meta ───────────────────────── */
.reading-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.reading-meta i { font-size: 0.8rem; }