/* ============================================================
   OWS TYPOGRAPHY SYSTEM  v1.1  —  2026-05-26

   Standardises all heading fonts, sizes, letter-spacing
   across onlineworldsolutions.ca

   Replaces (retire from all pages):
     • font-family: "Helvetica Neue" / Roboto
     • Inconsistent clamp() size declarations

   COLOUR POLICY:
     ⚠  NO global colour overrides in this file.
     Colours are set per-section by service-dark-overrides.css
     and each page's own <style> block.
     Reason: site has both dark AND light background sections.
     Global h2 { color: #fff !important } would create
     white-on-white hidden text in light sections — a
     Google spam-detection trigger.
   ============================================================ */

/* ── Google Fonts ──────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:ital,opsz,wght@0,14..32,400;0,14..32,500;0,14..32,600;1,14..32,400&family=Instrument+Serif:ital@0;1&display=swap');

/* ── Design tokens ─────────────────────────────────────────── */
:root {
  --ows-font-display : 'Space Grotesk', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --ows-font-body    : 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --ows-font-quote   : 'Instrument Serif', Georgia, serif;
}

/* ────────────────────────────────────────────────────────────
   FONT FAMILY
   Replaces Helvetica Neue on headings and Roboto on body text.
   Uses !important to beat inline style="font-family:..." attrs
   and earlier <style> blocks.
   ──────────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ows-font-display) !important;
}

/* spans / strongs inside headings also inherit the right font */
h1 span, h2 span, h3 span, h4 span,
h1 strong, h2 strong, h3 strong, h4 strong {
  font-family: inherit !important;
}

body,
p, li, dt, dd, td, th,
input, textarea, select, button, label, a {
  font-family: var(--ows-font-body) !important;
}

/* ────────────────────────────────────────────────────────────
   TYPE SCALE
   One set of clamp() values site-wide.
   ──────────────────────────────────────────────────────────── */

h1 {
  font-size: clamp(36px, 5vw, 64px)   !important;
  font-weight: 700                     !important;
  letter-spacing: -0.03em              !important;
  line-height: 1.06                    !important;
}

h2 {
  font-size: clamp(26px, 3.5vw, 48px) !important;
  font-weight: 700                     !important;
  letter-spacing: -0.02em              !important;
  line-height: 1.18                    !important;
}

h3 {
  font-size: clamp(18px, 2vw, 28px)   !important;
  font-weight: 600                     !important;
  letter-spacing: -0.01em              !important;
  line-height: 1.20                    !important;
}

h4 {
  font-size: clamp(15px, 1.2vw, 18px) !important;
  font-weight: 600                     !important;
  letter-spacing: 0                    !important;
  line-height: 1.30                    !important;
}

p {
  font-size: clamp(15px, 1vw, 17px)   !important;
  line-height: 1.65                    !important;
}

/* ────────────────────────────────────────────────────────────
   STAT NUMBERS — Space Grotesk + tight tracking
   ──────────────────────────────────────────────────────────── */
.stat-number, .stat-num, .counter-value,
.results-number, .home-stats__number,
.hero-stat-value, .hn-stat-number {
  font-family: var(--ows-font-display) !important;
  letter-spacing: -0.03em              !important;
}

/* ────────────────────────────────────────────────────────────
   TESTIMONIALS / PULL QUOTES
   Instrument Serif italic for testimonial copy only.
   NOT for headings.
   ──────────────────────────────────────────────────────────── */
blockquote,
.testimonial-text, .testimonial-body,
.client-review > p, .review-text,
.pull-quote, .quote-content {
  font-family: var(--ows-font-quote) !important;
  font-style: italic                   !important;
}

/* ────────────────────────────────────────────────────────────
   EYEBROW / LABEL CHIPS
   Already styled per-page but ensure font family is Inter.
   ──────────────────────────────────────────────────────────── */
.eyebrow, .eye-brow, .section-label,
.service-label, .chip, .tag,
.badge:not(.old-badge) {
  font-family: var(--ows-font-body) !important;
}

/* ────────────────────────────────────────────────────────────
   NAV / BUTTONS
   ──────────────────────────────────────────────────────────── */
nav, .nav, .menu,
.btn, .button, .cta-btn,
.hero-btn, .btn-primary, .btn-secondary {
  font-family: var(--ows-font-body) !important;
}

/* ────────────────────────────────────────────────────────────
   HERO HEADINGS — specific page-hero / banner classes
   Larger than standard h1 on page-level hero sections.
   ──────────────────────────────────────────────────────────── */
.hero-new__headline,
.hero-title, .hero_title,
.page-hero h1,
.service-hero h1,
#hero-title {
  font-family: var(--ows-font-display) !important;
  font-size: clamp(44px, 6.5vw, 80px) !important;
  font-weight: 700                     !important;
  letter-spacing: -0.035em             !important;
  line-height: 1.04                    !important;
}