/* SPDX-License-Identifier: LicenseRef-Propietaria
   Tokens de BibliotecApp: ÚNICA fuente de verdad de color, letra, espacio, forma y movimiento.
   Los componentes solo usan var(--…). Contrastes medidos con herramientas/contraste.py (ver DESIGN.md). */

@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/source-sans-3-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/source-sans-3-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/source-sans-3-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/source-sans-3-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/source-serif-4-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/source-serif-4-latin-600-normal.woff2") format("woff2"); }

:root {
  color-scheme: light dark;

  /* Color · claro */
  --ui-fondo: #f5f4f1;
  --ui-superficie: #fffefc;
  --ui-superficie-2: #eceae5;
  --ui-texto: #1d1f23;
  --ui-texto-suave: #575b63;
  --ui-acento: #7a2e1f;
  --ui-acento-hover: #5f2216;
  --ui-sobre-acento: #fffefc;
  --ui-foco: #1d4ed8;
  --ui-borde: #dedad3;
  --ui-borde-control: #85827b;
  --ui-realce: rgb(122 46 31 / 0.08);
  --ui-marca-fondo: #f4e3a8;
  --ui-marca-texto: #1d1f23;
  --ui-peligro: #a3261b;
  --ui-aviso-fondo: #fbf1d4;
  --ui-sombra-1: 0 1px 2px rgb(29 31 35 / 0.06), 0 1px 1px rgb(29 31 35 / 0.04);
  --ui-sombra-2: 0 4px 12px rgb(29 31 35 / 0.08), 0 1px 3px rgb(29 31 35 / 0.06);
  --ui-sombra-3: 0 16px 40px rgb(29 31 35 / 0.14), 0 2px 6px rgb(29 31 35 / 0.08);

  /* Portadas tipográficas (cuando un libro no tiene imagen): mismos tonos en claro y oscuro */
  --portada-texto: #fffefc;
  --portada-1: #3b4a5c;
  --portada-2: #6a3326;
  --portada-3: #2f4a3e;
  --portada-4: #4f4560;
  --portada-5: #5e4a25;
  --portada-6: #3a3f45;

  /* Tipografía: base 17 px (público de 40–70 años), razón 1,2 */
  --fuente-ui: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fuente-titulos: "Source Serif 4", Georgia, "Times New Roman", serif;
  --t-xs: 0.738rem;
  --t-sm: 0.885rem;
  --t-base: 1.0625rem;
  --t-lg: 1.275rem;
  --t-xl: 1.53rem;
  --t-2xl: 1.836rem;
  --t-3xl: 2.203rem;
  --interlinea: 1.55;
  --interlinea-titulos: 1.2;
  --medida: 68ch;

  /* Espacio: rejilla de 4/8, en rem para que escale con la letra */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;
  --e-8: 4rem;
  --objetivo-tactil: 3rem;   /* 48 px */
  --ancho-max: 72rem;

  /* Forma */
  --radio-1: 0.5rem;
  --radio-2: 0.75rem;
  --radio-3: 1rem;

  /* Movimiento */
  --mov-rapido: 150ms;
  --mov: 220ms;
  --curva-entrada: cubic-bezier(0.2, 0.7, 0.2, 1);
  --curva-salida: cubic-bezier(0.4, 0, 1, 1);

  --escala: 1;   /* 1–1,75: lo cambiará el ajuste «Letra y contraste» */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --ui-fondo: #15171b;
    --ui-superficie: #1e2126;
    --ui-superficie-2: #272b31;
    --ui-texto: #ecebe7;
    --ui-texto-suave: #a9adb5;
    --ui-acento: #e8a594;
    --ui-acento-hover: #f2bfb2;
    --ui-sobre-acento: #1d1f23;
    --ui-foco: #9db8ff;
    --ui-borde: #343840;
    --ui-borde-control: #7b808a;
    --ui-realce: rgb(232 165 148 / 0.12);
    --ui-marca-fondo: #5b4b17;
    --ui-marca-texto: #ecebe7;
    --ui-peligro: #ff9a8f;
    --ui-aviso-fondo: #3a3220;
    --ui-sombra-1: 0 1px 2px rgb(0 0 0 / 0.3);
    --ui-sombra-2: 0 4px 12px rgb(0 0 0 / 0.35);
    --ui-sombra-3: 0 16px 40px rgb(0 0 0 / 0.5);
  }
}

:root[data-tema="oscuro"] {
  --ui-fondo: #15171b;
  --ui-superficie: #1e2126;
  --ui-superficie-2: #272b31;
  --ui-texto: #ecebe7;
  --ui-texto-suave: #a9adb5;
  --ui-acento: #e8a594;
  --ui-acento-hover: #f2bfb2;
  --ui-sobre-acento: #1d1f23;
  --ui-foco: #9db8ff;
  --ui-borde: #343840;
  --ui-borde-control: #7b808a;
  --ui-realce: rgb(232 165 148 / 0.12);
  --ui-marca-fondo: #5b4b17;
  --ui-marca-texto: #ecebe7;
  --ui-peligro: #ff9a8f;
  --ui-aviso-fondo: #3a3220;
  --ui-sombra-1: 0 1px 2px rgb(0 0 0 / 0.3);
  --ui-sombra-2: 0 4px 12px rgb(0 0 0 / 0.35);
  --ui-sombra-3: 0 16px 40px rgb(0 0 0 / 0.5);
}