/* Paleta del sitio: la unica declaracion de los tokens de color.
 *
 * Estaban copiados en :root de styles.css y de home.css, que son las dos unicas
 * hojas que los consumen y que nunca se cargan juntas (home.css es la portada,
 * styles.css el resto). Trece de los catorce valores coincidian y uno ya se
 * habia desviado: --text-secondary estaba al 0.78 en styles.css y al 0.76 en
 * home.css. Gana el 0.78, que es el que ven las quince paginas restantes.
 *
 * Se carga desde pwa_head.html, que es el unico include comun a las dieciseis
 * plantillas. Va despues de las hojas que usan los tokens y da igual: el valor
 * de una custom property lo resuelve la cascada antes de sustituir var(), asi
 * que el orden entre declaracion y uso no importa.
 */
:root {
    --bg-1: #070715;
    --bg-2: #131b46;
    --bg-3: #341b63;
    --text-primary: #f2f5fb;
    --text-secondary: rgba(227, 233, 245, 0.78);
    --glass-bg: rgba(11, 20, 44, 0.48);
    --glass-bg-soft: rgba(34, 30, 70, 0.3);
    --glass-border: rgba(207, 220, 241, 0.27);
    --glass-highlight: rgba(255, 255, 255, 0.15);
    --card-bg: rgba(255, 255, 255, 0.03);
    --card-border: rgba(198, 214, 242, 0.16);
    --card-hover: rgba(216, 228, 248, 0.46);
    --accent: #c6d6f5;
    --accent-strong: #8fb4e8;
    --accent-warm: #d6bc8f;
    /* Radios. Había diecinueve valores distintos (5, 6, 7, 8, 9, 10, 11, 12,
       14, 15, 16, 18, 20, 22, 28...) repartidos sin criterio, y cada pieza se
       veía de una familia distinta. Cinco escalones:
         xs    etiquetas, tooltips, chips
         sm    botones, campos, portadas y tarjetas de noticia
         md    tarjetas de contenido y modales
         lg    contenedores grandes (la portada, paneles)
         pill  píldoras
       Los de 1-3 px (rayas finas) y los 50% (círculos) se quedan tal cual. */
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-pill: 999px;
    /* Tipografía. Los mínimos siguen lo habitual en la industria (Material y
       WCAG toman 16 px como cuerpo de lectura; iOS, 17 pt, y amplía la página
       al enfocar un campo de menos de 16 px):
         xs    12  mínimo absoluto: pies, fechas, contadores, etiquetas
         sm    14  texto secundario, metadatos
         base  16  texto que se lee (párrafos, descripciones) y campos
         md    18  subtítulos
         lg    20  títulos de tarjeta y de modal
         xl    24  títulos de sección
         2xl   32  título de página grande
       Nada que se lea por debajo de xs. */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-md: 1.125rem;
    --text-lg: 1.25rem;
    --text-xl: 1.5rem;
    --text-2xl: 2rem;
    /* Sombras de elevación: cuánto «flota» una pieza. Había una por regla
       (0 6px 14px, 0 8px 20px, 0 10px 22px, 0 10px 24px...) con opacidades de
       0,26 a 0,64. Tres niveles:
         sm  controles pequeños, tooltips, chips
         md  botones flotantes, tarjetas, paneles
         lg  modales
       Fuera de la escala, a propósito: brillos de color, anillos de foco,
       sombras interiores, el relieve en capas de la cabecera, la de la barra
       inferior (proyecta hacia arriba) y las aplanadas de móvil. */
    --shadow-sm: 0 4px 12px rgba(2, 8, 18, 0.35);
    --shadow-md: 0 10px 24px rgba(2, 8, 18, 0.42);
    --shadow-lg: 0 30px 64px rgba(2, 8, 18, 0.6);
    /* Superficie del contenido: tarjetas de estadísticas, Acerca de, 404.
       Opaca a propósito. El vidrio (desenfoque + degradado translúcido) se
       queda solo en la cabecera; puesto en todo, era el sello de plantilla. */
    --surface: #111a37;
    --surface-border: rgba(207, 220, 241, 0.12);
    --surface-shadow: var(--shadow-md);
    /* Botones flotantes (Libros, TV, Noticias). Morado oscuro y opaco: sobre
       una portada clara el azul translúcido de antes se perdía, y el icono
       blanco queda por encima de 7:1. Son cuadrados con el radio de los
       botones de la cabecera (--radius-sm), para que se lean como la misma
       familia. */
    --fab-bg: linear-gradient(165deg, #5e44ad, #34216f);
    --fab-bg-hover: linear-gradient(165deg, #6d52c0, #3f2a82);
    --fab-bg-warm: linear-gradient(165deg, #dcc497, #a8894f);
    --fab-bg-warm-hover: linear-gradient(165deg, #e4cea4, #b8995c);
}