body {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: var(--fs-3);
  line-height: var(--lh-base);
  color: var(--dark);
  background: var(--bg);

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga";
  font-variant-numeric: lining-nums;
}

/* Tipografía display por defecto en headings */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-optical-sizing: auto;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
}

/* =========================================================
   FOCUS STATES — Visible solo con navegación por teclado
   ========================================================= */
*:focus { outline: none; }

*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
  transition: outline-offset 0.15s ease;
}

.nav-links a:focus-visible,
.footer-row a:focus-visible {
  outline-offset: 4px;
}

/* =========================================================
   SKIP LINK — Aparece solo al hacer Tab
   ========================================================= */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--gutter);
  background: var(--dark);
  color: var(--bg);
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-body);
  font-size: var(--fs-2);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-wide);
  text-decoration: none;
  z-index: 2000;
  transition: top 0.2s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: var(--space-3);
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}