/* Papel / tinta / acento — claro y oscuro */
:root,
[data-theme="light"] {
  --paper: #ffffff;
  --ink: #0a0a0a;
  /* Solo blanco y negro: el “acento” es tinta, el camino se marca por relleno/grosor */
  --accent: #0a0a0a;
  --mute: color-mix(in srgb, var(--ink) 42%, var(--paper));
  --line: color-mix(in srgb, var(--ink) 14%, var(--paper));
  --soft: color-mix(in srgb, var(--ink) 6%, var(--paper));
  --font-display: "Space Grotesk", "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", ui-monospace, monospace;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
}

[data-theme="dark"] {
  --paper: #0a0a0a;
  --ink: #f2f2f0;
  --accent: #f2f2f0;
  --mute: color-mix(in srgb, var(--ink) 45%, var(--paper));
  --line: color-mix(in srgb, var(--ink) 16%, var(--paper));
  --soft: color-mix(in srgb, var(--ink) 8%, var(--paper));
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}