/* ================================================
   TOTO QUIZ - Fonts
   tq-fonts.css
   ================================================ */

/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* ---- Font Scale ---- */

.tq-text-xs  { font-size: 12px; }
.tq-text-sm  { font-size: 14px; }
.tq-text-base{ font-size: 16px; }
.tq-text-md  { font-size: 18px; }
.tq-text-lg  { font-size: 20px; }
.tq-text-xl  { font-size: 24px; }
.tq-text-2xl { font-size: 30px; }
.tq-text-3xl { font-size: 36px; }
.tq-text-4xl { font-size: 48px; }
.tq-text-5xl { font-size: 60px; }
.tq-text-6xl { font-size: 72px; }

/* ---- Weight utilities ---- */

.tq-fw-normal  { font-weight: 400; }
.tq-fw-medium  { font-weight: 500; }
.tq-fw-semibold{ font-weight: 600; }
.tq-fw-bold    { font-weight: 700; }
.tq-fw-black   { font-weight: 900; }

/* ---- Line height ---- */

.tq-lh-tight  { line-height: 1.15; }
.tq-lh-snug   { line-height: 1.35; }
.tq-lh-normal { line-height: 1.5; }
.tq-lh-relaxed{ line-height: 1.7; }
.tq-lh-loose  { line-height: 1.9; }

/* ---- Letter spacing ---- */

.tq-ls-tight  { letter-spacing: -0.03em; }
.tq-ls-normal { letter-spacing: 0; }
.tq-ls-wide   { letter-spacing: 0.05em; }
.tq-ls-wider  { letter-spacing: 0.1em; }
.tq-ls-widest { letter-spacing: 0.2em; }

/* ---- Display sizes (responsive) ---- */

.tq-display-1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(52px, 7vw, 96px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.tq-display-2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(40px, 5.5vw, 72px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.tq-display-3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(32px, 4.5vw, 56px);
  font-weight: 700;
  line-height: 1.15;
}

/* ---- Eyebrow / Label ---- */

.tq-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
}

/* ---- Drop Cap ---- */

.tq-drop-cap::first-letter {
  font-family: 'Playfair Display', serif;
  font-size: 4.5em;
  font-weight: 900;
  float: left;
  line-height: 0.75;
  margin-right: 12px;
  margin-top: 8px;
  color: var(--tq-secondary);
}

/* ---- Pull Quote ---- */

.tq-pull-quote {
  font-family: 'Playfair Display', serif;
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  font-style: italic;
  line-height: 1.35;
  color: var(--tq-primary);
  position: relative;
  padding: 24px 0 24px 32px;
  border-left: 5px solid var(--tq-secondary);
}

/* ---- Caption ---- */

.tq-caption {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--tq-text-muted);
  letter-spacing: 0.5px;
  margin-top: 8px;
}

/* ---- Accent Text ---- */

.tq-accent-text {
  color: var(--tq-secondary);
}

.tq-teal-text {
  color: var(--tq-teal);
}

.tq-gold-text {
  color: var(--tq-accent);
}

/* ---- Responsive font adjustments ---- */

@media (max-width: 768px) {
  .tq-text-5xl { font-size: 44px; }
  .tq-text-6xl { font-size: 52px; }
}

@media (max-width: 576px) {
  .tq-text-4xl { font-size: 36px; }
  .tq-text-5xl { font-size: 36px; }
}