/* Base layout + typography utilities */

body {
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-body);
  letter-spacing: 0;
  transition: background-color 0.8s var(--ease-soft), color 0.8s var(--ease-soft);
}

/* ---------- Type scale classes ---------- */
.t-display-xl {
  font-size: var(--fs-display-xl);
  font-weight: var(--fw-black);
  line-height: var(--lh-display-tight);
  letter-spacing: 0;
}

.t-display-lg {
  font-size: var(--fs-display-lg);
  font-weight: var(--fw-black);
  line-height: var(--lh-display-tight);
}

.t-display-md {
  font-size: var(--fs-display-md);
  font-weight: var(--fw-black);
  line-height: var(--lh-display-loose);
}

.t-display-md--extrabold {
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-display-xloose);
}

.t-stat {
  font-size: var(--fs-stat);
  font-weight: var(--fw-black);
  line-height: var(--lh-display-tight);
}

.t-h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h3);
}

.t-body {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-body);
}

.t-body--emphasis {
  font-weight: var(--fw-black);
}

.t-meta {
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-body);
}

.t-caption {
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  line-height: var(--lh-body);
}

/* ---------- Layout primitives ---------- */
.container {
  max-width: var(--grid-max);
  margin: 0 auto;
  padding-left: var(--grid-gutter);
  padding-right: var(--grid-gutter);
}

.container-full {
  width: 100%;
  max-width: 100vw;
}

/* Accessibility */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Focus ring — visible only on keyboard focus */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 2px;
}

/* Selection color — subtle brand accent */
::selection {
  background: var(--accent);
  color: var(--accent-ink, var(--surface));
}

/* Prevent horizontal scroll from absolute-positioned things */
main { isolation: isolate; }

/* Skip link (a11y) — hidden until keyboard focus */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-sm);
  z-index: 9999;
  padding: var(--space-xs) var(--space-sm);
  background: var(--accent);
  color: var(--accent-ink, var(--surface));
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  font-weight: var(--fw-black);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 4px;
  transition: top 0.3s var(--ease-out);
}

.skip-link:focus-visible {
  top: var(--space-sm);
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}