/* ═══════════════════════════════════════════════════════════════════════════════
   TYPOGRAPHY – single source of truth for heading hierarchy, body text, and
   responsive type across all CyberSoluce website pages.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Headings: Outfit for h1-h3; Inter (default sans) for body */
h1, h2, h3 {
  font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: hsl(var(--foreground));
}

/* ── h1 – page title ──────────────────────────────────────────────────────── */
h1 {
  font-size: 1.875rem;  /* 30px – mobile */
}
@media (min-width: 640px) {
  h1 { font-size: 2.25rem; }  /* 36px – sm */
}
@media (min-width: 768px) {
  h1 { font-size: 2.5rem; }   /* 40px – md */
}
@media (min-width: 1024px) {
  h1 { font-size: 3rem; }     /* 48px – lg */
}

/* ── h2 – section heading ─────────────────────────────────────────────────── */
h2 {
  font-size: 1.5rem;   /* 24px – mobile */
}
@media (min-width: 640px) {
  h2 { font-size: 1.875rem; } /* 30px – sm */
}
@media (min-width: 1024px) {
  h2 { font-size: 2rem; }     /* 32px – lg */
}

/* ── h3 – sub-heading / card title ────────────────────────────────────────── */
h3 {
  font-size: 1.125rem; /* 18px – mobile */
}
@media (min-width: 640px) {
  h3 { font-size: 1.25rem; }  /* 20px – sm */
}
@media (min-width: 1024px) {
  h3 { font-size: 1.5rem; }   /* 24px – lg */
}

/* Body defaults – Inter for readable paragraphs */
body {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  line-height: 1.625;
}