/* ========================================================================= Tienda Diexsa · tokens del sistema visual El único archivo del sitio con colores escritos a mano. Todo lo demás —app.css, los .razor.css de los componentes— los toma de aquí con var(), y EstilosTests falla si aparece un color hexadecimal, rgb() o hsl() fuera de este archivo (F6-15). Los valores no se inventan aquí: se copian de la fuente central del sistema de diseño de Diexsa (estandares/diseno/diexsa.tokens.json, en el repositorio de ingeniería). Al lado de cada token va el nombre del central del que sale; un valor nuevo entra primero allá y después se copia aquí. Las sombras y velos que no tienen todavía token central llevan la marca «(local)»: son los que ya usaba la tienda. El primario es el azul oficial de Diexsa, RGB 45, 86, 152 (#2D5698), el del encabezado del ERP (decisión 0016). El logotipo conserva su propio azul: es un archivo de marca, no un token. Contraste (WCAG 2.2 AA, F6-05): ContrasteTests recalcula en cada compilación los pares que se pintan juntos; si un valor deja de cumplir, la prueba lo dice. Los nombres van en español y por su papel, no por su color: --primario y no --azul, para que cambiar el tono no obligue a renombrar. ========================================================================= */ :root { /* Tema claro siempre (decisión 0021): color-scheme lo fija para que los campos, los menús desplegables y las barras de desplazamiento que pinta el navegador también salgan claros aunque el sistema esté en oscuro. */ color-scheme: light; /* ---------- superficies ---------- */ --fondo: #F4F6F8; /* neutro.superficie-suave */ --superficie: #FFFFFF; /* neutro.superficie */ --superficie-2: #EEEFF1; /* neutro.superficie-barra */ /* ---------- texto ---------- */ --tinta: #262C32; /* neutro.tinta: 14.1:1 sobre --superficie */ --tinta-2: #464E58; /* neutro.tinta-suave: 8.4:1 */ --tenue: #636B75; /* neutro.tinta-tenue: 5.4:1; el #78808A de antes daba 4.0:1 */ /* ---------- líneas ---------- */ --linea: #E2E6EC; /* neutro.linea: decorativa, sin contraste mínimo */ --linea-2: #C8CDD4; /* neutro.borde: borde de campos y botones; el foco lo marca --primario */ /* ---------- primario: el azul oficial ---------- */ --primario: #2D5698; /* marca.primario: 7.3:1 con --sobre-primario y sobre --superficie */ --primario-al-pasar: #284D88; /* marca.primario-al-pasar */ --sobre-primario: #FFFFFF; /* marca.sobre-primario */ --primario-suave: #EEF1F7; /* azul.50: --primario encima, 6.4:1 */ --primario-hondo: #1F3C6A; /* azul.800 */ --cian: #81DFF4; /* marca.cian: sólo decorativo, el degradado de la barra de progreso */ /* ---------- estados ---------- */ --exito: #288252; /* estado.exito.solido */ --exito-suave: #E2F2E9; /* estado.exito.fondo */ --exito-tinta: #1D6A42; /* estado.exito.tinta: 5.7:1 sobre su fondo */ --alerta: #C43D3D; /* estado.error.solido */ --alerta-suave: #FAE8E5; /* estado.error.fondo */ --alerta-tinta: #9B3428; /* estado.error.tinta: 6.1:1 sobre su fondo y 7.2:1 sobre blanco */ --aviso: #855F12; /* estado.aviso.solido */ --aviso-suave: #FAF0DB; /* estado.aviso.fondo */ --aviso-tinta: #855F12; /* estado.aviso.tinta: 5.1:1 sobre su fondo */ /* ---------- sombras y velos ---------- */ --sombra: 0 1px 2px rgba(38, 44, 50, .06), 0 4px 14px rgba(38, 44, 50, .06); /* elevacion.tarjeta */ --sombra-barra: 0 -2px 12px rgba(38, 44, 50, .08); /* (local) barra fija del móvil */ --sombra-aviso: 0 -1px 6px rgba(38, 44, 50, .2); /* (local) barra de error de Blazor */ --sombra-dialogo: 0 3px 6px 2px rgba(38, 44, 50, .3); /* (local) aviso de reconexión */ --velo: rgba(38, 44, 50, .4); /* (local) detrás del aviso de reconexión */ --toque: rgba(45, 86, 152, .12); /* (local) destello al tocar en iOS, del primario */ /* ---------- letra ---------- */ --letra-titulos: "Archivo", "Segoe UI", system-ui, sans-serif; /* tipografia.familia.web-titulos */ --letra-texto: "Source Sans 3", "Segoe UI", system-ui, sans-serif; /* tipografia.familia.web-texto */ --letra-mono: "JetBrains Mono", Consolas, monospace; /* tipografia.familia.mono */ /* ---------- tamaños de letra (F6-23) ---------- Los del central (tipografia.tamano-web) y, marcados «(local)», los que la tienda usa y el central todavía no tiene: los chicos de etiquetas y notas, y las cifras de los precios. Quedan como propuesta para el central; al entrar allá, el comentario pasa a decir su nombre de token. */ --letra-base: 16px; /* tipografia.tamano-web.base */ --letra-h3: 18px; /* tipografia.tamano-web.h3 */ --letra-h2-min: 20px; /* tipografia.tamano-web.h2-min */ --letra-h2-max: 26px; /* tipografia.tamano-web.h2-max */ --letra-h1-min: 26px; /* tipografia.tamano-web.h1-min */ --letra-h1-max: 38px; /* tipografia.tamano-web.h1-max */ --letra-mini: 12px; /* (local) contador del carrito, clave, etiquetas */ --letra-nota: 13px; /* (local) notas, errores de campo, antetítulos */ --letra-chica: 14px; /* (local) rótulos de campo, migas, pie, texto secundario */ --letra-compacta: 15px; /* (local) menú, nombre en la tarjeta, tablas */ --letra-realce: 17px; /* (local) botón grande, entrada de página, preguntas */ --letra-subtitulo: 19px; /* (local) títulos de tarjeta de contacto; mínimo del h2 en el teléfono */ --letra-cifra: 22px; /* (local) precios y la marca */ --letra-h2-movil-max: 24px; /* (local) máximo del h2 en el teléfono */ --letra-cifra-grande-movil: 30px; /* (local) precio de la ficha en el teléfono */ --letra-cifra-grande: 34px; /* (local) precio de la ficha */ /* ---------- espacios (espacio.*: múltiplos de 4) ---------- */ --espacio-1: 4px; --espacio-2: 8px; --espacio-3: 12px; --espacio-4: 16px; --espacio-6: 24px; --espacio-8: 32px; /* ---------- radios ---------- */ --radio-chico: 4px; /* radio.chico */ --radio: 8px; /* radio.mediano */ /* ---------- tamaños ---------- */ --objetivo-tactil: 48px; /* tamano.objetivo-tactil: alto mínimo de lo que se toca en el teléfono */ --alto-cabecera: 132px; /* (local) alto de la cabecera fija, para el resumen pegajoso */ }