*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--night-ink); color: var(--ivory); }
body {
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: 1.5;
  letter-spacing: -0.01em;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 2px solid var(--signal-night); outline-offset: 3px; border-radius: var(--radius-btn); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

button { font: inherit; letter-spacing: inherit; color: inherit; cursor: pointer; background: none; border: 0; min-height: 44px; padding: 0 var(--sp-3); }
/* Acción principal y secundaria: solo borde azul, sin relleno ni sombra (referencia) */
.btn {
  min-height: 44px; padding: 0 var(--sp-4); border-radius: var(--radius-btn);
  border: 1px solid var(--signal-night); color: var(--signal-night); background: transparent; font-weight: 500;
  transition: background 250ms var(--ease-out), border-color 250ms var(--ease-out), color 250ms var(--ease-out), transform 150ms var(--ease-out), opacity 200ms;
}
.btn:hover { background: rgba(140, 205, 238, 0.14); border-color: #d3edfa; color: #d3edfa; }
.btn:active { background: rgba(140, 205, 238, 0.26); transform: scale(0.98); }
.link { transition: color 200ms; }
.link:hover { color: #fff6e4; }
@media (prefers-reduced-motion: reduce) { .btn:active { transform: none; } }
.btn:disabled { opacity: 0.55; cursor: default; background: transparent; }
.link { text-decoration: underline; color: var(--ivory-soft); font-size: var(--fs-caption); }

.serif { font-family: var(--font-serif); font-weight: 400; }