:root {
  --escena: #1d2440;
  --escena-2: color-mix(in srgb, #0b5cad 35%, #1d2440);
  --sobre-escena: #f3f1ea;
  --sobre-escena-suave: color-mix(in srgb, #f3f1ea 85%, #1d2440);
  --escena-acento: #7cb8f2;
  --f-titulo: var(--familia-andika, "Andika"), system-ui, sans-serif;
  --f-texto: var(--familia-andika, "Andika"), system-ui, sans-serif;
  --f-mono: var(--familia-ibm-plex-mono, "IBM Plex Mono"), ui-monospace, monospace;
  --r: 10px;
  --papel: #fffaf2;
  --superficie: #ffffff;
  --superficie-2: #fff1dc;
  --tinta: #1d2440;
  --tinta-suave: #4b5372;
  --linea: #e8dcc6;
  --marca: #0b5cad;
  --marca-hover: #094b8e;
  --marca-suave: #e4effb;
  --sobre-marca: #ffffff;
  --progreso: #8a5300;
  --progreso-suave: #fff0d4;
  --exito: #00704f;
  --exito-suave: #dff5ec;
  --error: #b23a00;
  --error-suave: #fde9df;
  --info: #0b5cad;
  --info-suave: #e4effb;
  --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: #14182b;
    --superficie: #1c2138;
    --superficie-2: #252b47;
    --tinta: #f3f1ea;
    --tinta-suave: #c3c6d6;
    --linea: #363d5e;
    --marca: #7cb8f2;
    --marca-hover: #9cc9f5;
    --marca-suave: #1f3355;
    --sobre-marca: #0d1a33;
    --progreso: #f2d24b;
    --progreso-suave: #3a3220;
    --exito: #4fd1a5;
    --exito-suave: #143a30;
    --error: #ff9a6b;
    --error-suave: #43241a;
    --info: #7cb8f2;
    --info-suave: #1f3355;
    --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: #14182b;
  --superficie: #1c2138;
  --superficie-2: #252b47;
  --tinta: #f3f1ea;
  --tinta-suave: #c3c6d6;
  --linea: #363d5e;
  --marca: #7cb8f2;
  --marca-hover: #9cc9f5;
  --marca-suave: #1f3355;
  --sobre-marca: #0d1a33;
  --progreso: #f2d24b;
  --progreso-suave: #3a3220;
  --exito: #4fd1a5;
  --exito-suave: #143a30;
  --error: #ff9a6b;
  --error-suave: #43241a;
  --info: #7cb8f2;
  --info-suave: #1f3355;
  --sombra: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px rgb(0 0 0 / 30%);
  color-scheme: dark;
}