/* Shared by the Next application and standalone public HTML pages.
   Font roles and responsive scales live here; existing copy, spacing, colors and
   body sizes stay with their components. Next supplies self-hosted font variables. */
:root {
  --font-body: 'Instrument Sans', system-ui, sans-serif;
  --font-display: 'Google Sans', 'Outfit', 'Instrument Sans', system-ui, sans-serif;
  --font-mono: 'DM Mono', monospace;
}
body {
  --font-body: var(--font-body-loaded, 'Instrument Sans'), system-ui, sans-serif;
  --font-display: 'Google Sans', var(--font-display-loaded, 'Outfit'), 'Instrument Sans', system-ui, sans-serif;
  --font-mono: var(--font-mono-loaded, 'DM Mono'), monospace;
  /* Compatibility aliases for existing components; no duplicate font downloads. */
  --font-inter: var(--font-body);
  --font-ibm-plex-sans: var(--font-body);
  --font-home-body: var(--font-body);
  --font-home-display: var(--font-display);
  --font-100k-body: var(--font-body);
  --font-100k-display: var(--font-display);
  --font-100k-mono: var(--font-mono);
  --type-page: clamp(32px, 3.8vw, 44px);
  --type-section: 24px;
  --type-subtitle: 18px;
  --type-caption: 15px;
  --type-compact: 20px;
  --type-app-page: 24px;
  --type-app-section: 18px;
  --home-hero-size: clamp(34px, 4.5vw, 52px);
  --home-tagline-size: clamp(16px, 1.8vw, 20px);
  --home-caption-size: var(--type-caption);
  font-family: var(--font-body) !important;
}

/* Map legacy inline font tokens once, rather than editing every page's markup. */
[style*="Playfair Display"] { font-family: var(--font-display) !important; }
[style*="Instrument Sans"], [style*="DM Sans"], [style*="Manrope"], [style*="IBM Plex Sans"] { font-family: var(--font-body) !important; }
[style*="DM Mono"] { font-family: var(--font-mono) !important; }

/* Controls and navigation use the readable UI face, even inside marketing pages. */
:is(button, input, select, textarea, [role="button"], nav, nav a, nav ul) {
  font-family: var(--font-body) !important;
}
code, pre, kbd, samp { font-family: var(--font-mono); }

/* Safe compact defaults also cover dialogs rendered in a portal outside a surface. */
[data-type-surface="application"] :is(h1, h2) {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
}
[data-type-surface="application"] :is(h3, h4, h5, h6) { font-family: var(--font-body) !important; }
[data-type-surface="application"] h1 { font-size: var(--type-app-page) !important; }
[data-type-surface="application"] h2 { font-size: var(--type-app-section) !important; }
[data-type-surface="application"] :is(h1, h2) :is(span, em, strong) { font-family: inherit !important; }

[data-type-surface="marketing"] :is(h1, h2),
[data-type-surface="document"] :is(h1, h2) {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}
[data-type-surface="marketing"] h1,
[data-type-surface="document"] h1 { font-size: var(--type-page) !important; font-weight: 600 !important; }
[data-type-surface="marketing"] h2,
[data-type-surface="document"] h2 { font-size: var(--type-section) !important; }
[data-type-surface] :is(h1, h2) :is(span, em, strong) { font-family: inherit !important; }
[data-type-surface="marketing"] h2 em {
  font-size: var(--type-subtitle) !important;
  line-height: 1.35 !important;
}
[data-type-surface] h2[data-heading-size="compact"] { font-size: var(--type-compact) !important; }
[data-homepage] h1 { font-size: var(--home-hero-size) !important; line-height: 1.08 !important; }
[data-homepage] h2 em[style*="--home-caption-size"] { font-size: var(--type-caption) !important; }

@media (min-width: 1024px) {
  body {
    --type-section: 30px;
    --type-subtitle: 22px;
    --type-caption: 18px;
    --type-compact: 22px;
    --type-app-page: 28px;
    --type-app-section: 20px;
  }
}