/*
 * Tokens del diseño L1X (punto 1.5, D8).
 *
 * SOLO variables en :root, ninguna regla visual. La carga partials/estilos-base
 * en todos los layouts (también en los paneles, studio y dev, y en app y guest
 * para Tailwind), así que cualquier vista, clara u oscura, puede leer un
 * --l1x-* sin arrastrar el tema claro. Las reglas del tema viven en
 * tema-l1x.css, que solo cargan las páginas con body.tema-l1x.
 *
 * Cada color lleva su versión -rgb ("r g b") para Tailwind:
 *   l1x: { oro: 'rgb(var(--l1x-oro-rgb) / <alpha-value>)' }
 *
 * Contrastes (WCAG) comprobados en tests/Unit/ContrasteDeTokensTest.php. Si se
 * cambia un color, esa prueba dice si el par sigue cumpliendo.
 */
:root {
    /* Superficies */
    --l1x-fondo: #F5F5F5;
    --l1x-fondo-rgb: 245 245 245;
    --l1x-superficie: #FFFFFF;
    --l1x-superficie-rgb: 255 255 255;
    --l1x-escenario: #0B0B0D;
    --l1x-escenario-rgb: 11 11 13;
    --l1x-pie: #050505;
    --l1x-pie-rgb: 5 5 5;

    /* Texto. El secundario es un gris sólido, no un rgba (D8: portátiles con
       poco brillo). Sobre superficies oscuras se usa el -oscuro. */
    --l1x-texto: #111111;
    --l1x-texto-rgb: 17 17 17;
    --l1x-texto-secundario: #4D4D4D;
    --l1x-texto-secundario-rgb: 77 77 77;
    --l1x-texto-secundario-oscuro: #BDBDBD;
    --l1x-texto-secundario-oscuro-rgb: 189 189 189;

    /* Dorado. #C8A96A nunca es color de texto sobre claro (2,06:1): para eso
       está --l1x-oro-texto. Sobre un botón dorado el texto es siempre #111. */
    --l1x-oro: #C8A96A;
    --l1x-oro-rgb: 200 169 106;
    --l1x-oro-hover: #B8975A;
    --l1x-oro-hover-rgb: 184 151 90;
    --l1x-oro-texto: #806229;
    --l1x-oro-texto-rgb: 128 98 41;

    /* Bordes. #E0E0E0 es decorativo; el de los campos de texto y selects
       necesita 3:1 y es el -control. */
    --l1x-borde: #E0E0E0;
    --l1x-borde-rgb: 224 224 224;
    --l1x-borde-control: #8C8C8C;
    --l1x-borde-control-rgb: 140 140 140;

    /* En vivo: la etiqueta usa el rojo oscuro (texto blanco 4,97:1); el claro
       queda para el punto pulsante y los acentos. */
    --l1x-envivo: #E63946;
    --l1x-envivo-rgb: 230 57 70;
    --l1x-envivo-etiqueta: #D62839;
    --l1x-envivo-etiqueta-rgb: 214 40 57;

    /* Etiquetas de categoría (fondo / texto) */
    --l1x-nueva: #457B9D;
    --l1x-nueva-rgb: 69 123 157;
    --l1x-nueva-texto: #FFFFFF;
    --l1x-vip: #C8A96A;
    --l1x-vip-rgb: 200 169 106;
    --l1x-vip-texto: #111111;
    --l1x-favorita: #E88A9A;
    --l1x-favorita-rgb: 232 138 154;
    --l1x-favorita-texto: #111111;
    --l1x-categoria: #FFFFFF;
    --l1x-categoria-rgb: 255 255 255;
    --l1x-categoria-texto: #111111;

    /* Chips */
    --l1x-chip-hover: #EBEBEB;
    --l1x-chip-hover-rgb: 235 235 235;
    --l1x-chip-activo: #111111;
    --l1x-chip-activo-rgb: 17 17 17;
    --l1x-chip-activo-texto: #FFFFFF;

    /* Cabecera: semitransparente con blur; sin blur, el respaldo casi opaco */
    --l1x-cabecera-fondo: rgba(245, 245, 245, .85);
    --l1x-cabecera-fondo-respaldo: rgba(245, 245, 245, .97);

    /* Esqueleto de carga, gris cálido */
    --l1x-esqueleto: #ECEAE6;
    --l1x-esqueleto-rgb: 236 234 230;
    --l1x-esqueleto-brillo: #F5F3EF;
    --l1x-esqueleto-brillo-rgb: 245 243 239;

    /* Sombras y radios */
    --l1x-sombra: 0 2px 8px rgba(0, 0, 0, .06);
    --l1x-sombra-elevada: 0 12px 28px rgba(0, 0, 0, .12);
    --l1x-sombra-lateral: 0 0 24px rgba(0, 0, 0, .06);
    --l1x-radio: 8px;
    --l1x-radio-chip: 999px;

    /* Espaciado (en móvil, <640px, el tema los baja a 16px y 32px) */
    --l1x-espacio-lateral: 24px;
    --l1x-espacio-seccion: 48px;
    --l1x-espacio-rejilla: 24px;

    /* Movimiento: 200-300 ms, ease-out */
    --l1x-dur-rapida: 200ms;
    --l1x-dur: 250ms;
    --l1x-dur-lenta: 300ms;
    --l1x-curva: cubic-bezier(0, 0, .2, 1);

    /* Fuentes (autoalojadas en css/vendor/fuentes, PR base T5) */
    --l1x-fuente-cuerpo: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --l1x-fuente-titulos: 'Playfair Display', Georgia, 'Times New Roman', serif;
}