/* ========================================================================== TRINITY — TOKENS Fuente única de verdad visual para todo el sitio. Ninguna otra hoja debe declarar :root ni hardcodear un color de marca. Referencia: TRINITY_WEB_MASTER_v2.2 §31 (colores base) y §21 (WCAG 2.2 AA). ========================================================================== */ :root{ /* --- Marca ------------------------------------------------------------ El rojo de marca es un RELLENO, no un color de texto. Sobre él va texto blanco (8.63:1). Para texto usá sus dos derivados. Esta separación es lo que resuelve la mayoría de los contrastes. */ --c-red: #9D0000; /* relleno. Texto blanco encima: 8.63:1 */ --c-red-hover: #7A0000; /* estado hover del relleno */ --c-red-on-light: #8A0000; /* TEXTO sobre claro. vs #fff: 10.09:1 */ --c-red-on-dark: #FF8A80; /* TEXTO sobre oscuro. vs navy: 7.74:1 */ --c-red-bright: #E02B2B; /* GRAFISMO sobre oscuro: flechas, reglas, barras. vs navy: 3.58:1, suficiente para elementos no textuales (WCAG 1.4.11). NO usar para texto: para eso va blanco. Existe porque #9D0000 sobre navy da 1.35:1 y desaparece. */ /* --- Superficies ------------------------------------------------------ */ --c-navy: #141826; /* azul noche de marca */ --c-navy-2: #1B2130; /* panel sobre navy */ --c-navy-3: #232A3B; /* hover sobre navy-2 */ --c-white: #FFFFFF; --c-cloud: #F5F6F8; /* sección clara alterna */ /* --- Texto ------------------------------------------------------------ */ --c-ink: #2A2A2A; /* gris oscuro de marca. vs #fff: 14.35:1 */ --c-gray: #646464; /* gris medio de marca. vs #fff: 5.92:1*/ --c-on-dark: #FFFFFF; --c-on-dark-2: #B4BCCA; /* secundario sobre navy. 9.25:1 */ --c-on-dark-3: #8C95A6; /* terciario sobre navy-2. 5.33:1 */ /* --- Líneas ----------------------------------------------------------- */ --c-line: #E2E5EA; /* separador decorativo. No delimita UI. */ --c-line-strong: #8A929F; /* borde de control. WCAG 1.4.11: 3.14:1 */ --c-line-dark: rgba(255,255,255,.10); --c-line-dark-2: rgba(255,255,255,.16); /* --- Señal (solo para estado, nunca decorativo) ------------------------ */ --c-ok: #16704A; /* sobre claro */ --c-ok-on-dark: #7FD1A8; /* sobre navy-2: 8.87:1 */ --c-mute-on-dark: #4A5468; /* serie secundaria. 2.11:1 sobre navy-2: */ /* exento de 1.4.11 solo porque el valor */ /* va siempre en texto al lado. */ /* --- Tintes ------------------------------------------------------------ Fondos de bajo contraste. Nunca llevan texto propio: solo señalan. */ --c-tint-proof: #FBF3F3; /* columna que carga el argumento */ --c-tint-invalid: #FFF7F7; /* campo con error */ --c-on-red-2: #FBE9E9; /* texto secundario sobre el rojo. 7.37:1 */ /* --- Tipografía ------------------------------------------------------- Piso duro: 13px. Nada por debajo, en ningún contexto. La escala se estrecha a propósito respecto de la versión anterior: los títulos bajan y el cuerpo sube, para cerrar la brecha que hacía que la página se leyera como afiche con letra chica. */ --f-display: Montserrat, system-ui, sans-serif; --f-text: Inter, system-ui, sans-serif; --f-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; --t-meta: 13px; /* eyebrow, labels, captions. PISO. */ --t-xs: 14px; --t-sm: 15px; /* texto denso: tablas, listas, tarjetas */ --t-body: 16px; /* cuerpo por defecto */ --t-lead: 18px; /* bajada del hero y de sección */ --t-h4: clamp(17px, 1.4vw, 19px); --t-h3: clamp(19px, 1.8vw, 23px); --t-h2: clamp(30px, 3.4vw, 46px); --t-h1: clamp(38px, 4.6vw, 62px); --lh-tight: 1.05; /* display */ --lh-snug: 1.25; /* subtítulos */ --lh-body: 1.65; /* cuerpo */ --ls-display: -.03em; --ls-meta: .16em; /* --- Espaciado (base 4) ------------------------------------------------ */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-section: clamp(64px, 7vw, 96px); /* padding vertical de sección */ --s-gutter: clamp(20px, 5vw, 64px); /* padding lateral del wrap */ /* --- Esquinas ---------------------------------------------------------- Radio graduado: lo estructural es filo, lo que se toca lleva 3px. El chaflán es la firma de marca y se usa en pocos lugares — recorta box-shadow y el anillo de foco, así que nunca va en un control. */ --r-surface: 0; --r-control: 3px; --chamfer: polygon(0 0, 100% 0, 100% calc(100% - 13px), calc(100% - 11px) 100%, 0 100%); --chamfer-lg: polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 22px) 100%, 0 100%); /* --- Elevación --------------------------------------------------------- */ --e-1: 0 1px 2px rgba(20,24,38,.06); --e-2: 0 8px 24px rgba(20,24,38,.08); --e-3: 0 22px 54px rgba(20,24,38,.12); /* --- Vidrio ------------------------------------------------------------ Solo en chrome flotante: header sticky, barra CTA de mobile, fondo de lightbox. Nunca en contenido: el contraste deja de ser verificable de forma automática (Lighthouse y axe no resuelven qué hay detrás). La base es opaca al 78–80% para que el contraste pase aun sin blur. */ --glass-bg: rgba(20,24,38,.80); --glass-solid: #141826; /* fallback de @supports */ --glass-filter: saturate(160%) blur(14px); /* --- Movimiento -------------------------------------------------------- §22: movimiento solo cuando explica. */ --ease: cubic-bezier(.2,.7,.2,1); --dur-fast: .18s; --dur-base: .28s; /* --- Layout ------------------------------------------------------------ */ --w-max: 1240px; --w-text: 62ch; /* medida máxima de párrafo */ --header-h: 80px; /* alto del header sticky; alimenta scroll-margin */ } @media (prefers-reduced-motion: reduce){ :root{ --dur-fast: 0s; --dur-base: 0s; } }