:root {
  --escena: #1d1715;
  --escena-2: color-mix(in srgb, #963c26 35%, #1d1715);
  --sobre-escena: #f5efe9;
  --sobre-escena-suave: color-mix(in srgb, #f5efe9 85%, #1d1715);
  --escena-acento: #e6947e;
  --f-titulo: var(--familia-playfair-display, "Playfair Display"), "Didot", "Bodoni MT", "Georgia", serif;
  --f-texto: var(--familia-plus-jakarta-sans, "Plus Jakarta Sans"), system-ui, "-apple-system", sans-serif;
  --f-mono: var(--familia-space-mono, "Space Mono"), ui-monospace, monospace;
  --r: 10px;
  --papel: #faf7f4;
  --superficie: #ffffff;
  --superficie-2: #f2ece6;
  --tinta: #1d1715;
  --tinta-suave: #5c504a;
  --linea: #e2d9cf;
  --marca: #963c26;
  --marca-hover: #803320;
  --marca-suave: #faece7;
  --sobre-marca: #ffffff;
  --progreso: #8a5300;
  --progreso-suave: #faf0de;
  --exito: #1d6639;
  --exito-suave: #e2f3e8;
  --error: #9d231b;
  --error-suave: #fae7e5;
  --info: #28579e;
  --info-suave: #e5eef9;
  --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: #12100f;
    --superficie: #1b1716;
    --superficie-2: #241f1d;
    --tinta: #f5efe9;
    --tinta-suave: #a89b93;
    --linea: #332a26;
    --marca: #e6947e;
    --marca-hover: #f0a38e;
    --marca-suave: #391b14;
    --sobre-marca: #1b0f0b;
    --progreso: #e5a742;
    --progreso-suave: #36250e;
    --exito: #70cd98;
    --exito-suave: #13311f;
    --error: #f0948b;
    --error-suave: #3b1714;
    --info: #8eb0e8;
    --info-suave: #17263d;
    --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: #12100f;
  --superficie: #1b1716;
  --superficie-2: #241f1d;
  --tinta: #f5efe9;
  --tinta-suave: #a89b93;
  --linea: #332a26;
  --marca: #e6947e;
  --marca-hover: #f0a38e;
  --marca-suave: #391b14;
  --sobre-marca: #1b0f0b;
  --progreso: #e5a742;
  --progreso-suave: #36250e;
  --exito: #70cd98;
  --exito-suave: #13311f;
  --error: #f0948b;
  --error-suave: #3b1714;
  --info: #8eb0e8;
  --info-suave: #17263d;
  --sombra: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px rgb(0 0 0 / 30%);
  color-scheme: dark;
}