/**
 * SYNAI Typography System — v0.8.0
 * Headings: Space Grotesk. Body/UI: Inter.
 * Font files are intentionally not bundled in this development release.
 */
:root {
  --synai-font-display: "Space Grotesk", "Avenir Next", "Segoe UI", Arial, sans-serif;
  --synai-font-body: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --synai-font-weight-regular: 400;
  --synai-font-weight-medium: 500;
  --synai-font-weight-semibold: 600;
  --synai-font-weight-bold: 700;

  --synai-text-display-1: clamp(2.5rem, 1.85rem + 2.9vw, 4.5rem);
  --synai-text-display-2: clamp(2rem, 1.55rem + 2vw, 3.5rem);
  --synai-text-h1: clamp(1.75rem, 1.4rem + 1.55vw, 2.75rem);
  --synai-text-h2: clamp(1.375rem, 1.15rem + 1vw, 2rem);
  --synai-text-h3: clamp(1.125rem, 1rem + .55vw, 1.5rem);
  --synai-text-h4: clamp(1rem, .94rem + .3vw, 1.25rem);
  --synai-text-h5: clamp(.875rem, .84rem + .16vw, 1rem);
  --synai-text-h6: clamp(.75rem, .72rem + .12vw, .875rem);
  --synai-text-body-lg: clamp(1rem, .95rem + .24vw, 1.125rem);
  --synai-text-body: clamp(.9375rem, .91rem + .12vw, 1rem);
  --synai-text-small: clamp(.8125rem, .79rem + .1vw, .875rem);
  --synai-text-caption: .75rem;
  --synai-text-overline: .6875rem;

  --synai-leading-display-1: 1.05;
  --synai-leading-display-2: 1.10;
  --synai-leading-h1: 1.20;
  --synai-leading-h2: 1.30;
  --synai-leading-heading: 1.40;
  --synai-leading-body: 1.70;
  --synai-leading-small: 1.60;

  --synai-tracking-display-1: -0.025em;
  --synai-tracking-display-2: -0.018em;
  --synai-tracking-h1: -0.012em;
  --synai-tracking-overline: .09em;

  --synai-reading-width: 43.75rem;
}

html { font-size: 100%; }
body,
button,
input,
select,
textarea {
  font-family: var(--synai-font-body);
  font-size: var(--synai-text-body);
  line-height: var(--synai-leading-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.display-1, .display-2,
.synai-heading {
  font-family: var(--synai-font-display);
  font-weight: var(--synai-font-weight-bold);
  text-wrap: balance;
  margin-block: 0 .6em;
}

h1, .text-h1 { font-size: var(--synai-text-h1); line-height: var(--synai-leading-h1); letter-spacing: var(--synai-tracking-h1); }
h2, .text-h2 { font-size: var(--synai-text-h2); line-height: var(--synai-leading-h2); }
h3, .text-h3 { font-size: var(--synai-text-h3); line-height: var(--synai-leading-heading); }
h4, .text-h4 { font-size: var(--synai-text-h4); line-height: var(--synai-leading-heading); }
h5, .text-h5 { font-size: var(--synai-text-h5); line-height: var(--synai-leading-heading); }
h6, .text-h6 { font-size: var(--synai-text-h6); line-height: var(--synai-leading-heading); }

.display-1 { font-size: var(--synai-text-display-1); line-height: var(--synai-leading-display-1); letter-spacing: var(--synai-tracking-display-1); }
.display-2 { font-size: var(--synai-text-display-2); line-height: var(--synai-leading-display-2); letter-spacing: var(--synai-tracking-display-2); }
.body-large { font-size: var(--synai-text-body-lg); line-height: var(--synai-leading-body); }
.text-small, small { font-size: var(--synai-text-small); line-height: var(--synai-leading-small); }
.caption { font-size: var(--synai-text-caption); line-height: var(--synai-leading-small); }
.overline {
  font-size: var(--synai-text-overline);
  line-height: var(--synai-leading-small);
  letter-spacing: var(--synai-tracking-overline);
  font-weight: var(--synai-font-weight-semibold);
  text-transform: uppercase;
}

.prose,
.entry-content {
  max-width: var(--synai-reading-width);
}
.prose > * + *,
.entry-content > * + * { margin-block-start: 1.15em; }
.prose p,
.entry-content p { max-width: 70ch; }
.prose a,
.entry-content a { text-underline-offset: .16em; text-decoration-thickness: .08em; }

.button,
button,
input[type="submit"],
input[type="button"] {
  font-family: var(--synai-font-body);
  font-size: .875rem;
  font-weight: var(--synai-font-weight-semibold);
  line-height: 1.4;
  letter-spacing: .01em;
}

.site-navigation,
.site-footer__links,
.breadcrumbs {
  font-size: var(--synai-text-small);
}

@media (max-width: 47.99rem) {
  .prose,
  .entry-content { max-width: 100%; }
  .display-1, .display-2, h1, h2, h3 { overflow-wrap: anywhere; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}