:root {
  --escena: #12161d;
  --escena-2: color-mix(in srgb, #7a1f35 35%, #12161d);
  --sobre-escena: #e9edf3;
  --sobre-escena-suave: color-mix(in srgb, #e9edf3 85%, #12161d);
  --escena-acento: #e0869b;
  --f-titulo: var(--familia-source-serif-4, "Source Serif 4"), "Georgia", serif;
  --f-texto: var(--familia-ibm-plex-sans, "IBM Plex Sans"), system-ui, sans-serif;
  --f-mono: var(--familia-ibm-plex-mono, "IBM Plex Mono"), ui-monospace, monospace;
  --r: 10px;
  --papel: #f5f6f8;
  --superficie: #ffffff;
  --superficie-2: #eef0f4;
  --tinta: #12161d;
  --tinta-suave: #4f5867;
  --linea: #dfe3ea;
  --marca: #7a1f35;
  --marca-hover: #651a2c;
  --marca-suave: #f6e8ec;
  --sobre-marca: #ffffff;
  --progreso: #c98a1e;
  --progreso-suave: #fbf1de;
  --exito: #1f7a52;
  --exito-suave: #e3f3ea;
  --error: #b42318;
  --error-suave: #fbe7e5;
  --info: #2f5aa8;
  --info-suave: #e6edf9;
  --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: #0e1116;
    --superficie: #161a21;
    --superficie-2: #1d222b;
    --tinta: #e9edf3;
    --tinta-suave: #a2abb9;
    --linea: #2a303b;
    --marca: #e0869b;
    --marca-hover: #eb9bae;
    --marca-suave: #3a1d26;
    --sobre-marca: #1a0b10;
    --progreso: #e8b04f;
    --progreso-suave: #3a2e17;
    --exito: #74cfa1;
    --exito-suave: #17321f;
    --error: #f19a91;
    --error-suave: #3d1c19;
    --info: #93b4ee;
    --info-suave: #1b2740;
    --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: #0e1116;
  --superficie: #161a21;
  --superficie-2: #1d222b;
  --tinta: #e9edf3;
  --tinta-suave: #a2abb9;
  --linea: #2a303b;
  --marca: #e0869b;
  --marca-hover: #eb9bae;
  --marca-suave: #3a1d26;
  --sobre-marca: #1a0b10;
  --progreso: #e8b04f;
  --progreso-suave: #3a2e17;
  --exito: #74cfa1;
  --exito-suave: #17321f;
  --error: #f19a91;
  --error-suave: #3d1c19;
  --info: #93b4ee;
  --info-suave: #1b2740;
  --sombra: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px rgb(0 0 0 / 30%);
  color-scheme: dark;
}