/* ==========================================================================
   Typography — Jivhala Social Foundation
   Manrope for headings, Inter for body. Fluid, responsive scale driven
   entirely by tokens from variables.css.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --font-heading: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---------- Font weights ---------- */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* ---------- Fluid font scale ----------
     Uses clamp() so type scales smoothly between mobile (767px) and
     desktop (1440px) without breakpoint overrides. */
  --fs-hero: clamp(2.75rem, 2rem + 3.2vw, 4.5rem);     /* ~44px -> 72px */
  --fs-h1: clamp(2.5rem, 1.9rem + 2.6vw, 4rem);        /* ~40px -> 64px */
  --fs-h2: clamp(2rem, 1.6rem + 1.8vw, 3rem);          /* ~32px -> 48px */
  --fs-h3: clamp(1.625rem, 1.4rem + 1vw, 2.25rem);     /* ~26px -> 36px */
  --fs-h4: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);   /* ~22px -> 28px */
  --fs-body-lg: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem); /* 17px -> 18px */
  --fs-body: 1rem;         /* 16px */
  --fs-small: .875rem;     /* 14px */
  --fs-caption: .8125rem;  /* 13px */

  /* ---------- Line heights ---------- */
  --lh-heading: 1.15;
  --lh-heading-loose: 1.3;
  --lh-body: 1.7;
  --lh-tight: 1.4;

  /* ---------- Letter spacing ---------- */
  --ls-tight: -0.02em;
  --ls-normal: 0;
  --ls-wide: 0.04em;
}

/* ---------- Global application ---------- */

body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  margin: 0 0 var(--space-sm);
}

.text-hero, .hero-title { font-size: var(--fs-hero); font-weight: var(--fw-extrabold); line-height: var(--lh-heading); }
h1, .h1 { font-size: var(--fs-h1); font-weight: var(--fw-extrabold); }
h2, .h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); }
h3, .h3 { font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: var(--lh-heading-loose); }
h4, .h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); line-height: var(--lh-heading-loose); }
h5, .h5 { font-size: var(--fs-body-lg); font-weight: var(--fw-semibold); line-height: var(--lh-tight); }
h6, .h6 { font-size: var(--fs-body); font-weight: var(--fw-semibold); line-height: var(--lh-tight); }

p {
  margin: 0 0 var(--space-sm);
  color: var(--color-body);
}

p:last-child { margin-bottom: 0; }

.text-lead {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--color-body);
}

small, .text-small {
  font-size: var(--fs-small);
  line-height: var(--lh-tight);
}

.text-caption {
  font-size: var(--fs-caption);
  line-height: var(--lh-tight);
  color: var(--color-light);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

strong, b { font-weight: var(--fw-semibold); }

/* ---------- Responsive scale adjustments ---------- */

@media (max-width: 1024px) {
  :root { --space-section: 90px; }
}

@media (max-width: 767px) {
  :root { --space-section: 64px; }
  body { line-height: 1.65; }
}