/* =====================================================================
   MoonClerk production typography — Graphik
   Mirrors the real moonclerk.com site (reference/styles/variables/typography.scss)
   Single type family across the entire marketing site.
   ===================================================================== */

@font-face {
  font-display: swap;
  font-family: "Graphik";
  src: url("Graphik-Regular-Web.woff2") format("woff2"),
       url("Graphik-Regular-Web.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-display: swap;
  font-family: "Graphik";
  src: url("Graphik-RegularItalic-Web.woff2") format("woff2"),
       url("Graphik-RegularItalic-Web.woff") format("woff");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-display: swap;
  font-family: "Graphik";
  src: url("Graphik-Medium-Web.woff2") format("woff2"),
       url("Graphik-Medium-Web.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-display: swap;
  font-family: "Graphik";
  src: url("Graphik-MediumItalic-Web.woff2") format("woff2"),
       url("Graphik-MediumItalic-Web.woff") format("woff");
  font-weight: 500;
  font-style: italic;
}
/* Heuristic bolder weight fallback — production site only ships 400/500 */
@font-face {
  font-display: swap;
  font-family: "Graphik";
  src: url("Graphik-Medium-Web.woff2") format("woff2"),
       url("Graphik-Medium-Web.woff") format("woff");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-display: swap;
  font-family: "Graphik";
  src: url("Graphik-Medium-Web.woff2") format("woff2"),
       url("Graphik-Medium-Web.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}

/* Metric-matched fallback: an Arial-based face size-adjusted to Graphik's own
   metrics (upm 1000, ascent 981, descent -195, lineGap 0) so the fallback shown
   during font swap occupies the exact same box as Graphik — eliminating the
   layout shift when Graphik loads. Values via fontkit + the fontaine formula. */
@font-face {
  font-family: "Graphik-fallback";
  src: local("Arial");
  font-weight: 400 700;
  size-adjust: 118.03%;
  ascent-override: 83.11%;
  descent-override: 16.52%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Graphik-fallback";
  src: local("Arial");
  font-weight: 500;
  size-adjust: 121.43%;
  ascent-override: 80.79%;
  descent-override: 16.06%;
  line-gap-override: 0%;
}

:root {
  --typeFamily: "Graphik", "Graphik-fallback", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --headingWeight: 500;
  --paragraphWeight: 400;
  --headingLeading: 1.05;
  --paragraphLeading: 1.35;
}

/* Make every font-family that was previously Inter / Fraunces / JetBrains Mono
   resolve to Graphik. We keep monospace fallback for actual code blocks. */
html, body {
  font-family: var(--typeFamily);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Serif accent class used across the site — now matches Graphik Medium Italic,
   giving the same "editorial" emphasis the production site uses. */
.serif {
  font-family: var(--typeFamily);
  font-weight: 500;
  font-style: italic;
  letter-spacing: -0.02em;
}

/* Italic emphasis inside headings (h1 em, h2 em, etc.) */
h1 em, h2 em, h3 em, h4 em, h5 em, h6 em {
  font-family: var(--typeFamily);
  font-weight: 500;
  font-style: italic;
}