/* ========================================================================== INVEXUS · tokens.css Sistema de design tokens. Fuente única de verdad del sistema visual. Base: ARQUITECTURA_TECNICA §18 y ARQUITECTURA_VISUAL_UX §22. Ampliación "ink": PLAN_IMPLEMENTACION_HOME_REV01 §3 (accesibilidad). REGLA: ningún componente define un color, radio, sombra o espaciado literal. Todo se consume desde aquí. ========================================================================== */ :root { /* --- COLOR · paleta aprobada (ARQUITECTURA_VISUAL_UX §1.1) ------------- Uso decorativo, iconos, bordes, titulares grandes (>=24px) y superficies oscuras. NO usar para texto pequeño sobre fondo claro: ver las variantes "ink" más abajo. */ --inv-brand: #2D80C3; --inv-navy: #0B1F33; --inv-cyan: #12A8C7; --inv-green: #42B883; --inv-bg: #F7F9FC; --inv-surface: #FFFFFF; --inv-soft: #EAF4FB; --inv-text: #17202A; --inv-muted: #5C6773; --inv-border: #DCE5ED; --inv-warning: #F4A62A; --inv-error: #D64545; /* --- COLOR · variantes accesibles sobre fondo CLARO -------------------- Contraste verificado contra #FFFFFF (WCAG 2.1 AA exige >=4.5 en texto). Motivo: los colores aprobados fallan AA sobre claro. brand 4.21 · cyan 2.82 · green 2.50 · warning 2.03 · error 4.38 */ --inv-brand-ink: #2469A1; /* 5.82 · links, botón primario */ --inv-cyan-ink: #0B7A91; /* 4.99 · datos sobre claro */ --inv-green-ink: #1F7A52; /* 5.30 sobre blanco · 4.69 sobre el fondo del badge #E4F5EC, donde #26855A sólo alcanzaba 4.05 y no cumplía AA. */ --inv-warning-ink: #8A5805; /* 5.40 sobre el fondo del badge #FDF1DC */ --inv-error-ink: #C13636; /* 5.46 · errores de formulario */ /* --- COLOR · texto sobre fondos oscuros ------------------------------- Los fondos oscuros del sitio no son planos: el gradiente de marca va de #0B1F33 a #2D80C3. Sobre ese extremo CLARO, un gris azulado suave cae a 1.9:1 y es ilegible. Por eso los bloques oscuros llevan un scrim (--inv-scrim-dark) que garantiza el peor caso, y el texto usa estos dos tokens, verificados contra el fondo compuesto mas claro posible. Contraste en el peor caso: blanco 9.0 · muted 6.2. Ambos AA. */ /* TEXTO FUERTE SOBRE FONDO CLARO · titulares, cifras, etiquetas. Existe SEPARADO de --inv-navy porque aquel es una SUPERFICIE, y las superficies y los textos tienen que poder ir en direcciones contrarias: en modo noche la superficie se aclara y el texto tambien, y si fueran el mismo token acabarian uno encima del otro. */ --inv-ink-strong: var(--inv-navy); --inv-on-dark: #FFFFFF; --inv-on-dark-muted: #C9D6E3; /* --- CONSTANTES QUE NO SIGUEN AL TEMA ---------------------------------- Estos cuatro NO se redefinen en theme.css, y eso es justo lo que los hace utiles. El resto de la paleta se invierte de dia a noche; estos tienen que quedarse quietos. POR QUE HACEN FALTA Hay elementos que viven SIEMPRE sobre una superficie oscura -los botones del hero, que es oscuro en los dos modos- y elementos cuyo color no es nuestro -el verde de WhatsApp-. Si el boton del hero usara --inv-surface, de noche se volveria casi negro sobre un hero negro y desapareceria; ya paso una vez y se vio en la captura nocturna, no leyendo el CSS. Antes esos valores estaban escritos a pelo en base.css y components.css. Funcionaba, pero un color literal suelto en una hoja de componentes es como se erosiona un sistema de tokens: el primero siempre tiene una buena razon, y el decimoquinto ya no la recuerda nadie. --inv-fixed-ink el navy que sigue siendo navy en modo noche --inv-fixed-soft el hielo del hover de los botones claros --inv-whatsapp verde oficial de WhatsApp. NO es un color de marca INVEXUS y no puede cambiarse por gusto: identifica un canal ajeno y su reconocimiento es su funcion. --inv-whatsapp-fg blanco sobre ese verde · contraste 3.9 : 1, que cumple para el icono (grafico no textual, minimo 3:1). El numero y la etiqueta NO van sobre el verde: van sobre la superficie de la tarjeta. */ /* BORDE DE LOS CONTROLES DE FORMULARIO. Apunta a --inv-muted, que theme.css YA redefine, asi que este token sigue al modo dia/noche sin necesidad de declararlo dos veces ni de escribir un solo color literal. POR QUE NO SIRVE --inv-border --inv-border es para separar superficies, y ahi un trazo casi invisible es justo lo que se quiere. Un control es otra cosa: WCAG 1.4.11 exige 3:1 para el limite de un elemento de interfaz, porque si no se ve el borde no se ve el control. --inv-border da 1.15:1 sobre el panel; este da 5.5:1 de dia y 8.8:1 de noche. */ /* --- LOS TRES ESTADOS DE UNA SUPERFICIE INTERACTIVA ------------------- El sistema tenia hover, pero tan sutil que habia que buscarlo: un borde que pasaba de gris a azul al 35 % y un desplazamiento de 6 px. Sobre una rejilla de seis tarjetas iguales eso no se percibe; se intuye. Ahora hay TRES estados y se distinguen por MATERIAL, no por un matiz: NORMAL superficie, borde tenue, sombra minima HOVER la superficie se tine, el borde sube a contraste real, se enciende una linea de acento y el titulo toma color de marca ACTIVO la superficie se INVIERTE. No es un hover mas fuerte: es otra cosa, y por eso no se puede confundir con el EL ACTIVO SE INVIERTE EN LOS DOS MODOS, y con un solo par de tokens: --inv-brand-ink ya cambia de dia (#2469A1, oscuro) a noche (#6FB4E8, claro), asi que el texto que va encima tiene que cambiar en sentido contrario. De dia sale panel oscuro con texto blanco (5.82:1); de noche, panel claro con texto navy (7.45:1). Los dos cumplen AA y los dos se leen como "esto esta seleccionado". */ --inv-hover-bg: color-mix(in srgb, var(--inv-brand) 7%, var(--inv-surface)); --inv-hover-border: color-mix(in srgb, var(--inv-brand-ink) 62%, var(--inv-border)); --inv-hover-accent: var(--inv-cyan-ink); --inv-hover-icon-bg: var(--inv-brand-ink); --inv-hover-icon-fg: var(--inv-on-dark); --inv-active-bg: var(--inv-brand-ink); --inv-active-fg: var(--inv-on-dark); --inv-active-muted: var(--inv-on-dark-muted); --inv-active-border: var(--inv-cyan-ink); /* 200 ms: dentro de la horquilla 180-250 que pidio el director. Lo bastante rapido para que la respuesta parezca inmediata y lo bastante lento para que se vea que ha cambiado algo. Sin rebote: un rebote en una tarjeta de servicio profesional se lee como un juguete. */ --inv-duration-state: 200ms; /* --- AIRE DE LAS TARJETAS EDITORIALES --------------------------------- Las de Insights tenian padding 0 en la Home -no letra pequena: CERO- por una regla pensada para la variante con imagen, que en la Home no existe. La etiqueta quedaba literalmente a 1 px del borde. Medido, no estimado. */ --inv-editorial-pad: var(--inv-space-4); /* 32px */ --inv-editorial-pad-mobile: var(--inv-space-3); /* 24px */ --inv-control-border: var(--inv-muted); --inv-fixed-ink: #0B1F33; --inv-fixed-soft: #EAF4FB; --inv-whatsapp: #25D366; --inv-whatsapp-fg: #FFFFFF; /* Velo que se superpone al gradiente en el lado del texto. Mantiene el gradiente aprobado intacto y sólo asegura la legibilidad encima. */ --inv-scrim-dark: linear-gradient(90deg, rgba(11,31,51,.78) 0%, rgba(11,31,51,.55) 58%, rgba(11,31,51,.10) 100%); /* --- COLOR · superficies de badge -------------------------------------- */ --inv-badge-warn-bg: #FDF1DC; --inv-badge-ok-bg: #E4F5EC; --inv-error-bg: #FBE9E9; /* --- COLOR · impresión -------------------------------------------------- */ --inv-print-ink: #000000; /* --- COLOR · variante para fondo NAVY --------------------------------- Sobre #0B1F33 los colores aprobados sí cumplen (cyan 5.92, green 6.69). Esta variante se reserva a datos que deben destacar más. */ --inv-cyan-bright: #3FC3DE; /* 8.01 sobre navy */ /* --- COLOR · roles semánticos ----------------------------------------- */ --inv-color-link: var(--inv-brand-ink); --inv-color-link-hover: var(--inv-navy); --inv-color-focus: var(--inv-cyan-ink); --inv-btn-primary-bg: var(--inv-brand-ink); --inv-btn-primary-fg: var(--inv-surface); --inv-btn-primary-bg-hover: var(--inv-navy); --inv-btn-secondary-fg: var(--inv-brand-ink); --inv-btn-secondary-border: var(--inv-border); /* --- GRADIENTES · sólo dos, aprobados (§1.2) --------------------------- */ --inv-gradient-brand: linear-gradient(135deg, #0B1F33 0%, #1C4F7A 55%, #2D80C3 100%); --inv-gradient-intelligence: linear-gradient(135deg, #2D80C3 0%, #12A8C7 100%); /* --- TIPOGRAFÍA (§2) --------------------------------------------------- */ --inv-font-heading: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --inv-font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --inv-fs-display: clamp(2.2rem, 4.4vw, 5.0rem); --inv-fs-h1: clamp(2.2rem, 4vw, 4.2rem); --inv-fs-h2: clamp(1.75rem, 3vw, 3.1rem); --inv-fs-h3: clamp(1.35rem, 1.6vw, 1.65rem); --inv-fs-body-lg: 1.1875rem; --inv-fs-body: 1.0625rem; /* nunca por debajo de 16px (§2.3) */ --inv-fs-small: 0.875rem; --inv-fs-kpi: clamp(2.5rem, 3.6vw, 4rem); --inv-lh-display: 1.02; --inv-lh-heading: 1.10; --inv-lh-body: 1.65; --inv-ls-display: -0.035em; --inv-ls-heading: -0.02em; --inv-fw-body: 400; --inv-fw-medium: 500; --inv-fw-semibold: 650; --inv-fw-bold: 700; /* --- ESPACIADO · sistema 8px (§3.3) ------------------------------------ */ --inv-space-1: 8px; --inv-space-2: 16px; --inv-space-3: 24px; --inv-space-4: 32px; --inv-space-5: 48px; --inv-space-6: 64px; --inv-space-7: 96px; --inv-space-8: 128px; --inv-section-y: var(--inv-space-7); /* desktop 96px */ --inv-section-y-mobile: var(--inv-space-6); /* mobile 64px */ /* --- CONTENEDOR Y GRID (§3.1, §3.2) ------------------------------------ */ --inv-container: 1240px; --inv-container-text: 780px; --inv-gutter: var(--inv-space-3); /* --- RADIOS (§3.4) ----------------------------------------------------- */ --inv-radius-sm: 10px; --inv-radius-md: 16px; --inv-radius-lg: 24px; --inv-radius-btn: 12px; --inv-radius-pill: 999px; /* --- SOMBRAS (§22) ----------------------------------------------------- */ --inv-shadow-sm: 0 4px 16px rgba(11,31,51,.06); --inv-shadow-md: 0 12px 32px rgba(11,31,51,.10); --inv-shadow-lg: 0 24px 64px rgba(11,31,51,.14); /* --- MOTION (§9, §20, §23) --------------------------------------------- Sólo transform y opacity. Nada que fuerce layout. */ /* Easing aprobado en §9.2. */ --inv-ease: cubic-bezier(.2,.8,.2,1); --inv-duration-micro: 150ms; /* §9.2 micro: 120-180ms */ --inv-duration-fast: 150ms; /* alias historico */ --inv-duration-base: 240ms; /* §9.2 standard: 200-280ms */ --inv-duration-slow: 420ms; /* §9.2 large: 350-500ms */ /* --- ALTURA DE LA CABECERA --------------------------------------------- Un solo valor. Antes estaba repetido como literal en el offset del menu movil y en el scroll-margin de las anclas: si la cabecera cambiaba de alto, esos dos valores se quedaban desincronizados y una ancla acababa tapada por la propia cabecera. */ --inv-header-h: 76px; --inv-header-h-mobile: 66px; /* --- CAPAS -------------------------------------------------------------- */ --inv-z-base: 1; --inv-z-sticky: 100; --inv-z-overlay: 1000; } /* Respeto obligatorio de la preferencia del sistema (§19 A8). */ @media (prefers-reduced-motion: reduce) { :root { --inv-duration-micro: 1ms; --inv-duration-fast: 1ms; --inv-duration-base: 1ms; --inv-duration-slow: 1ms; } }