/* ═══════════════════════════════════════════════════════════════
   TROOTHER.TV — TYPOGRAPHY
   Body:    Bahnschrift (system, Windows / DirectWrite)
   Display: Bebas Neue  (Google Fonts — hero titles, eyebrows)
   Heading: Barlow Condensed (Google Fonts — h1–h3, section labels)
   Fallback chain covers macOS / Linux / Android
═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow+Condensed:wght@400;500;600;700;800&display=swap');

:root {
  /* ── Font stacks ── */
  --fu: Bahnschrift, 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;  /* UI / body */
  --fd: 'Bebas Neue', 'Barlow Condensed', 'Franklin Gothic Medium', Arial, sans-serif; /* display / hero */
  --fh: 'Barlow Condensed', Bahnschrift, 'Franklin Gothic Medium', Arial, sans-serif;  /* headings h1–h3 */

  /* ── Type scale ── */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  44px;
  --text-4xl:  60px;

  /* ── Letter spacing ── */
  --ls-tight:  -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.06em;
  --ls-wider:   0.10em;
  --ls-widest:  0.16em;

  /* ── Line heights ── */
  --lh-tight:  1.1;
  --lh-snug:   1.3;
  --lh-normal: 1.6;
  --lh-relaxed:1.75;
  --lh-loose:  1.9;
}

/* ── Base ── */
html {
  font-family: var(--fu);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--fu);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
}

/* ══════════════════════════════════════════════════════════════
   HEADINGS
   h1  — page titles, article titles         → Bebas Neue (--fd)
   h2  — section headings                    → Barlow Condensed 700 (--fh)
   h3  — sub-section headings                → Barlow Condensed 600 (--fh)
   h4  — card titles, minor headings         → Bahnschrift 600 (--fu)
   h5  — labels, overlines                   → Bahnschrift 600 uppercase
   h6  — fine print headings                 → Bahnschrift 500
══════════════════════════════════════════════════════════════ */

h1 {
  font-family: var(--fd);
  font-size: clamp(var(--text-2xl), 6vw, var(--text-4xl));
  font-weight: 400; /* Bebas Neue is single-weight */
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

h2 {
  font-family: var(--fh);
  font-size: clamp(var(--text-xl), 4vw, var(--text-3xl));
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

h3 {
  font-family: var(--fh);
  font-size: clamp(var(--text-lg), 3vw, var(--text-2xl));
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: 0.04em;
}

h4 {
  font-family: var(--fu);
  font-size: var(--text-md);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: 0.02em;
}

h5 {
  font-family: var(--fu);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
}

h6 {
  font-family: var(--fu);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-wide);
}

/* ══════════════════════════════════════════════════════════════
   UTILITY CLASSES
   Use these inline to apply type styles without setting a tag.
══════════════════════════════════════════════════════════════ */

/* Display — hero banners, big numbers, landing screens */
.type-display {
  font-family: var(--fd);
  font-size: clamp(var(--text-3xl), 8vw, var(--text-4xl));
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

/* Heading — section headers used in content */
.type-heading {
  font-family: var(--fh);
  font-size: clamp(var(--text-xl), 3vw, var(--text-2xl));
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

/* Subheading — card titles, sidebar labels */
.type-subheading {
  font-family: var(--fh);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: 0.04em;
}

/* Eyebrow — small uppercase label above a title */
.type-eyebrow {
  font-family: var(--fu);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
}

/* Body — default paragraph text */
.type-body {
  font-family: var(--fu);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--lh-relaxed);
}

/* Body Large — intro paragraphs, lead text */
.type-body-lg {
  font-family: var(--fu);
  font-size: var(--text-md);
  font-weight: 400;
  line-height: var(--lh-relaxed);
}

/* Caption / meta — timestamps, author lines, tags */
.type-caption {
  font-family: var(--fu);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: var(--lh-normal);
  letter-spacing: 0.03em;
}

/* Mono — code blocks, URLs, technical values */
.type-mono {
  font-family: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
  font-size: 0.875em;
  line-height: var(--lh-relaxed);
}

/* Label — form labels, small UI text */
.type-label {
  font-family: var(--fu);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  line-height: 1;
}