:root {
  --fondo: #f4f2ee;
  --superficie: rgba(255, 255, 255, 0.92);
  --texto: #1f2328;
  --tenue: #5d646d;
  --borde: #d6d2ca;
  --acento: #2f6f62;
  --acento-texto: #ffffff;
  --sombra: 0 6px 24px rgba(0, 0, 0, 0.18);
  --radio: 10px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #16181b;
    --superficie: rgba(30, 33, 37, 0.92);
    --texto: #e8e6e3;
    --tenue: #a3a9b0;
    --borde: #3a3f45;
    --acento: #5fb3a1;
    --acento-texto: #0f1412;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--fondo); color: var(--texto); }
h1, h2, p { margin: 0; }
.tenue { color: var(--tenue); }

.boton {
  font: inherit; font-size: 0.9rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--borde); border-radius: 8px;
  background: transparent; color: var(--texto); cursor: pointer;
}
.boton:hover { border-color: var(--acento); }
.boton[aria-pressed="true"] { background: var(--acento); border-color: var(--acento); color: var(--acento-texto); }
.boton:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }