/* ============================================================================
   Design tokens — bookreader v2
   Un solo acento: #22c55e (emerald) en TODOS los componentes.
   Hover: #16a34a · Soft: rgba(34,197,94,0.14) · Superficies: #faf8f3/#fdfbf6/#efeae0.
   Referencias: NotebookLM (superficies tonales), Apple Books (lectura inmersiva).
   ========================================================================== */

:root {
  /* ---- Escalas independientes del tema ---- */
  /* Radios */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* Espaciado (base 4px) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px;

  /* Tipografía */
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: var(--font-ui);
  --font-reader: ui-serif, 'New York', Georgia, 'Times New Roman', serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-size-base: 16px;
  --line-height-base: 1.6;
  --fs-xs: 11px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 16px;
  --fs-xl: 20px; --fs-2xl: 26px;

  /* Layout */
  --sidebar-width: 320px;
  --ai-panel-width: 400px;
  --header-height: 52px;
  --footer-height: 52px;
  --reader-max-width: 600px;

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  /* Salida suave (arranca rápido, frena largo) para lo que ENTRA en pantalla: drawers,
     panel del agente, entrada de capítulo. Da sensación de peso sin rebote de muelle. */
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-fast: 0.15s var(--ease);
  --transition-normal: 0.25s var(--ease);
  --transition-panel: 0.28s var(--ease-out-soft);
  --dur-chapter: 0.18s;

  /* ---- Paleta CLARA (por defecto) — BLANCO neutro (no sepia) ----
     El tono cálido "papel" vive ahora en el tema Sepia; "Claro" es blanco puro con grises
     neutros (fríos) para bordes/hover/sombra. Así "Claro" = blanco de verdad. */
  --surface-0: #ffffff;  /* fondo de la app */
  --surface-1: #ffffff;  /* barras / paneles */
  --surface-2: #ffffff;  /* tarjetas */
  --surface-3: #eef0f2;  /* hover / activo (gris neutro claro) */
  /* "Escritorio": el fondo sobre el que reposa la página del libro. Se DERIVA del color
     real de la página (--page-bg, que fija epub-reader según el tema) oscureciéndolo un
     punto, así funciona igual en claro, oscuro, sepia y con cualquier tinte de papel sin
     mantener una tabla de colores paralela. Ver .reader-viewport en main.css. */
  --desk: color-mix(in srgb, var(--page-bg, var(--surface-0)) 90%, #0d1117);
  /* Imagotipo completo (botón "biblioteca"): tile oscuro sobre barra clara. En
     oscuro se invierte, si no el tile se fundiría con la barra. La cinta usa
     --accent, así que sigue al tema sola. */
  --logo-tile: #111418;
  --logo-page: #f8fafc;
  --text: #1f2328;
  --text-soft: #6b7280;
  --text-faint: #9aa1ab;
  --accent: #22c55e;     /* emerald */
  --accent-hover: #16a34a;
  --accent-soft: rgba(34, 197, 94, 0.14);
  --on-accent: #111418;  /* texto OSCURO sobre emerald (contraste) */
  --border: #e3e6ea;
  --border-soft: #eef0f2;
  --shadow-color: 20, 28, 40;
  --shadow-1: 0 1px 2px rgba(var(--shadow-color), 0.05), 0 1px 3px rgba(var(--shadow-color), 0.04);
  --shadow-2: 0 4px 16px rgba(var(--shadow-color), 0.07);
  --shadow-3: 0 12px 40px rgba(var(--shadow-color), 0.12);

  /* Color de sombra suelto (no hay equivalente 1:1 entre los tokens --shadow-1/2/3, que son
     box-shadows completos). Se conserva como token propio. Nota histórica: aquí hubo una
     autorreferencia cíclica `--border: var(--border)` que dejaba --border inválido en claro
     (bordes con ancho 0); no volver a declarar --border en este bloque. */
  --shadow: rgba(var(--shadow-color), 0.10);
}

/* ---- Tokens del tema OSCURO (rediseñado, menos saturado) ---- */
/* Se aplican: (a) explícitamente con [data-theme="dark"], o (b) por sistema
   cuando no hay override y el dispositivo está en oscuro. */
[data-theme="dark"] {
  --surface-0: #111418;  /* charcoal casi negro */
  --surface-1: #1a1f24;  /* fondo secundario */
  --surface-2: #232a31;  /* paneles / tarjetas */
  --surface-3: #2b333b;  /* hover / activo */
  --desk: color-mix(in srgb, var(--page-bg, var(--surface-0)) 76%, #000);
  --logo-tile: #f2f4f7;
  --logo-page: #111418;
  --text: #f2f3f5;
  --text-soft: #a8b0b8;
  --text-faint: #7b838c;
  --accent: #22c55e;     /* emerald */
  --accent-hover: #34d06a;
  --accent-soft: rgba(34, 197, 94, 0.18);
  --on-accent: #111418;
  --border: #30363d;
  --border-soft: #23292f;
  --shadow-color: 0, 0, 0;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-3: 0 12px 40px rgba(0, 0, 0, 0.5);
  --shadow: rgba(0, 0, 0, 0.4);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="sepia"]):not([data-theme="dark"]) {
    --surface-0: #111418;
    --surface-1: #1a1f24;
    --surface-2: #232a31;
    --surface-3: #2b333b;
    --desk: color-mix(in srgb, var(--page-bg, var(--surface-0)) 76%, #000);
    --logo-tile: #f2f4f7;
    --logo-page: #111418;
    --text: #f2f3f5;
    --text-soft: #a8b0b8;
    --text-faint: #7b838c;
    --accent: #22c55e;
    --accent-hover: #34d06a;
    --accent-soft: rgba(34, 197, 94, 0.18);
    --on-accent: #111418;
    --border: #30363d;
    --border-soft: #23292f;
    --shadow-color: 0, 0, 0;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-3: 0 12px 40px rgba(0, 0, 0, 0.5);
    --shadow: rgba(0, 0, 0, 0.4);
  }
}

/* ---- Tema SEPIA (papel cálido para lectura de tarde; acento emerald como el resto) ---- */
[data-theme="sepia"] {
  --surface-0: #f7f1e3;
  --surface-1: #fbf6ea;
  --surface-2: #fbf6ea;
  --surface-3: #ece1c9;
  --text: #3f382e;
  --text-soft: #6f6151;
  --text-faint: #9a8b76;
  --accent: #1f9d54;     /* emerald ligeramente atenuado para el papel cálido */
  --accent-hover: #178646;
  --accent-soft: rgba(31, 157, 84, 0.14);
  --on-accent: #111418;   /* texto oscuro sobre el acento, coherente con el resto */
  --border: #ddcfb2;
  --border-soft: #e7dcc3;
  --shadow-color: 91, 70, 54;
  --shadow: rgba(91, 70, 54, 0.12);
}