/** * ── ESTE ARCHIVO ES UNA COPIA, Y SE VIGILA COMO TAL ─────────────────────── * * El original vive en `consola/public/css/cimientos.css`. El sitio público es * otra aplicación, con su propio servidor y su propia carpeta de estáticos, así * que no puede pedirle el archivo a la consola sin atar su portada a que la * consola esté en pie — y la portada es lo primero que ve alguien que no nos * conoce. * * Dos copias de lo mismo SE SEPARAN SIEMPRE. Por eso `un-solo-sitio-decide-los-colores` * las compara y se pone roja si dejan de ser idénticas, salvo por las dos rutas * de la letra de marca, que aquí viven en `/assets/fonts/`. * * Si hay que cambiar un color, se cambia en la consola y se vuelve a copiar. * Nunca al revés, y nunca sólo en uno. */ /** * LOS CIMIENTOS: «ACERO FRÍO Y SEÑAL». * * ── QUÉ ES ESTE ARCHIVO Y POR QUÉ EXISTE ────────────────────────────────── * * Es el único sitio de GastroSquad donde se decide un color. Todo lo demás * —`main.css`, `pos.css`, la pantalla de cocina, las 103 vistas— pide colores * por su nombre y no los elige. * * Antes no era así. Había 595 colores escritos a mano en las hojas de estilo y * 620 más metidos dentro de las vistas, repartidos en 67 archivos. Ninguno de * esos obedecía a nada: cambiar la paleta significaba abrir 67 archivos y * confiar en no dejarse ninguno. Y siempre se dejaba alguno. * * ── LA IDEA QUE GOBIERNA TODO ───────────────────────────────────────────── * * La entregó el equipo de diseño y se llama «acero frío y señal»: superficies * neutras de acero de cocina bajo luz de pantalla, y el color reservado para * lo que significa algo. Dentro de esa idea hay UNA REGLA que no se rompe: * * COBALTO ES LO QUE HACE LA PERSONA. * AQUA ES LO QUE PROPONE EL ESCUADRÓN. * * No es decoración: es la única señal que separa «esto lo decidiste tú» de * «esto te lo está sugiriendo una IA». Un botón de agente en cobalto miente * sobre quién tomó la decisión, y en un producto donde ocho agentes proponen * cosas sobre el dinero de alguien, esa mentira importa. * * ── POR QUÉ `:root` SIGUE SIENDO EL TEMA OSCURO ─────────────────────────── * * El sistema de diseño es claro por defecto, y la consola también: `layout.pug` * escribe `data-theme="light"` en el ``. Pero hay pantallas que NO llevan * ese atributo —la de cocina, la cartelera del televisor, el comprobante, la * carta de la mesa— y esas se quedan con lo que diga `:root`. * * Eso no es un descuido: una pantalla de cocina a las once de la noche y un * televisor en un mostrador se leen mejor oscuros. Si `:root` pasara a ser * claro, esas cinco pantallas cambiarían de polaridad sin que nadie lo pidiera, * y son justo las que se miran de reojo y a tres metros. * * Así que la estructura se conserva y sólo cambia la paleta de debajo: * * :root → acero oscuro (lo que hoy ya era oscuro) * [data-theme="light"] → acero claro (lo que hoy ya era claro) * [data-theme="dark"] → acero oscuro (para poder pedirlo a propósito) */ /* ══════════════════════════════════════════════════════════════════════════ LA TIPOGRAFÍA DE MARCA, SERVIDA POR LA CASA. ══════════════════════════════════════════════════════════════════════════ Clash Display es la letra de GastroSquad: la de la marca, la de los títulos y la del logotipo. No está en ningún servicio público de tipografías, así que la sirve la propia aplicación desde `consola/public/fonts/`. ── POR QUÉ `swap` Y NO OTRA COSA ────────────────────────────────────────── `font-display: swap` pinta el texto INMEDIATAMENTE con la letra de respaldo y lo cambia cuando llega la buena. La alternativa —esperar a la fuente— deja el título en blanco unos cientos de milisegundos, y eso en una caja, con datos móviles y alguien esperando, se lee como que la pantalla no cargó. Un salto de letra molesta un instante. Un título invisible parece una avería. ── Y POR QUÉ HAY DOS ARCHIVOS ───────────────────────────────────────────── La variable cubre de 400 a 700 en un solo archivo de 29 KB, así que un peso intermedio no cuesta una petición más. La Bold va aparte porque es la que usan el logotipo y los titulares grandes, que son lo primero que se pinta: pedirle a la variable que interpole hasta 700 la deja un pelo más delgada de lo que el diseño dibujó. ══════════════════════════════════════════════════════════════════════════ */ @font-face { font-family: "Clash Display"; src: url("/assets/fonts/clash-display.woff2") format("woff2-variations"), url("/assets/fonts/clash-display.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; } @font-face { font-family: "Clash Display"; src: url("/assets/fonts/clash-display-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } :root { /* ══════════════════════════════════════════════════════════════════ 1. LA PALETA CRUDA Los números del sistema de diseño, tal cual. Aquí no hay decisiones: son las rampas. Nadie debería usar estas variables directamente en una pantalla — para eso están los nombres con significado de abajo. ══════════════════════════════════════════════════════════════════ */ /* Cobalto — lo que hace la persona. Calibrado en oklch (L .56 · C .185 · H 256) para vivir en la misma familia que el aqua de los agentes, y que pasar de uno a otro no dé un salto de saturación. */ --cobalto-50: #F0F6FF; --cobalto-100: #DFEDFF; --cobalto-200: #BDD9FF; --cobalto-300: #91BFFC; --cobalto-400: #5397F0; --cobalto-500: #0D71DD; --cobalto-600: #0059B9; --cobalto-700: #004492; --cobalto-800: #00306B; --cobalto-900: #001E47; --cobalto-950: #00112C; /* Aqua — lo que propone el escuadrón. */ --aqua-50: #E6FAF7; --aqua-100: #C2F2EA; --aqua-200: #8AE5D7; --aqua-300: #4CD2BF; --aqua-400: #17B9A3; --aqua-500: #0E9384; --aqua-600: #0B766A; --aqua-700: #085B52; --aqua-800: #06423B; --aqua-900: #042B27; /* Acero — grises fríos, de hueso a casi negro. Son el 90% de la pantalla. */ --acero-0: #FFFFFF; --acero-25: #FAFBFC; --acero-50: #F4F6F8; --acero-100: #EAEDF2; --acero-200: #D9DEE7; --acero-300: #BCC4D0; --acero-400: #8F99A8; --acero-500: #68727F; --acero-600: #4A5360; --acero-700: #333B45; --acero-800: #21262E; --acero-900: #14181E; --acero-950: #0A0D11; /* Semánticos. Un solo tono por significado, con su versión suave para fondos de píldora y su versión fuerte para texto sobre claro. */ --verde-100: #D6F2E3; --verde-500: #12A05C; --verde-700: #0B6B3D; --ambar-100: #FDF0D0; --ambar-500: #E8A317; --ambar-700: #9A6706; --rojo-100: #FBDDDE; --rojo-500: #E03A45; --rojo-700: #9A1F27; /* ══════════════════════════════════════════════════════════════════ 2. LOS NOMBRES CON SIGNIFICADO Esto es lo que se usa en las pantallas. Un nombre dice PARA QUÉ sirve el color, no de qué color es — así el día que el ámbar deje de ser ámbar, nadie tiene que buscar «ámbar» por el repositorio. ══════════════════════════════════════════════════════════════════ */ /* — Lo que hace la persona — */ --accion: var(--cobalto-500); --accion-encima: var(--cobalto-400); --accion-pulsa: var(--cobalto-700); --accion-suave: rgba(13, 113, 221, .18); /* * EL TEXTO DE ACCIÓN SOBRE OSCURO ES UNA EXCEPCIÓN DECLARADA. * * El sistema de diseño dice que `--brand` no se aclara nunca «para * adaptarse a un fondo», y para rellenos se respeta al pie de la letra. * Pero cobalto 500 sobre acero 950 da un contraste de 2,9:1 — por debajo * del mínimo legible. Un enlace que no se puede leer no es fiel al * diseño: está roto. * * Así que el RELLENO se queda en cobalto 500 en los dos temas, y sólo el * TEXTO sube a cobalto 400 sobre fondo oscuro. Queda anotado para * preguntárselo al equipo de diseño. */ --accion-texto: var(--cobalto-400); /* — Lo que propone el escuadrón — Todo lo que sale de una IA vive aquí y en ningún otro sitio. */ --agente: var(--aqua-400); --agente-encima: var(--aqua-300); --agente-suave: rgba(23, 185, 163, .16); --agente-filete: rgba(23, 185, 163, .35); /* * EL ÚNICO DEGRADADO DEL SISTEMA. * * El diseño prohíbe los degradados decorativos y permite exactamente uno: * el halo de agente. Es obligatorio detrás de todo lo que produce una IA * sobre superficie clara, y es lo que ata un aviso al escuadrón cuando el * fondo no ayuda. No se escribe a mano en ninguna pantalla: se pide aquí. */ --agente-halo: radial-gradient(120% 90% at 50% 0%, rgba(23,185,163,.18), transparent 70%); --agente-halo-retrato: radial-gradient(120% 80% at 50% 100%, rgba(23,185,163,.28), transparent 62%); /* — Estados — Sobre oscuro suben un escalón: el tono pensado para texto negro sobre blanco se apaga sobre acero 950 y deja de gritar, que es su oficio. */ --bien: #2BC77E; --bien-suave: rgba(43, 199, 126, .16); --bien-texto: #6EE7B0; --ojo: #F0B429; --ojo-suave: rgba(240, 180, 41, .16); --ojo-texto: #FBD26A; --mal: #F0555F; --mal-suave: rgba(240, 85, 95, .16); --mal-texto: #FF9CA3; --info: var(--accion); --info-suave: var(--accion-suave); /* — Superficies — Planas. Sin cristal: ver la nota de compatibilidad más abajo. */ --fondo: var(--acero-950); --fondo-lienzo: var(--acero-900); --superficie: var(--acero-900); --superficie-hundida: var(--acero-950); --superficie-alta: var(--acero-800); /* — Texto — */ --tinta: var(--acero-25); --tinta-cuerpo: var(--acero-200); --tinta-tenue: var(--acero-400); --tinta-fantasma: var(--acero-500); --tinta-sobre-accion: #FFFFFF; /* — Filetes — */ --filete: #252B33; --filete-medio: #333B45; --filete-fuerte: var(--acero-500); /* — Las series de una gráfica — ── POR QUÉ ESTAS NO SON SEMÁNTICAS ───────────────────────────────── Todos los demás colores de este archivo dicen QUÉ SIGNIFICA algo. Éstos no significan nada: sólo tienen que **distinguirse entre sí**. Es la diferencia entre «esto va mal» y «ésta es la tercera sede». Por eso son las únicas que no se pueden agrupar por familia — si dos series caen en el mismo tono, la leyenda deja de poder leerse— y por eso viven aquí y no sueltas en cada gráfica, que es de donde vienen. Van en orden de lectura: las primeras son las que más se ven. */ --serie-1: var(--cobalto-500); --serie-2: var(--aqua-500); --serie-3: #E8A317; --serie-4: #E03A45; --serie-5: #7B61C9; --serie-6: #12A05C; --serie-7: #C2410C; /* ══════════════════════════════════════════════════════════════════ 3. SOMBRAS, RADIOS, MOVIMIENTO ══════════════════════════════════════════════════════════════════ */ /* Cuatro niveles y ni uno más. Las tarjetas llevan borde Y sombra suave, nunca sombra sola: sobre fondo oscuro una sombra sin borde no se ve. */ --sombra-1: 0 1px 2px rgba(10,13,17,.28), 0 1px 1px rgba(10,13,17,.20); --sombra-2: 0 2px 6px rgba(10,13,17,.32), 0 1px 2px rgba(10,13,17,.24); --sombra-3: 0 8px 20px -6px rgba(10,13,17,.46), 0 2px 6px rgba(10,13,17,.30); --sombra-4: 0 22px 48px -14px rgba(10,13,17,.62), 0 4px 12px rgba(10,13,17,.36); --sombra-hundida: inset 0 1px 0 rgba(255,255,255,.04); /* El anillo de foco es AQUA y siempre visible con teclado, incluso sobre oscuro. Es la única cosa aqua que no significa «lo dijo un agente»: significa «aquí está tu teclado», y el diseño lo puso así a propósito para que no compita con el cobalto de la acción. */ --sombra-foco: 0 0 0 3px rgba(23,185,163,.32); /* La elevación propia de los paneles de agente: anillo aqua + halo. Es su único distintivo, y por eso no se le pone a nada más. */ --sombra-agente: 0 0 0 1px rgba(23,185,163,.35), 0 8px 28px -10px rgba(14,147,132,.45); --velo-modal: rgba(10,13,17,.62); --desenfoque-hoja: saturate(180%) blur(18px); /* Movimiento: rápido y seco. Nada rebota, nada gira, nada hace parallax. Un solo movimiento ambiente en todo el sistema —el pulso de «agente pensando»— y vive en `--ritmo-ambiente`. */ --curva: cubic-bezier(.2,.7,.3,1); --dur-control: 140ms; --dur-superficie: 220ms; --ritmo-ambiente: 1.6s; /* ══════════════════════════════════════════════════════════════════ 4. TIPOGRAFÍA Dos familias y una de números. Ni una más: cada familia extra es una petición de red que retrasa la primera pantalla de alguien que está de pie en una caja. ══════════════════════════════════════════════════════════════════ */ /* Clash Display la sirve la casa (arriba). Las demás son el respaldo de los primeros milisegundos y del día que el archivo no llegue. */ --letra-titulo: "Clash Display", "Familjen Grotesk", system-ui, sans-serif; --letra-marca: var(--letra-titulo); --letra-cuerpo: "Manrope", system-ui, -apple-system, sans-serif; /* TODO número va en mono tabular. No es capricho: en una columna de importes, las cifras que no alinean obligan a leer una por una. */ --letra-numero: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace; --tam-display-xl: 56px; --tam-display-l: 42px; --tam-display-m: 32px; --tam-titulo-l: 24px; --tam-titulo-m: 20px; --tam-titulo-s: 17px; --tam-cuerpo-l: 16px; --tam-cuerpo-m: 14px; --tam-cuerpo-s: 13px; --tam-pie: 12px; --tam-micro: 11px; --alto-apretado: 1.06; --alto-corto: 1.22; --alto-normal: 1.5; --alto-suelto: 1.65; --track-display: -.02em; --track-titulo: -.01em; --track-cuerpo: 0; /* Los microrótulos en mayúsculas necesitan aire o se leen como una mancha. */ --track-rotulo: .06em; --track-numero: .02em; /* ══════════════════════════════════════════════════════════════════ 5. ESPACIADO Base 4 con dos pasos finos (2 y 6) para la densidad de las tablas. La densidad es alta a propósito: en servicio se mira de reojo. ══════════════════════════════════════════════════════════════════ */ --e-1: 2px; --e-2: 4px; --e-3: 6px; --e-4: 8px; --e-5: 12px; --e-6: 16px; --e-7: 20px; --e-8: 24px; --e-9: 32px; --e-10: 48px; --relleno-tarjeta: 18px; --canal-seccion: 32px; --margen-pagina: 28px; --alto-control-s: 30px; --alto-control-m: 38px; --alto-control-l: 46px; /* ══════════════════════════════════════════════════════════════════ 6. LA CAPA DE COMPATIBILIDAD ══════════════════════════════════════════════════════════════════ Los nombres viejos, redefinidos sobre la paleta nueva. Existen porque hay 408 usos de `var(--accent-color)` y compañía repartidos por toda la consola, y reescribirlos todos de golpe sería cambiar dos cosas a la vez: la paleta y los nombres. Cuando algo se ve mal después de eso, no hay forma de saber cuál de los dos cambios lo rompió. Así que primero la paleta, con los nombres de siempre. Los nombres se migran después, uno por pantalla, con el barrido verde entre medias. ── Y AQUÍ ES DONDE MUERE EL CRISTAL ────────────────────────────── `--glass-bg` y `--glass-border` estaban en unos 67 sitios. El sistema de diseño prohíbe el efecto cristal en las tarjetas, y la razón es buena: sobre una superficie translúcida el contraste depende de lo que haya DETRÁS, así que la misma tarjeta se lee bien en una pantalla y mal en otra. En la de cocina eso no es un detalle estético. No se borran los 67 usos: se les cambia lo que significan. Siguen existiendo, y ahora devuelven una superficie plana con su filete. ────────────────────────────────────────────────────────────────── */ --bg-color: var(--fondo); --sidebar-bg: var(--acero-900); --card-bg: var(--superficie); --text-primary: var(--tinta); --text-secondary: var(--tinta-tenue); --accent-color: var(--accion); --accent-glow: var(--accion-suave); --border-color: var(--filete); --glass-bg: var(--superficie); --glass-border: var(--filete); --input-bg: var(--acero-950); --input-text: var(--tinta); --input-border: var(--filete-medio); --canvas-bg: var(--fondo-lienzo); /* El degradado «premium» era cobalto → morado. El morado ya no existe en este sistema, y un degradado decorativo tampoco: se queda en el tono de identidad, plano. */ --grad-premium: var(--accion); --grad-surface: none; --badge-bg: var(--superficie-hundida); --badge-border: var(--filete-medio); --badge-active-text: var(--bien-texto); --badge-inactive-text: var(--tinta-tenue); --badge-active-dot: var(--bien); --badge-inactive-dot: var(--acero-500); /* El modo soporte se queda distinguible de todo lo demás. Antes era verde azulado para no confundirse con el azul de marca; ahora ese hueco lo ocupa el aqua de los agentes, así que sube a un cobalto profundo, que no es ni la acción ni el escuadrón. */ --soporte-bg: var(--cobalto-800); --soporte-texto: var(--cobalto-50); --soporte-tenue: rgba(240, 246, 255, .72); --soporte-filete: var(--cobalto-600); --soporte-boton-bg: rgba(255, 255, 255, .16); --soporte-boton-borde: rgba(255, 255, 255, .38); --soporte-raya: rgba(255, 255, 255, .07); } /* ══════════════════════════════════════════════════════════════════════════ EL TEMA CLARO — el de por defecto en la consola. Sólo se redefinen los tokens; ninguna regla de componente vive aquí. Una regla escondida detrás de `[data-theme]` es la forma clásica de que una pantalla acabe con el texto de un tema sobre el fondo del otro. ══════════════════════════════════════════════════════════════════════════ */ [data-theme="light"] { --fondo: var(--acero-50); --fondo-lienzo: var(--acero-25); --superficie: var(--acero-0); --superficie-hundida: var(--acero-100); --superficie-alta: var(--acero-0); --tinta: var(--acero-900); --tinta-cuerpo: var(--acero-700); --tinta-tenue: var(--acero-500); --tinta-fantasma: var(--acero-400); --filete: var(--acero-200); --filete-medio: var(--acero-300); --filete-fuerte: var(--acero-500); /* Sobre claro, el texto de acción vuelve al tono de identidad: ahí sí se lee, y la excepción de arriba deja de hacer falta. */ --accion-texto: var(--accion); --accion-suave: var(--cobalto-50); --agente: var(--aqua-500); --agente-encima: var(--aqua-600); --agente-suave: var(--aqua-50); /* Los estados vuelven a su tono de origen: sobre blanco, el escalón que necesitaban sobre oscuro los deja lavados. */ --bien: var(--verde-500); --bien-suave: var(--verde-100); --bien-texto: var(--verde-700); --ojo: var(--ambar-500); --ojo-suave: var(--ambar-100); --ojo-texto: var(--ambar-700); --mal: var(--rojo-500); --mal-suave: var(--rojo-100); --mal-texto: var(--rojo-700); --sombra-1: 0 1px 2px rgba(10,13,17,.06), 0 1px 1px rgba(10,13,17,.04); --sombra-2: 0 2px 6px rgba(10,13,17,.07), 0 1px 2px rgba(10,13,17,.05); --sombra-3: 0 8px 20px -6px rgba(10,13,17,.12), 0 2px 6px rgba(10,13,17,.06); --sombra-4: 0 22px 48px -14px rgba(10,13,17,.22), 0 4px 12px rgba(10,13,17,.08); --sombra-hundida: inset 0 1px 0 rgba(255,255,255,.6); --velo-modal: rgba(10,13,17,.52); /* Compatibilidad, otra vez: los mismos nombres viejos apuntando al claro. */ --sidebar-bg: var(--acero-0); --input-bg: var(--acero-0); --input-border: var(--filete-medio); --badge-bg: var(--acero-100); --badge-border: var(--filete); --badge-active-text: var(--verde-700); --badge-inactive-text: var(--tinta-tenue); --badge-active-dot: var(--verde-500); --badge-inactive-dot: var(--acero-400); /* ── LA FRANJA DE SOPORTE, TAMBIÉN EN CLARO ─────────────────────────── * * Sin estas cuatro, la franja hereda las del tema oscuro y su texto claro * puede acabar sobre un fondo que no lo sostiene. Y esta franja avisa de * que alguien de la casa está DENTRO de la cuenta de un cliente: es lo * último que puede quedar ilegible. * * Sobre página clara baja un escalón más, para que el blanco de encima se * siga leyendo — que es lo que hacía la versión anterior y tenía razón. */ --soporte-bg: var(--cobalto-900); --soporte-texto: #FFFFFF; --soporte-tenue: rgba(255, 255, 255, .78); --soporte-filete: var(--cobalto-700); --soporte-boton-bg: rgba(255, 255, 255, .2); --soporte-boton-borde: rgba(255, 255, 255, .5); --soporte-raya: rgba(255, 255, 255, .09); } /* Pedir el oscuro a propósito devuelve exactamente `:root`. Se escribe explícito para que `[data-theme="dark"]` no dependa de que nadie añada nunca una regla suelta a `:root`. */ [data-theme="dark"] { --fondo: var(--acero-950); --fondo-lienzo: var(--acero-900); --superficie: var(--acero-900); --superficie-hundida: var(--acero-950); --superficie-alta: var(--acero-800); --tinta: var(--acero-25); --tinta-cuerpo: var(--acero-200); --tinta-tenue: var(--acero-400); --tinta-fantasma: var(--acero-500); --filete: #252B33; --filete-medio: #333B45; --accion-texto: var(--cobalto-400); --accion-suave: rgba(13, 113, 221, .18); --agente: var(--aqua-400); --agente-encima: var(--aqua-300); --agente-suave: rgba(23, 185, 163, .16); --bien: #2BC77E; --bien-suave: rgba(43,199,126,.16); --bien-texto: #6EE7B0; --ojo: #F0B429; --ojo-suave: rgba(240,180,41,.16); --ojo-texto: #FBD26A; --mal: #F0555F; --mal-suave: rgba(240,85,95,.16); --mal-texto: #FF9CA3; --sidebar-bg: var(--acero-900); --input-bg: var(--acero-950); }