/* ===================================================================== IncaFact — Tokens de diseño --------------------------------------------------------------------- Fuente única de la identidad visual. Antes de este fichero la paleta vivía en el `:root` de `login.css`, que sólo carga la pantalla de login: las 29 pantallas de trabajo no tenían de dónde leerla y usaban los colores de fábrica de SB Admin 2. DOS CAPAS, Y LA REGLA QUE LAS SEPARA ------------------------------------ 1. PALETA CRUDA (--paleta-*): los colores por lo que son. Sólo se consume desde este fichero, para definir roles. 2. ROLES (--color-*, --fuente-*, --radio-*): los tokens por la función que cumplen. Es lo único que deben usar las hojas de estilo. La razón de la separación es el tema oscuro. Un token llamado `--azul` no puede cambiar de valor sin volverse mentira; uno llamado `--color-superficie` sí. Cuando llegue el tema oscuro se redefinen los roles, nunca la paleta. CONTRASTE — MEDIDO, NO ESTIMADO ------------------------------- Contra blanco, con la fórmula de WCAG: #13323d 13.54:1 AAA #0E4D6E 9.11:1 AAA #16704F 6.06:1 AA #5b7480 4.94:1 AA (justo) #0F9E8C 3.34:1 sólo texto grande y componentes #17A8DE 2.73:1 NO PASA para texto #dfe7ea 1.25:1 sólo separadores Por eso el azul de marca se expone como `--color-acento-decorativo`: el nombre declara su límite, para que la regla se lea al escribirla en vez de haber que recordarla. No se retoca el color — aparece en el logotipo, y oscurecerlo para arreglar un mal uso lo rompería en todos los buenos. ===================================================================== */ :root { /* ---- Capa 1: paleta cruda ------------------------------------- */ /* Tomada de los cordones del logotipo. Ver la tesis de diseño en la cabecera de login.css. */ --paleta-azul: #17A8DE; --paleta-navy: #0E4D6E; --paleta-verde: #16704F; --paleta-esmeralda: #0F9E8C; --paleta-tinta: #13323d; --paleta-tinta-suave: #5b7480; --paleta-linea: #dfe7ea; --paleta-papel: #ffffff; /* Estados. Son los de Bootstrap, que es lo que el producto ya usa; se declaran aquí para que dejen de aparecer sueltos por el CSS. */ --paleta-exito: #28a745; --paleta-peligro: #dc3545; --paleta-aviso: #ffc107; /* ---- Capa 2: roles -------------------------------------------- */ /* Superficies */ --color-superficie: var(--paleta-papel); --color-superficie-hueco: #eef3f4; /* fondo de página del login */ /* Texto. Todos los roles de texto se sirven de valores que pasan AA. */ --color-texto: var(--paleta-tinta); --color-texto-tenue: var(--paleta-tinta-suave); --color-enlace: var(--paleta-navy); /* Líneas y separadores. No apto para texto (1.25:1), y no hace falta: un borde no transmite información por sí solo. */ --color-borde: var(--paleta-linea); /* Acentos. --color-acento es el de acción: botones, anillo de foco, marcas de validación. Mide 3.34:1, suficiente para componentes de interfaz. --color-acento-decorativo NO SIRVE PARA TEXTO (2.73:1) ni como único indicador de estado. Es para gradientes, ilustración y la firma del quipu. Si necesitas que se lea, no es este token. */ --color-acento: var(--paleta-esmeralda); --color-acento-fuerte: var(--paleta-verde); --color-acento-decorativo: var(--paleta-azul); /* Superficie de acción: el fondo de un botón que lleva texto blanco. Es una variante oscurecida del azul de marca, del MISMO matiz, y existe por una razón medida: `btn-info` usaba `--paleta-azul` (#17A8DE) con texto blanco, que da 2.73:1 — la causa de 41 de los fallos de contraste de la auditoría, repartidos por las 29 pantallas. #117fa8 es el primer tono del mismo matiz que alcanza 4.5:1, así que conserva el color de marca reconocible y además se puede leer. */ --paleta-azul-accion: #117fa8; /* 4.54:1 con blanco */ --color-accion: var(--paleta-azul-accion); --color-sobre-accion: var(--paleta-papel); /* Estados */ --color-exito: var(--paleta-exito); --color-peligro: var(--paleta-peligro); --color-aviso: var(--paleta-aviso); /* Texto secundario con contraste suficiente EN AMBOS TEMAS. No basta un solo valor: se midio que #6f7399 da 4.58:1 sobre blanco pero solo 3.35:1 sobre la superficie oscura, y que el --c-text-muted heredado (#858796) da 3.56:1 en claro, o sea tampoco pasa. La variante oscura vive en comunes.css, junto al resto del tema, para no meter la primera regla .dark-mode en este fichero: el login lo carga y recibe la clase sin cargar el resto del tema (ver tarea 4.8). */ --color-texto-secundario: #6f7399; /* 4.58:1 sobre blanco */ /* Forma */ --radio-tarjeta: 16px; --sombra-flotante: 0 24px 60px -24px rgba(14, 77, 110, .35); --anillo-foco: 0 0 0 3px rgba(15, 158, 140, .28); /* Tipografía */ --fuente-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif; --fuente-texto: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; /* ================================================================= LA SEGUNDA PALETA — y por qué está aquí ----------------------------------------------------------------- El producto tiene DOS sistemas de color conviviendo, no dos tonos del mismo. Medido: 186 colores únicos en el CSS compartido, y los dominantes son los de fábrica de SB Admin 2 (#858796 ×50, #4e73df ×41, #e74a3b ×34, #1cc88a ×31), que no tienen relación con la paleta quipu de arriba. Esos valores alimentan los tokens `--c-*` de comunes.css, que son los que mueven el tema claro/oscuro de las 29 pantallas. Se declaran aquí para que TODO color crudo del CSS compartido esté en un único fichero, aunque provengan de dos identidades distintas. Tenerlas una debajo de otra es justamente lo que hace pensable la reconciliación: hoy son dos columnas comparables en vez de valores dispersos por 955 líneas. Unificarlas es trabajo de la fase 2 y una DECISIÓN DE DISEÑO, no un renombrado — por eso aquí sólo se declaran, no se tocan. ================================================================= */ /* Tema claro heredado de SB Admin 2 */ --paleta-sb-fondo: #f8f9fc; --paleta-sb-superficie: #ffffff; --paleta-sb-texto: #5a5c69; --paleta-sb-texto-fuerte: #3a3b45; --paleta-sb-texto-tenue: #858796; --paleta-sb-borde: #e3e6f0; --paleta-sb-borde-campo: #d1d3e2; --paleta-sb-enlace: #4e73df; --paleta-sb-enlace-hover: #224abe; --paleta-sb-sombra: rgba(58, 59, 69, 0.15); /* Tema oscuro. A diferencia del claro, este SÍ es de marca: teal andino y esmeralda, coherente con el quipu del login. Ya existía en comunes.css antes de este fichero. */ --paleta-noche-fondo: #0c1a1d; --paleta-noche-superficie: #13282c; --paleta-noche-superficie-2: #0f2225; --paleta-noche-texto: #cfe6e1; --paleta-noche-texto-fuerte: #f3fbf9; --paleta-noche-texto-tenue: #7e9a95; --paleta-noche-borde: #22423f; --paleta-noche-campo: #10262a; --paleta-noche-borde-campo: #2b4d4a; --paleta-noche-enlace: #35d1b9; --paleta-noche-enlace-hover: #63e2cd; --paleta-noche-sombra: rgba(0, 0, 0, 0.5); }