/* ============================================================================= silo-tokens.css · La paleta de Silitech, y nada mas ----------------------------------------------------------------------------- Vive aparte de silo.css a proposito. Este es el UNICO archivo del proyecto donde un color se escribe como literal; en todos los demas se consume con var(). Cuando los dos estaban en el mismo archivo no habia forma de sostener esa regla —ni de que una herramienta la revisara— porque la definicion y el uso se veian igual. Se carga ANTES que silo.css. Ver templates/layouts/base.html. ----------------------------------------------------------------------------- Identidad SILO 2026 — "deep space azul", profundidad por LUZ no por borde ----------------------------------------------------------------------------- El cliente entrego cinco referencias (tablero de paleta, degradado con grano, pagina navy restringida, rectangulo con glow de borde, rejilla de fichas con glow interno) y la paleta ya medida en hex. No se recalcula aqui: se usa tal cual llego. La ley que sale de esa medicion, y que gobierna TODO lo de abajo: Azules CLAROS (#00A4FF, #00E7FF) = TINTA. Texto, lineas, iconos, bordes que identifican un control, el punto de un badge. NUNCA relleno con texto blanco encima (blanco sobre #00A4FF da 2.71:1 — falla AA). Azules PROFUNDOS (#000675, #04044A) = RELLENO. Boton primario, superficie solida con texto encima. Ese texto es blanco (16.37:1 / 18.73:1). Esta identidad es NATIVAMENTE OSCURA. No hizo falta proponer que el sistema pasara a oscuro-primario: ya lo era (static/js/shadcn/theme-toggle.js elige 'dark' cuando no hay preferencia guardada). Lo que cambia aca es SOLO el bloque .dark de este archivo — el tema claro no se toca: sigue siendo el azul corporativo ya medido y en verde en las pruebas existentes. Ver la nota larga en docs/identidad-silo.md sobre esta decision. ============================================================================= */ :root { /* ---- Primitivas SILO: la paleta que entrego el cliente, sin tocar ---- Viven en :root (no dentro de .dark) porque son constantes crudas, no una eleccion de tema — el tema decide COMO se usan, no cual es el numero. */ --silo-royal: #000675; /* Dark Royal Blue — RELLENO. Contra blanco: 16.37:1 */ --silo-navy: #04044A; /* Navy — RELLENO (mas profundo). Contra blanco: 18.73:1 */ --silo-sky: #00A4FF; /* Sky Blue — TINTA. Contra #03030F: 7.57:1 */ --silo-neon: #00E7FF; /* Neon Blue — TINTA (enfasis maximo). Contra #03030F: 13.55:1 */ --silo-white: #FFFFFF; /* White — el texto que va SIEMPRE encima de un relleno profundo */ --silo-void: #03030F; /* El fondo contra el que el cliente midio los cuatro ratios de arriba */ /* ---- Marca Silitech: azul corporativo sobre negro (TEMA CLARO) ---- Sin cambios: ya esta medido AA y no forma parte de esta identidad, que es nativamente oscura. Rampa: #0B0F17 (negro azulado) -> #12305C -> #1A4E96 (primario) -> #2E7BD6 (acento). Todo lo demas sale de estas cuatro paradas. */ --brand: #1A4E96; --brand-h: #123A72; --brand-txt: #143E7A; --brand-sub: #EBF1F9; --brand-sub-bd: #C6D8EE; --brand-solid: #1A4E96; --teal: #2E7BD6; /* acento: el DS lo llama "teal", aqui es azul claro */ /* ---- Colores de las marcas de terceros (WhatsApp, Instagram, Facebook) ---- Sobre fondo claro se usa la parada oscura de cada paleta oficial: el verde #25D366 de WhatsApp sobre blanco da 1.9:1 y no se lee. */ --wa: #128C7E; --ig: #C13584; --fb: #1877F2; --grad: linear-gradient(135deg, #0B0F17 0%, #123A72 55%, #2E7BD6 100%); --grad-btn: linear-gradient(100deg, #10192B 0%, #1A4E96 58%, #2E7BD6 100%); --primary-grad: linear-gradient(180deg, #22599F, #1A4E96); --primary-sh: rgba(26, 78, 150, .55); --acc-glow: rgba(26, 78, 150, .32); --ring: rgba(26, 78, 150, .32); --bd-acc: rgba(26, 78, 150, .4); --primary: #1A4E96; --chart-1: #1A4E96; --chart-2: #2E7BD6; --chart-3: #0E1D33; --chart-4: #5FA3E8; /* ---- Texto ENCIMA de un relleno semantico ---- No es un lujo del contrato: el valor dentro de una barra pintada con var(--brand) no puede ser "#fff" fijo, porque en oscuro --brand se aclara a #4E90E4 y el blanco cae a 2.9:1 (el minimo AA es 4.5). Cada relleno lleva su color de texto y los dos cambian juntos. */ --on-brand: #FFFFFF; --on-success: #FFFFFF; --on-warn: #FFFFFF; --on-danger: #FFFFFF; /* ---- Componentes que hoy solo existen en oscuro pero necesitan un valor aqui tambien: un token que solo vive dentro de .dark es texto invisible en claro esperando su turno (regla 6 de docs/identidad-silo.md). Con esto .pick.on se ve EXACTAMENTE igual que antes en tema claro: mismo valor. */ --glow-activo: 0 0 0 1px var(--brand); /* ---- Dos correcciones de contraste HEREDADAS del DS base ----------------- No son de la capa de marca de Silitech: vienen de shadcn/theme.css y por eso sobrevivieron a las revisiones anteriores, que miraban la paleta azul y no los neutros. Se corrigen aqui —la capa de marca carga despues— y no alla, porque oasys.css es compartido con los otros ocho productos y cambiarlo desde este repo los mueve a todos sin que nadie lo pida. --bd-2 es el borde que IDENTIFICA un control (campo, chip, boton secundario). WCAG 1.4.11 pide 3:1 para eso. El del DS base daba 1.40:1 contra la tarjeta blanca: un campo de texto cuyo borde practicamente no existe. Este da 3.13:1. --bar-2 es la barra de un mes sin destacar en el tablero del dueno. El del DS base daba 1.20:1, o sea que en tema claro pasaba lo mismo que en oscuro —cinco de seis barras invisibles— y la comparacion mensual tampoco se podia hacer. Este da 3.13:1. */ --bd-2: #8592AC; --bar-2: #8592AC; /* ---- Panel de marca del login ------------------------------------------- No sigue al toggle claro/oscuro -- es una franja de marca fija, igual que el sidebar es negro en los dos temas (ver .app-side en silo.css). Por eso vive una sola vez aca y no se repite dentro de .dark. Estructura: halo radial detras del logotipo + degradado lineal de fondo + vineta que cierra los bordes. Recolores a la identidad 2026 en templates/cuentas/ login.html. */ --login-marca-bg: var(--silo-void); --login-marca-grad: radial-gradient(68% 52% at 50% 48%, rgba(0, 231, 255, .40) 0%, rgba(0, 6, 117, .35) 46%, transparent 72%), linear-gradient(178deg, var(--silo-void) 0%, var(--silo-navy) 52%, var(--silo-royal) 100%); --login-marca-vineta: radial-gradient(100% 100% at 50% 50%, transparent 52%, rgba(0, 0, 0, .38) 100%); } /* En oscuro los neutros dejan de ser calidos (marron) y pasan a negro azulado, para que el azul de marca no compita con un fondo de otra temperatura. Esta identidad reescribe la rampa completa con la paleta "deep space" del cliente. La separacion de superficie YA NO la hace el color: #04044A sobre #03030F da 1.10:1, o sea las tarjetas no se despegan del fondo por tono (es la advertencia central del brief). La separacion la hace el BORDE CON GLOW -- --sh-sm/--sh-md/--sh-lg de aqui abajo dejan de ser sombras negras planas y pasan a ser un hairline de tinta + un halo suave -- y como casi todo componente del sistema ya pinta su superficie con box-shadow: var(--sh-*), el glow de borde llega a cada tarjeta, KPI, fila de lista y modal sin tocar silo.css componente por componente. */ .dark { /* ---- Superficies ------------------------------------------------------- CORREGIDO. La rampa anterior estaba tan cerrada que no separaba nada: medido, --card (#0A0B2A) contra --bg (#05061C) daba 1.04:1. Es decir, la tarjeta y el fondo eran el mismo color para cualquier ojo, y la pantalla entera se leia como una plancha plana sin jerarquia. El brief pedia "profundidad por luz, no por borde" y eso se leyo como "las superficies no se distinguen"; lo que pedia era que el borde con glow HICIERA el trabajo, no que el tono dejara de hacerlo. Las dos cosas suman. La rampa nueva mantiene el deep space —sigue siendo casi negra— pero cada escalon existe de verdad. Medido contra el de abajo: --bg #03030F el void que midio el cliente. La pagina ES ese color ahora, no un tono aparte: asi los cuatro ratios que entrego el cliente valen tal cual, sin recalcular. --panel #0C0E28 1.08:1 sobre --bg --card #141838 1.19:1 sobre --bg (antes 1.04:1) --card-2 #1A1F44 --hover #1F2450 1.17:1 sobre --card (antes el hover casi no se veia) En superficies casi negras el ratio se comprime —1.19:1 aqui se percibe mucho mas que 1.19:1 en tonos medios— asi que este es el escalon util maximo sin salirse del deep space. */ --bg-deep: var(--silo-void); /* #03030F, el fondo que el cliente midio */ --bg: var(--silo-void); --panel: #0C0E28; --card: #141838; --card-2: #1A1F44; --hover: #1F2450; /* La pista de una barra comparativa NO es decoracion: es la referencia contra la que se lee la barra llena, y sin ella no hay comparacion. La anterior daba 1.04:1 contra --card, o sea que en el tablero del dueno cinco de las seis barras mensuales eran literalmente invisibles y la grafica —cuyo unico motivo es comparar— no se podia usar. Esta da 3.12:1, por encima del 3:1 que pide WCAG 1.4.11 para un elemento grafico. */ --bar-2: #5A6699; /* ---- Bordes ------------------------------------------------------------- --bd es decorativo (divisorias, cabeceras de tarjeta): NO le aplica el minimo 3:1 de WCAG 1.4.11 porque no es lo unico que identifica un control, asi que se deja casi invisible, tinta al 12%, tal como piden las referencias 3 y 4 ("borde casi invisible + glow" en vez de "borde visible"). --bd-2 SI identifica un control (input, boton secundario, chip, icon-btn) y por eso es Sky Blue solido: 7.57:1 contra #03030F, muy por encima del minimo. --bd-acc es el mismo caso para el hover de una tarjeta clicable (.stat/.qa/.mod). */ --bd: rgba(0, 164, 255, .12); /* --bd-2 DEJA DE SER Sky Blue solido, y el motivo no es de contraste. Cumplia de sobra (7.09:1 contra --card) y por eso paso la revision anterior: se midio el ratio y se dio por bueno. Lo que no se miro es que --bd-2 es el borde de TODO control —cada chip de pais, cada campo, cada icon-btn, cada boton secundario— y pintarlos todos de cian saturado convierte la pantalla en un tablero de neon. Con seis chips de mercado en fila arriba del tablero, el ojo no encuentra donde esta la accion: todo grita igual. La regla 3 de la identidad ("un solo acento, con cuentagotas; un acento que aparece en quince lugares deja de senalar") se estaba rompiendo con el token que mas se repite del sistema. Este azul-gris neutro da 3.93:1 contra --card: sigue por encima del 3:1 de WCAG 1.4.11, el control se sigue identificando, y el cian queda libre para lo que si tiene que llamar la atencion. */ --bd-2: #6C77A0; /* 3.93:1 contra --card */ /* El hover de una tarjeta clicable SI se queda en Sky Blue: es momentaneo, aparece en un elemento a la vez y es justamente la senal de "este". */ --bd-acc: var(--silo-sky); /* ---- Texto --------------------------------------------------------------- Medido contra --card (#0A0B2A, L=0.00405 aprox — la superficie MAS clara de la rampa de arriba salvo --hover; contra cualquier otra superficie el contraste es igual o mayor porque todas son mas oscuras): --tx #F3F6FF 17.99:1 --tx2 #A9B4D6 9.43:1 --tx3 #7784A8 5.23:1 (aun asi, "solo para texto no esencial": es el que menos margen tiene, 4.82:1 contra --hover, la superficie mas clara de todas — sigue pasando AA pero sin sobra). */ --tx: #F3F6FF; --tx2: #A9B4D6; /* --tx3 se aclaro junto con la rampa de superficies, y ese es el punto: el valor anterior (#7784A8) pasaba AA por poco —4.82:1 contra el --hover de entonces— y al subir --hover a #1F2450 se caia a 3.96:1, debajo del 4.5:1 que pide AA. Un cambio de fondo que tira un token de texto es exactamente el defecto que sobrevive a una revision, porque el token no se toco y nadie vuelve a medirlo. Medido con la rampa nueva: contra --hover #1F2450 4.76:1 contra --card #141838 5.57:1 contra --bg #03030F 6.63:1 */ --tx3: #8592B6; /* ---- Tinta de marca (texto, iconos, lineas, bordes que identifican) ---- Sky Blue. 7.57:1 contra --bg-deep, 7.17:1 contra --card. NUNCA se usa como fondo de un boton con texto encima -- ver los rellenos mas abajo. */ --brand: var(--silo-sky); /* ---- Relleno de marca (boton primario, chip/estado "on" solido) -------- Dark Royal Blue de base, Navy al hover -- se OSCURECE al pasar el mouse, no se aclara (es la misma filosofia que ya tenia .btn-brand: "el boton se oscurece, no se despega"). Blanco encima en los dos casos: #000675 + blanco 16.37:1 #04044A + blanco 18.73:1 Los dos superan por lejos el minimo 4.5:1. */ --brand-solid: var(--silo-royal); --brand-h: var(--silo-navy); --primary: var(--silo-royal); /* ---- Tinta sobre una superficie tenida (pastillas, item activo del menu) --brand-sub es Dark Royal Blue al 18% sobre --bg-deep (queda un navy casi negro, L=0.00205) y --brand-txt es Sky Blue encima: 7.45:1, con sobra. --brand-sub-bd es el hairline de esa pastilla, tinta al 35%. */ --brand-sub: rgba(0, 6, 117, .18); --brand-sub-bd: rgba(0, 164, 255, .35); --brand-txt: var(--silo-sky); --teal: var(--silo-neon); /* acento fuerte: reservado para el estado "activo" */ /* Sobre negro si entran las paradas claras de cada marca (sin cambios: no son parte de esta identidad). */ --wa: #25D366; --ig: #E4405F; --fb: #4E8CFF; /* ---- Degradados: SOLO en superficies sin texto encima ------------------- --grad-btn sigue llevando texto (avatar, iniciales, logotipo de la barra lateral) asi que se queda en los DOS tonos de relleno -- blanco encima sigue dando >16:1 en cualquier punto del degradado. --grad es el degradado de tres paradas de la referencia 1 (cian abajo- izquierda -> navy al centro -> azul cielo a la derecha): se usa SOLO en barras de progreso y franjas decorativas que no llevan texto adentro. */ --grad-btn: linear-gradient(135deg, var(--silo-navy) 0%, var(--silo-royal) 100%); --grad: linear-gradient(120deg, var(--silo-neon) 0%, var(--silo-navy) 52%, var(--silo-sky) 100%); --primary-grad: var(--grad-btn); --primary-sh: rgba(0, 6, 117, .5); --acc-glow: rgba(0, 164, 255, .35); --ring: rgba(0, 164, 255, .35); /* ---- La superficie "activa" (referencia 5: una sola ficha con borde cian brillante = "esta es la activa"). En claro es el valor de siempre (ver :root); solo en oscuro se vuelve el anillo neon + halo. El borde en si (1.5px solido) da 13.55:1 contra --bg-deep -- muy por encima del minimo de un indicador de seleccion. */ --glow-activo: 0 0 0 1.5px var(--silo-neon), 0 0 0 5px rgba(0, 231, 255, .18), 0 12px 28px -10px rgba(0, 231, 255, .35); /* ---- Sombras = el glow de borde (referencias 3, 4 y 5) ------------------ Dejan de ser sombra negra plana. Cada una es un hairline de tinta (el "borde" que separa la tarjeta del fondo, ya que el color no alcanza) mas un halo suave hacia abajo. box-shadow con blur moderado lo resuelve el compositor sin costo de layout ni de pintado por pixel como un filter: blur() -- por eso el brief lo pide asi y no con un blur de CSS. */ --sh-sm: 0 0 0 1px rgba(0, 164, 255, .14), 0 8px 24px -10px rgba(0, 10, 90, .65); --sh-md: 0 0 0 1px rgba(0, 164, 255, .18), 0 18px 44px -14px rgba(0, 10, 90, .7); --sh-lg: 0 0 0 1px rgba(0, 231, 255, .22), 0 34px 74px -20px rgba(0, 6, 60, .75); --glass: rgba(4, 4, 20, .68); --glass-bd: rgba(0, 164, 255, .12); /* ---- Grano sutil (referencia 2) ------------------------------------------ feTurbulence dentro de un SVG de 90x90 en linea, no un PNG: el mosaico lo resuelve el navegador repitiendolo, y la unica capa que se pinta es un background-image chico -- nada de filter: blur() sobre el viewport. La alfa de salida queda acotada al 5% (feColorMatrix, fila A: "0 0 0 .05 0") asi que es grano, no ruido: se nota de cerca y no compite con el texto. Se aplica en `body` (ver silo.css), asi que cubre login y error.html tambien sin que ellos tengan que declarar nada. */ --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0.643 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); /* ---- Graficas: chart-1/2 son la paleta medida; chart-3/4 son variantes DERIVADAS solo para poder distinguir cuatro series en una torta o un apilado (ninguna de las dos lleva texto encima, asi que no necesitan ratio propio). No forman parte de los cinco tonos que entrego el cliente. */ --chart-1: var(--silo-sky); --chart-2: var(--silo-neon); --chart-3: #5B8DEF; /* derivado: azul royal medio, visible sobre --card */ --chart-4: #B8E4FF; /* derivado: azul cielo palido, visible sobre --card */ /* --on-brand cambia de filosofia respecto del resto: ok/warn/dg siguen la convencion vieja de OASYS (relleno CLARO en oscuro, texto oscuro encima) porque no son parte de esta identidad y no se tocaron. --on-brand es blanco porque el relleno de marca ahora es --silo-royal/--silo-navy (profundo en los dos temas, no solo en claro) -- ver --brand-solid mas arriba. Dejarlo en el negro azulado de antes pondria texto oscuro sobre un fondo oscuro. */ --on-brand: #FFFFFF; --on-success: #062015; --on-warn: #241703; --on-danger: #2A0906; }