/* Typography, links, focus, prose content. */

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('../fonts/outfit-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* System-font fallbacks sized to match, so CLS stays near zero before the
   webfont paints (adjust locally if you re-measure the actual fonts). */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
}
@font-face {
  font-family: 'Outfit Fallback';
  src: local('Arial');
  size-adjust: 104%;
  ascent-override: 92%;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  font-family: var(--ez-font-body);
  font-size: var(--ez-fs-body);
  line-height: var(--ez-lh-body);
  color: var(--ez-text);
  background: var(--ez-surface);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Sentence case throughout, matching the lowercase wordmark. Uppercase is
   opt-in via .ez-eyebrow / .ez-label, never the default for headings. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ez-font-display);
  font-weight: 600;
  line-height: var(--ez-lh-heading);
  letter-spacing: -0.01em;
  color: var(--ez-text);
}
h1 { font-size: var(--ez-fs-h1); line-height: var(--ez-lh-tight); letter-spacing: -0.02em; }
h2 { font-size: var(--ez-fs-h2); }
h3 { font-size: var(--ez-fs-h3); }
h4 { font-size: var(--ez-fs-h4); }

.ez-display {
  font-family: var(--ez-font-display);
  font-size: var(--ez-fs-display);
  line-height: var(--ez-lh-tight);
  letter-spacing: -0.02em;
  font-weight: 600;
}

p { color: var(--ez-text-mute); }
p.ez-lead { font-size: var(--ez-fs-body-lg); color: var(--ez-text-mute); }

a {
  transition: color var(--ez-dur-fast) var(--ez-ease);
}

/* Focus ring - visible, brand-colored, never suppressed */
:focus-visible {
  outline: 2px solid var(--ez-red);
  outline-offset: 2px;
  border-radius: var(--ez-r-sm);
}
:focus:not(:focus-visible) {
  outline: none;
}

::selection {
  background: var(--ez-red);
  color: var(--ez-white);
}

/* Prose - blog/case-study body content from the block editor */
.ez-prose {
  font-size: var(--ez-fs-body-lg);
  line-height: var(--ez-lh-body);
  color: var(--ez-text);
}
.ez-prose > * + * { margin-top: var(--ez-space-5); }
.ez-prose h2 { margin-top: var(--ez-space-8); font-size: var(--ez-fs-h2); }
.ez-prose h3 { margin-top: var(--ez-space-7); font-size: var(--ez-fs-h3); }
.ez-prose ul, .ez-prose ol { padding-left: 1.4em; }
.ez-prose ul { list-style: none; }
.ez-prose ul > li { position: relative; padding-left: 1.5em; }
.ez-prose ul > li::before {
  content: '';
  position: absolute;
  left: 0; top: .55em;
  width: 8px; height: 8px;
  background: var(--ez-red);
  border-radius: var(--ez-notch);
}
.ez-prose ol { list-style: decimal; }
.ez-prose a { color: var(--ez-red-ink); text-decoration: underline; text-underline-offset: 2px; }
.ez-prose a:hover { color: var(--ez-red); }
.ez-prose img { border-radius: var(--ez-notch-card); }
.ez-prose blockquote {
  border-left: 3px solid var(--ez-red);
  padding-left: var(--ez-space-5);
  font-style: normal;
  font-size: var(--ez-fs-body-lg);
  color: var(--ez-text);
}
.ez-prose code {
  background: var(--ez-gray-100);
  padding: .15em .4em;
  border-radius: var(--ez-r-sm);
  font-size: .9em;
}