/* ============================================================
   SCOREDEX — Unified Typography System
   Families: Montserrat (Display · UI) · Inter (Body · Data)
   ============================================================ */

:root {
  --font-display: 'Montserrat', sans-serif;
  --font-body:    'Inter', sans-serif;

  /* Size scale */
  --t-hero:     40px;
  --t-h1:       32px;
  --t-h2:       24px;
  --t-h2-prose: 22px;
  --t-h3:       18px;
  --t-h4:       16px;
  --t-h5:       11px;
  --t-body-lg:  18px;
  --t-body:     16px;
  --t-body-sm:  15px;
  --t-meta:     13px;
  --t-caption:  12px;
  --t-micro:    11px;

  /* Weights */
  --w-black:    800;
  --w-bold:     700;
  --w-semibold: 600;
  --w-medium:   500;
  --w-regular:  400;

  /* Line heights */
  --lh-tight:   1.12;
  --lh-heading: 1.30;
  --lh-ui:      1.40;
  --lh-body:    1.75;

  /* Letter spacing */
  --ls-hero:    -0.025em;
  --ls-h2:      -0.015em;
  --ls-h4:       0;
  --ls-eyebrow:  0.10em;
  --ls-badge:    0.03em;
  --ls-stat-lbl: 0.06em;
}

/* ── Display / Hero ─────────────────────────────────────────── */
.t-hero {
  font-family:    var(--font-display);
  font-size:      var(--t-hero);
  font-weight:    var(--w-black);
  line-height:    var(--lh-tight);
  letter-spacing: var(--ls-hero);
}

/* ── Headings ───────────────────────────────────────────────── */
.t-h1 {
  font-family:    var(--font-display);
  font-size:      var(--t-h1);
  font-weight:    var(--w-bold);
  line-height:    1.15;
  letter-spacing: -0.02em;
}
.t-h2 {
  font-family:    var(--font-display);
  font-size:      var(--t-h2);
  font-weight:    var(--w-bold);
  line-height:    var(--lh-heading);
  letter-spacing: var(--ls-h2);
}
.t-h2-prose {
  font-family:    var(--font-display);
  font-size:      var(--t-h2-prose);
  font-weight:    var(--w-bold);
  line-height:    var(--lh-heading);
  letter-spacing: -0.01em;
}
.t-h3 {
  font-family:    var(--font-display);
  font-size:      var(--t-h3);
  font-weight:    var(--w-semibold);
  line-height:    var(--lh-ui);
  letter-spacing: -0.01em;
}
.t-h4 {
  font-family:    var(--font-display);
  font-size:      var(--t-h4);
  font-weight:    var(--w-bold);
  line-height:    var(--lh-ui);
  letter-spacing: var(--ls-h4);
}
.t-eyebrow {
  font-family:    var(--font-body);
  font-size:      var(--t-h5);
  font-weight:    var(--w-bold);
  line-height:    var(--lh-ui);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

/* ── Body ───────────────────────────────────────────────────── */
.t-body-lg {
  font-family: var(--font-body);
  font-size:   var(--t-body-lg);
  font-weight: var(--w-regular);
  line-height: var(--lh-body);
}
.t-body {
  font-family: var(--font-body);
  font-size:   var(--t-body);
  font-weight: var(--w-regular);
  line-height: var(--lh-body);
}
.t-body-sm {
  font-family: var(--font-body);
  font-size:   var(--t-body-sm);
  font-weight: var(--w-regular);
  line-height: 1.60;
}

/* ── Meta & Labels ──────────────────────────────────────────── */
.t-meta {
  font-family: var(--font-body);
  font-size:   var(--t-meta);
  font-weight: var(--w-regular);
  line-height: var(--lh-ui);
}
.t-caption {
  font-family: var(--font-body);
  font-size:   var(--t-caption);
  font-weight: var(--w-regular);
  line-height: var(--lh-ui);
}
.t-micro {
  font-family:    var(--font-body);
  font-size:      var(--t-micro);
  font-weight:    var(--w-medium);
  line-height:    var(--lh-ui);
  letter-spacing: 0.02em;
}

/* ── Data / Stats ───────────────────────────────────────────── */
.t-stat-lg {
  font-family:    var(--font-display);
  font-size:      32px;
  font-weight:    var(--w-black);
  line-height:    1.0;
  letter-spacing: -0.02em;
}
.t-stat {
  font-family:    var(--font-display);
  font-size:      20px;
  font-weight:    var(--w-bold);
  line-height:    1.0;
  letter-spacing: -0.01em;
}
.t-stat-label {
  font-family:    var(--font-body);
  font-size:      var(--t-micro);
  font-weight:    var(--w-medium);
  line-height:    var(--lh-ui);
  letter-spacing: var(--ls-stat-lbl);
  text-transform: uppercase;
}

/* ── Sidebar data rows ──────────────────────────────────────── */
.t-data-label {
  font-family: var(--font-body);
  font-size:   var(--t-caption);
  font-weight: var(--w-regular);
  line-height: var(--lh-ui);
  color:       #6b7280;
}
.t-data-value {
  font-family: var(--font-body);
  font-size:   var(--t-body-sm);
  font-weight: var(--w-semibold);
  line-height: var(--lh-ui);
  color:       #181818;
}

/* ── Global overrides ───────────────────────────────────────── */

/* Buttons — unified to 14px across all pages */
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-teal {
  font-size:     14px !important;
  border-radius: 10px !important;
}

/* Section headings — 32px → 24px */
.sec-heading {
  font-size:      24px !important;
  line-height:    1.30 !important;
  letter-spacing: -0.015em !important;
}

/* Hero H1 — 68px → 40px, weight 800 */
.hero-h1 {
  font-size:      40px !important;
  font-weight:    800 !important;
  line-height:    1.12 !important;
  letter-spacing: -0.025em !important;
}

/* CTA H2 — scale down */
.cta-h2 {
  font-size:      32px !important;
  font-weight:    700 !important;
  letter-spacing: -0.02em !important;
}

/* Nav tagline — 8px → 10px */
.nav-tagline {
  font-size: 10px !important;
}

/* Bottom bar label — 10px → 11px / Inter */
.bottom-bar-btn {
  font-size:   11px !important;
  font-family: var(--font-body) !important;
}

/* Tab nav — 13px → 14px */
.tab-btn {
  font-size: 14px !important;
}

/* Nav links consistent */
.nav-link-pill,
.nav-mobile-link {
  font-size: 14px !important;
}

/* ── Prose overrides (blog single article) ──────────────────── */
.prose p,
.prose li {
  font-size:   16px !important;
  line-height: 1.75 !important;
  color:       #374151;
}
.prose h2 {
  font-family:    var(--font-display) !important;
  font-size:      22px !important;
  font-weight:    700 !important;
  line-height:    1.30 !important;
  letter-spacing: -0.01em !important;
  color:          #181818 !important;
}
.prose h3 {
  font-family:    var(--font-display) !important;
  font-size:      18px !important;
  font-weight:    600 !important;
  line-height:    1.40 !important;
  letter-spacing: -0.01em !important;
  color:          #181818 !important;
}
.prose blockquote p {
  font-family:  var(--font-body) !important;
  font-size:    17px !important;
  font-weight:  500 !important;
  font-style:   italic !important;
  line-height:  1.65 !important;
  color:        #374151 !important;
}

/* ── Badge / chip unification ───────────────────────────────── */
.badge,
.chip,
.cat-tag {
  font-family:    var(--font-body) !important;
  font-size:      11px !important;
  font-weight:    600 !important;
  letter-spacing: 0.02em !important;
}
.cat-pill {
  font-family: var(--font-body) !important;
  font-size:   13px !important;
  font-weight: 500 !important;
}
.rating-badge {
  font-family: var(--font-display) !important;
  font-size:   12px !important;
  font-weight: 700 !important;
}

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero-h1  { font-size: clamp(21px, 6.4vw, 26px) !important; line-height: 1.18 !important; overflow-wrap: break-word; }
  .cta-h2   { font-size: 22px !important; }
  .trust-h2 { font-size: 20px !important; }
  .sec-heading { font-size: 20px !important; }
  .blog-h1  { font-size: 28px !important; line-height: 1.15 !important; }
  .news-h1  { font-size: 26px !important; }
  .prose p,
  .prose li { font-size: 16px !important; }
  .t-hero   { font-size: 30px; }
  .t-h1     { font-size: 26px; }
  .t-h2     { font-size: 20px; }
  .t-h3     { font-size: 17px; }
}