:root {
  color-scheme: light;
  --fondo: #f4f4ef;
  --superficie: #fff;
  --tinta: #1c2620;
  --secundaria: #5d685f;
  --linea: #dee0d3;
  --acento: #d7ff72;
  --acento-tinta: #33500f;
  --espacio: 1rem;
  --tamano: 16px;
  font-family: system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="sistema"] {
    color-scheme: dark;
    --fondo: #111613;
    --superficie: #1a211c;
    --tinta: #e9ede8;
    --secundaria: #9da89e;
    --linea: #2b342d;
    --acento: #c8f169;
    --acento-tinta: #c8f169;
  }
}
:root[data-theme="oscuro"] {
  color-scheme: dark;
  --fondo: #111613;
  --superficie: #1a211c;
  --tinta: #e9ede8;
  --secundaria: #9da89e;
  --linea: #2b342d;
  --acento: #c8f169;
  --acento-tinta: #c8f169;
}
:root[data-acento="azul"] { --acento: #9cc4ff; --acento-tinta: #1d4ea8; }
:root[data-acento="violeta"] { --acento: #c9b6ff; --acento-tinta: #4b2aa3; }
:root[data-acento="coral"] { --acento: #ffb09c; --acento-tinta: #9a2f12; }
:root[data-acento="ambar"] { --acento: #ffd166; --acento-tinta: #7a4f00; }
:root[data-acento="turquesa"] { --acento: #7fe0d0; --acento-tinta: #0b6b60; }
@media (prefers-color-scheme: dark) {
  :root[data-theme="sistema"][data-acento="azul"] { --acento: #8fb8ff; --acento-tinta: #a9c8ff; }
  :root[data-theme="sistema"][data-acento="violeta"] { --acento: #b9a4ff; --acento-tinta: #cbbcff; }
  :root[data-theme="sistema"][data-acento="coral"] { --acento: #ff9d86; --acento-tinta: #ffb4a1; }
  :root[data-theme="sistema"][data-acento="ambar"] { --acento: #f2c14e; --acento-tinta: #f5cf75; }
  :root[data-theme="sistema"][data-acento="turquesa"] { --acento: #6bd9c6; --acento-tinta: #8be8d8; }
}
:root[data-theme="oscuro"][data-acento="azul"] { --acento: #8fb8ff; --acento-tinta: #a9c8ff; }
:root[data-theme="oscuro"][data-acento="violeta"] { --acento: #b9a4ff; --acento-tinta: #cbbcff; }
:root[data-theme="oscuro"][data-acento="coral"] { --acento: #ff9d86; --acento-tinta: #ffb4a1; }
:root[data-theme="oscuro"][data-acento="ambar"] { --acento: #f2c14e; --acento-tinta: #f5cf75; }
:root[data-theme="oscuro"][data-acento="turquesa"] { --acento: #6bd9c6; --acento-tinta: #8be8d8; }
:root[data-densidad="compacta"] { --espacio: .625rem; }
:root[data-texto="grande"] { --tamano: 18px; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font-size: var(--tamano); }
.contenido { width: min(70rem, 100% - 2rem); margin: 0 auto; padding: var(--espacio) 0; }
.tarjeta { background: var(--superficie); border: 1px solid var(--linea); border-radius: 1rem; padding: var(--espacio); }
a, .enlace { color: var(--acento-tinta); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--acento-tinta); outline-offset: 3px; }
button { background: var(--acento); color: #1c2620; border: 0; border-radius: .5rem; padding: .6rem 1rem; }
.secundario { color: var(--secundaria); }