:root {
  --escena: #000000;
  --escena-2: color-mix(in srgb, #750727 75%, #000000);
  --sobre-escena: #f4ebd7;
  --sobre-escena-suave: color-mix(in srgb, #f4ebd7 85%, #000000);
  --escena-acento: #fff1c1;
  --f-titulo: var(--familia-kima, "Kima"), "Cormorant Garamond", "Playfair Display", "Didot", "Bodoni MT", "Georgia", serif;
  --f-texto: var(--familia-poppins, "Poppins"), system-ui, "-apple-system", sans-serif;
  --f-mono: var(--familia-space-mono, "Space Mono"), ui-monospace, monospace;
  --r: 10px;
  --papel: #f4ebd7;
  --superficie: #faf5ea;
  --superficie-2: #efe3ca;
  --tinta: #000000;
  --tinta-suave: #4a2c35;
  --linea: #d5c5ab;
  --marca: #750727;
  --marca-hover: #59051d;
  --marca-suave: #eadbc3;
  --sobre-marca: #f4ebd7;
  --progreso: #750727;
  --progreso-suave: #fff1c1;
  --exito: #195e33;
  --exito-suave: #dff1e6;
  --error: #8f1522;
  --error-suave: #f9e1e4;
  --info: #750727;
  --info-suave: #eadbc3;
  --sombra: 0 1px 2px rgb(18 22 29 / 6%), 0 8px 24px rgb(18 22 29 / 6%);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papel: #24030c;
    --superficie: #360412;
    --superficie-2: #4d051a;
    --tinta: #f4ebd7;
    --tinta-suave: #e5d6be;
    --linea: #9e425b;
    --marca: #fff1c1;
    --marca-hover: #f4ebd7;
    --marca-suave: #5c061f;
    --sobre-marca: #000000;
    --progreso: #fff1c1;
    --progreso-suave: #422d0b;
    --exito: #7ee2a8;
    --exito-suave: #11301e;
    --error: #ffb3ba;
    --error-suave: #451018;
    --info: #fff1c1;
    --info-suave: #4d051a;
    --sombra: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px rgb(0 0 0 / 30%);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --papel: #24030c;
  --superficie: #360412;
  --superficie-2: #4d051a;
  --tinta: #f4ebd7;
  --tinta-suave: #e5d6be;
  --linea: #9e425b;
  --marca: #fff1c1;
  --marca-hover: #f4ebd7;
  --marca-suave: #5c061f;
  --sobre-marca: #000000;
  --progreso: #fff1c1;
  --progreso-suave: #422d0b;
  --exito: #7ee2a8;
  --exito-suave: #11301e;
  --error: #ffb3ba;
  --error-suave: #451018;
  --info: #fff1c1;
  --info-suave: #4d051a;
  --sombra: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px rgb(0 0 0 / 30%);
  color-scheme: dark;
}