/* GENERADO por build.js desde ../../../marca/tokens.css — NO EDITAR ACÁ. Fuente de verdad: clientes//marca/. */ /* ============================================================================ tokens.css — Identidad de LFPX (La Fábrica del Podcast) en variables CSS. FUENTE DE VERDAD de la marca del cliente, transversal a todos sus proyectos. La marca madre es LFPX: blanco sobre negro, sin color propio. Los seis programas (La Fábrica, Al Horno, El Campo, El Club del Ladrillo, El Fútbol, La Guita) son la capa de acento: cada uno aporta su color, y ninguno manda sobre la base. Ver marca.md. Dos capas, un solo vocabulario: - :root → la base OSCURA. Es la identidad por defecto y la que usan las pantallas (portal, back office, tableros). - [data-tema="claro"] → la misma marca sobre blanco, para lo que se lee fuera de la pantalla: mails y documentos imprimibles. Los NOMBRES no cambian entre capas; cambian los valores. Una app no consulta la capa: usa var(--token) y hereda la que corresponda. El build de cada app copia este archivo a su public/ (con cabecera "generado, no editar"), así todas las apps del cliente consumen la MISMA identidad. Las apps referencian SOLO estos tokens (var(--...)); nunca un color literal suelto. Tipografía: las dos caras del sitio del cliente (lfpx.com.ar), empaquetadas como .woff2 locales en assets/fonts/. Prohibido webfont remota. OJO al cablear una app: las dos @font-face de abajo apuntan a ./assets/fonts/, relativo a ESTE archivo. El `sync` del va.app.json tiene que copiar las dos .woff2 a una carpeta assets/fonts/ colgada de donde quede el tokens.css (si el CSS va a public/styles/, las caras van a public/styles/assets/fonts/). Si sólo se copia el tokens.css, la app renderiza con la fuente de sistema y nadie avisa. ========================================================================== */ /* Geist — la cara de interfaz del sitio de LFPX. Variable, 100 a 900. */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('./assets/fonts/geist-latin.woff2') format('woff2'); } /* Montserrat — la cara de los títulos y del lockup de los logos. Variable. */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('./assets/fonts/montserrat-latin.woff2') format('woff2'); } :root { /* --- Nombre de marca (string, lo usan headers y mails) --- REQUERIDO --- */ --marca-nombre: "LFPX"; /* --- Color de marca --- LFPX es monocroma: sobre la base oscura, el color de acción es el blanco (el mismo criterio del sitio, donde los botones son blancos sobre negro). */ --marca: #ffffff; /* REQUERIDO: color dominante de la marca */ --marca-contenido: #0a0a0a; /* texto/íconos SOBRE --marca (contraste). Kit. */ --marca-fuerte: #e7e7e7; /* variante intensa para hover y énfasis */ --marca-suave: #212121; /* tinte para fondos activos/hover */ --marca-suave-contenido: #ffffff; /* texto sobre --marca-suave. Kit. */ --acento: #67d2e5; /* celeste de La Fábrica: el único cromático de la base */ /* --- Superficies y texto (negros del sitio lfpx.com.ar) --- */ --fondo: #0a0a0a; /* REQUERIDO: fondo de página */ --superficie: #141414; /* REQUERIDO: tarjetas y paneles */ --superficie-alt:#1c1c1c; /* superficie alterna (encabezados de tabla, zonas) */ --elevado: #212121; /* modales, menús, paneles laterales. Kit. */ --tinta: #ffffff; /* REQUERIDO: texto principal */ --tinta-suave: #c9c9c9; /* texto secundario */ --tinta-tenue: #8f8f8f; /* texto terciario / mute */ --borde: #2b2b2b; /* REQUERIDO: bordes */ --borde-suave: #1f1f1f; /* bordes sutiles */ --foco: #67d2e5; /* anillo de foco por teclado. Kit. (11,2:1 sobre el fondo) */ /* Encabezado de tabla. Kit (opcional, default var(--marca)). Acá el dominante es el blanco, y una banda blanca por tabla rompe el tono: va la superficie alta. */ --tabla-head: #1c1c1c; --tabla-head-contenido: #c9c9c9; /* --- Tipografía --- */ /* REQUERIDO: familia base. Geist para interfaz, datos y cifras. */ --fuente: 'Geist', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --fuente-titulo: 'Montserrat', 'Geist', system-ui, Helvetica, Arial, sans-serif; /* --- Funcionales de estado (señal, no identidad; calibrados sobre negro) --- */ --ok: #6bd68f; --ok-bg: #14251b; --atencion: #fcbf33; --atencion-bg: #2a2113; --error: #ff6b5e; --error-bg: #2b1714; --info: #67d2e5; --info-bg: #12242a; /* --- Acento por programa --- Un token por programa, con el valor que funciona sobre ESTA capa. En la capa clara toma el pleno del logo. Se usa donde el programa es el sujeto: la cuenta de un programa, su fila, su etiqueta, su mail. Nunca para pintar la interfaz entera: la interfaz es LFPX. */ --acento-la-fabrica: #67d2e5; --acento-al-horno: #fcbf33; --acento-el-campo: #8ae284; --acento-el-club-del-ladrillo: #f76a00; --acento-el-futbol: #c6c6c6; --acento-la-guita: #bba9f0; /* --- Series de gráfico. Kit. --- Son los seis programas, en el orden del archivo de logos del cliente, que es el mismo de Marca.PROGRAMAS en marca.js. Un programa tiene el mismo color en todos los gráficos de todas las apps. El número de serie de cada uno no se deduce del índice de un array: sale de Marca.serie(slug). */ --serie-1: #67d2e5; /* La Fábrica */ --serie-2: #fcbf33; /* Al Horno */ --serie-3: #8ae284; /* El Campo */ --serie-4: #f76a00; /* El Club del Ladrillo */ --serie-5: #c6c6c6; /* El Fútbol */ --serie-6: #bba9f0; /* La Guita */ /* --- Forma: radios y sombras (los del sitio: redondeo contenido) --- */ --radio-sm: 6px; --radio: 10px; --radio-lg: 16px; /* Sobre negro la elevación se lee por contraste de superficie, no por sombra: las sombras van densas y cortas, y el borde hace la mayor parte del trabajo. */ --sombra-sm: 0 1px 2px rgba(0, 0, 0, .5); --sombra: 0 6px 20px rgba(0, 0, 0, .55); --sombra-lg: 0 18px 44px rgba(0, 0, 0, .65); } /* ============================================================================ Capa clara — la misma marca sobre blanco. Para mails y documentos imprimibles, donde el negro pleno no se puede garantizar (los clientes de mail lo pisan) ni conviene al papel. Se activa con data-tema="claro" en o en el contenedor. ========================================================================== */ [data-tema="claro"] { --marca: #0a0a0a; --marca-contenido: #ffffff; --marca-fuerte: #000000; --marca-suave: #f0f0f0; --marca-suave-contenido: #0a0a0a; --acento: #147598; /* el celeste oscuro del sitio: legible sobre blanco */ --fondo: #ffffff; --superficie: #ffffff; --superficie-alt:#f4f4f4; --elevado: #ffffff; --tinta: #0a0a0a; --tinta-suave: #4a4a4a; --tinta-tenue: #767676; --borde: #e4e4e4; --borde-suave: #f0f0f0; --foco: #147598; /* Sobre blanco sí manda el negro: el encabezado en negro pleno es muy LFPX. */ --tabla-head: #0a0a0a; --tabla-head-contenido: #ffffff; --ok: #1f7a4d; --ok-bg: #e8f4ed; --atencion: #94670c; --atencion-bg: #fdf3dd; --error: #b3372a; --error-bg: #fbeae7; --info: #147598; --info-bg: #e6f4f8; /* Acentos: el pleno de cada logo. Contra blanco, cuatro de los seis contrastan bien, pero el amarillo de Al Horno da 1,66:1 y el naranja del Ladrillo 2,99:1, los dos por debajo del 3:1 que pide un elemento gráfico. No se corrigen (son los colores del cliente): sobre claro el color del programa pinta superficies, nunca texto ni líneas finas, y siempre lleva el nombre o el logo al lado. Una franja de 4 px en amarillo no se ve; un chip con el nombre adentro, sí. Para firmar un mail de un programa está su lockup en caja (assets/programas/-caja.svg), que trae su propio contraste resuelto. */ --acento-la-fabrica: #244dff; --acento-al-horno: #fcbf33; --acento-el-campo: #00662d; --acento-el-club-del-ladrillo: #f76a00; --acento-el-futbol: #0a0a0a; --acento-la-guita: #5c4a92; --serie-1: #244dff; /* La Fábrica */ --serie-2: #fcbf33; /* Al Horno */ --serie-3: #00662d; /* El Campo */ --serie-4: #f76a00; /* El Club del Ladrillo */ /* El Fútbol es el único cuya serie no es su acento: su pleno es el negro, que en un gráfico sobre blanco se confunde con los ejes, así que la serie toma el gris del logo bajado a legible (8,86:1). */ --serie-5: #4a4a4a; /* El Fútbol */ --serie-6: #5c4a92; /* La Guita */ --sombra-sm: 0 1px 2px rgba(10, 10, 10, .06); --sombra: 0 4px 16px rgba(10, 10, 10, .09); --sombra-lg: 0 14px 38px rgba(10, 10, 10, .16); }