/* * ceij-tokens.css — única fuente de verdad del sistema visual CEIJ. * * Sustituye a los --ceij-* que estaban duplicados y con nombres divergentes en * cuatro hojas distintas (--ceij-azul vs --ceij-azul-oscuro, --ceij-titulo vs * --ceij-azul-titulo), y a los 57 colores y 57 tamaños de letra sueltos que la * auditoría encontró en el Figma. * * Cada color lleva anotado su contraste real, calculado con la fórmula de * luminancia de WCAG 2.2. Así el criterio 1.4.3 se cumple en el token y no hay * que volver a comprobarlo pantalla a pantalla. * * Regla: ningún color literal fuera de este archivo. */ :root { /* --------------------------------------------------------------- COLOR — azules institucionales --------------------------------------------------------------- */ /* Azul del Poder Judicial. Texto y fondos de marca. 12,61:1 s/blanco */ --ceij-c-marca: #003366; /* Variante para estados hover sobre fondo de marca. 15,17:1 s/blanco */ --ceij-c-marca-oscuro: #00264D; /* Titulares. 15,54:1 s/blanco */ --ceij-c-titulo: #0A2540; /* --------------------------------------------------------------- COLOR — texto --------------------------------------------------------------- */ /* Cuerpo de texto. 10,35:1 s/blanco */ --ceij-c-texto: #334155; /* Texto secundario: pies, metadatos. 7,58:1 s/blanco */ --ceij-c-texto-suave: #475569; /* Lo más claro admisible para texto normal. 5,70:1 s/blanco */ --ceij-c-texto-tenue: #5B6875; /* Texto sobre fondos de marca. 12,61:1 s/marca */ --ceij-c-texto-inverso: #FFFFFF; /* El #9CA3AF que usaba el Figma para marcadores de posición daba 2,54:1 y el #6E8089 del cuerpo daba 4,11:1: ambos por debajo del mínimo de 4,5. --ceij-c-texto-tenue es el reemplazo válido para los dos. */ /* --------------------------------------------------------------- COLOR — acento ámbar --------------------------------------------------------------- */ /* Ámbar COMO FONDO, siempre con --ceij-c-marca encima. 5,02:1 el par */ --ceij-c-acento-fondo: #D59829; /* El mismo par, en estado hover. */ --ceij-c-acento-hover: #EDA92E; /* Ámbar COMO TEXTO o icono sobre blanco. 3,59:1 s/blanco Solo para texto grande (≥24px, o ≥18,66px en negrita), iconos y bordes. */ --ceij-c-acento-texto: #B77B06; /* El ámbar de marca #D59829 da 2,51:1 sobre blanco: no sirve como texto. Por eso el sistema lo separa en dos tokens — fondo y texto — en vez de dejar que se use indistintamente, que es de donde salían los fallos. */ /* --------------------------------------------------------------- COLOR — superficies y bordes --------------------------------------------------------------- */ --ceij-c-superficie: #FFFFFF; --ceij-c-superficie-alt: #F1F5F9; --ceij-c-superficie-gris:#E5E5E5; /* fondo de listados heredado */ --ceij-c-borde: #CBD5E1; --ceij-c-borde-fuerte: #94A3B8; /* --------------------------------------------------------------- COLOR — estado. Nunca el único indicador: siempre con texto o icono. --------------------------------------------------------------- */ --ceij-c-exito: #15654A; /* 7,02:1 s/blanco */ --ceij-c-aviso: #8A5200; /* 6,39:1 s/blanco */ --ceij-c-error: #A4231C; /* 7,41:1 s/blanco */ --ceij-c-foco: #0A3B82; /* 10,71:1 s/blanco */ /* --------------------------------------------------------------- TIPOGRAFÍA El Figma traía 57 tamaños, muchos con decimales por escalado manual (13,6px · 14,1px · 15,2px · 16,8px). Aquí quedan ocho pasos, con clamp() para que la interpolación entre 402px y 1920px la haga el navegador y no haga falta un tamaño distinto por punto de ruptura. --------------------------------------------------------------- */ --ceij-f-titulo: 'Montserrat', 'Segoe UI', system-ui, -apple-system, sans-serif; --ceij-f-texto: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; --ceij-fs-300: 0.875rem; /* 14px — mínimo */ --ceij-fs-400: 1rem; /* 16px — cuerpo */ --ceij-fs-500: 1.125rem; /* 18px */ --ceij-fs-600: clamp(1.25rem, 0.95rem + 0.75vw, 1.5rem); /* 20 → 24 */ --ceij-fs-700: clamp(1.5rem, 1.05rem + 1.1vw, 2rem); /* 24 → 32 */ --ceij-fs-800: clamp(1.875rem, 1.2rem + 1.7vw, 2.75rem); /* 30 → 44 */ --ceij-fs-900: clamp(2.25rem, 1.2rem + 2.6vw, 4rem); /* 36 → 64 */ /* 12px es el suelo absoluto y solo para metadatos. La auditoría encontró 660 textos por debajo, 401 de ellos a 10px o menos. */ --ceij-fs-meta: 0.75rem; /* 12px */ --ceij-fw-normal: 400; --ceij-fw-medio: 500; --ceij-fw-fuerte: 600; --ceij-fw-negrita: 700; --ceij-lh-apretado: 1.2; /* titulares */ --ceij-lh-normal: 1.6; /* cuerpo */ --ceij-lh-suelto: 1.75; /* texto largo */ /* --------------------------------------------------------------- ESPACIO — escala de 4px --------------------------------------------------------------- */ --ceij-e-1: 0.25rem; /* 4px */ --ceij-e-2: 0.5rem; /* 8px */ --ceij-e-3: 0.75rem; /* 12px */ --ceij-e-4: 1rem; /* 16px */ --ceij-e-5: 1.5rem; /* 24px */ --ceij-e-6: 2rem; /* 32px */ --ceij-e-7: 3rem; /* 48px */ --ceij-e-8: 4rem; /* 64px */ /* --------------------------------------------------------------- FORMA --------------------------------------------------------------- */ --ceij-r-chico: 4px; --ceij-r-medio: 8px; --ceij-r-grande: 25px; /* tarjetas, como el listado actual */ --ceij-r-pildora: 90px; /* botones */ --ceij-sombra: 0 1px 2px rgba(10,37,64,.06), 0 8px 24px -16px rgba(10,37,64,.22); --ceij-sombra-alta: 0 2px 6px rgba(10,37,64,.10), 0 16px 40px -20px rgba(10,37,64,.30); /* --------------------------------------------------------------- ACCESIBILIDAD --------------------------------------------------------------- */ /* Área mínima de un objetivo táctil. WCAG 2.5.8 exige 24px; 44px es la recomendación de uso cómodo y lo que adopta este sistema. La auditoría encontró 40 elementos por debajo de 24px en la versión móvil. */ --ceij-tactil-min: 44px; /* Indicador de foco. El Figma define 151 variantes :hover y ninguna :focus, así que el foco es una decisión del sistema, no de cada componente. */ --ceij-foco-grosor: 3px; --ceij-foco-sep: 2px; } /* --------------------------------------------------------------------- Alias de compatibilidad — @deprecated Los nombres que usan hoy las siete hojas ceij-*.css. Se mantienen para no tener que reescribirlas todas de golpe; se eliminan en la Fase 8. --------------------------------------------------------------------- */ :root { --ceij-azul: var(--ceij-c-marca); /* @deprecated */ --ceij-azul-oscuro: var(--ceij-c-marca-oscuro); /* @deprecated */ --ceij-titulo: var(--ceij-c-titulo); /* @deprecated */ --ceij-azul-titulo: var(--ceij-c-titulo); /* @deprecated */ --ceij-gris: var(--ceij-c-superficie-gris); /* @deprecated */ --ceij-ambar: var(--ceij-c-acento-fondo); /* @deprecated */ --ceij-ambar-hover: var(--ceij-c-acento-hover); /* @deprecated */ --ceij-canalon: var(--ceij-e-3); /* @deprecated */ }