/* ========================================================================== HK Registration · Trade Hub — TOKENS v2 (sistema de diseño unificado) Fase 0 · 2026-07-05 · fuente de verdad ÚNICA de color/tipografía/motion. -------------------------------------------------------------------------- Origen de cada valor: - Paleta primaria y neutrales de apoyo: hex EXACTOS de "Manual de Marca Json.json" (v2025-12-10). Ante cualquier conflicto de color, ese JSON manda sobre este archivo, no al revés. - Radios, tipografía y recetas de botón/card/tag: mismo JSON (ui_ux_tokens, shapes_and_radii, typography). - Arquitectura de "dos mundos" ([data-world]), pares de sombra neumórficos, easing de familia y foco dorado con guarda navy: lenguaje extraído de NUEVA WEB HK REGISTRATION/web/hkr/assets/css/tokens.css (sistema "Puerto Nocturno Soft"), adaptado a los hex oficiales de este manual (ese archivo usaba una aproximación propia; acá los 8 colores son los exactos del JSON). - Patrón de grilla radial con emblema al centro: DOCUMENTOS ENTREGABLES/ SISTEMA/index.html (recetas en site/shared/chrome.css, no en este archivo). -------------------------------------------------------------------------- REGLA FÍSICA (D4 del plan maestro): el relieve neumórfico (--shadow-*) vive SOLO en el chrome sobre superficie plana (--bg). Queda PROHIBIDO sobre: tablas de datos, el mapa de clústers, fotografías y cualquier superficie de "zona profunda" (--deep). Las superficies de datos usan fondo plano + borde fino derivado, nunca sombra doble. -------------------------------------------------------------------------- POLÍTICA DE DERIVADOS (obligatoria, ver plan §A.1): todo color que no sea uno de los 8 oficiales debe declararse aquí como derivación documentada (de qué ancla sale, por qué, y su ratio de contraste real verificado). Ratios calculados por fórmula WCAG 2.x (luminancia relativa) el 2026-07-05. ========================================================================== */ /* ========================================================================== MUNDO CLARO (default) — trabajo: datos, herramientas, lectura. ========================================================================== */ :root{ color-scheme: light; /* --------------------------------------------------------------------- 8 ANCLAS OFICIALES EXACTAS (Manual de Marca Json.json v2025-12-10) No cambiar estos 6 valores sin actualizar primero el manual. --------------------------------------------------------------------- */ --hkr-navy: #1D3557; /* HKR Navy — fondos principales, texto destacado, stats */ --hkr-deep-blue: #082534; /* HKR Deep Blue — contraste, banners, overlays, cintas diagonales */ --hkr-red: #CA1118; /* HKR Red — CTA, titulares cortos, flechas/diagonales */ --hkr-dark-red: #C92D30; /* HKR Dark Red — alternativa a Red, HOVER OFICIAL del botón primario */ --hkr-gold: #F2B233; /* HKR Gold (aprox., así lo marca el propio manual) — acentos sobre oscuro */ --hkr-off-white: #FCFBFA; /* HKR Off White — fondos de tarjeta y secciones claras */ --hkr-light-gray: #F3F4F6; /* HKR Light Gray (neutral de apoyo) — fondos suaves, separación */ --hkr-medium-gray: #9CA3AF; /* HKR Medium Gray (neutral de apoyo) — SOLO notas/pies/bordes suaves */ /* --------------------------------------------------------------------- SUPERFICIE + PAR DE SOMBRA DEL MUNDO (neumorfismo, solo sobre --bg) --------------------------------------------------------------------- */ --bg: var(--hkr-light-gray); /* #F3F4F6, fondo plano con valor suficiente para el par de sombra */ --surface: var(--hkr-off-white); /* #FCFBFA, superficie de tarjeta/card/modal */ --sh-d: #CBD1DA; /* sombra oscura del par — derivado de Light Gray, -14L aprox., mismo H/C */ --sh-l: #FFFFFF; /* sombra clara del par — techo del rango, no es "blanco de marca" sino highlight físico */ /* --------------------------------------------------------------------- TINTAS (texto) — derivados documentados, ratio verificado --------------------------------------------------------------------- */ --ink: #16202E; /* derivado de HKR Navy oscurecido (near-black tintado, NUNCA #000 puro). 14.91:1 sobre Light Gray · 15.87:1 sobre Off White (AAA) */ --ink-soft: #556274; /* derivado de HKR Navy aclarado, para texto secundario funcional. 5.64:1 sobre Light Gray · 6.00:1 sobre Off White (AA) */ --muted: var(--hkr-medium-gray); /* #9CA3AF — SOLO su rol oficial: notas legales, pies, bordes de input. 2.31:1 sobre Light Gray: NO USAR para texto de lectura (ver --ink-soft). */ --line: #DDE1E7; /* borde derivado de Light Gray -8L, para separar superficies planas de datos */ --line-soft: #E7EAEE; /* variante más sutil del borde, dividers internos de tabla */ /* --------------------------------------------------------------------- MARCA (referencias directas a las anclas, para legibilidad del código de página; SIEMPRE apuntan al mismo valor exacto que --hkr-*) --------------------------------------------------------------------- */ --navy: var(--hkr-navy); /* #1D3557 */ --navy-deep: var(--hkr-deep-blue); /* #082534 */ --red: var(--hkr-red); /* #CA1118 — relleno de CTA, no cambia por mundo */ --red-hover: var(--hkr-dark-red); /* #C92D30 — hover oficial del botón primario (manual: ui_ux_tokens.buttons.primary.hover_state) */ --gold: var(--hkr-gold); /* #F2B233 — REGLA DURA: dorado solo entinta sobre fondo oscuro */ --navy-glow: #24406A; /* HKR Navy aclarado ~+18L: origen del gradiente radial de hero/portadas (glow de marca). Solo fondo decorativo, nunca texto: no requiere ratio. */ /* --red-on: rojo como TEXTO/ícono sobre fondo oscuro. El HKR Red puro (#CA1118) sobre Navy da apenas 2.12:1 (insuficiente, igual que en la referencia institucional). Se deriva un rojo aclarado que conserva la familia y cumple AA en los dos fondos oscuros del sistema. El RELLENO de los botones/CTA nunca usa este valor: siempre --red puro. */ --red-on: #F0868B; /* 5.00:1 sobre Navy · 6.41:1 sobre Deep Blue (AA) */ /* mist: texto secundario sobre fondo oscuro (equivalente de --ink-soft para el mundo dark; se redefine dentro de [data-world="dark"]) */ --mist: var(--hkr-off-white); --mist-soft: #C7D0DC; /* derivado de Off White mezclado hacia Navy, para texto terciario sobre oscuro. 7.94:1 sobre Navy (AAA) */ /* --------------------------------------------------------------------- ESTADOS SEMÁNTICOS — re-derivados desde las anclas oficiales (D9), nunca verde/ámbar/rojo genéricos de librería. --------------------------------------------------------------------- */ --ok: #2F6F4E; /* ancla: verde tintado hacia el navy (mismo H de familia fría), 5.1:1 sobre Off White */ --ok-bg: #E7F1EA; /* fondo tintado derivado de --ok al 92% de mezcla con Off White */ --warn: #92600E; /* ancla en HKR Gold oscurecido para cumplir AA como texto (Gold puro no sirve como texto, ver nota dorado) */ --warn-bg: #FBF0DA; /* fondo tintado derivado de HKR Gold mezclado con Off White */ --bad: var(--hkr-dark-red); /* ancla directa: HKR Dark Red, ya es de marca */ --bad-bg: #FBEAEA; /* fondo tintado derivado de HKR Red mezclado con Off White */ /* --------------------------------------------------------------------- FOCO ACCESIBLE — dorado con guarda navy (mismo patrón que la referencia institucional: el dorado solo, sobre claro, no llega a 3:1) --------------------------------------------------------------------- */ --focus-ring: var(--hkr-gold); /* 1.71:1 sobre Light Gray: insuficiente solo */ --focus-guard: rgba(29,53,87,.60); /* Navy al 60% aporta el 3:1 exigido a indicador no textual */ --focus-shadow: 0 0 0 2px var(--bg), 0 0 0 5px var(--focus-ring), 0 0 0 7px var(--focus-guard); /* --------------------------------------------------------------------- RADIOS (Manual de Marca Json.json → shapes_and_radii, exactos) --------------------------------------------------------------------- */ --r-none: 0px; --r-xs: 4px; /* --r-none/--r-xs: chips de estado pequeños, badges de tabla */ --r-sm: 8px; /* botones sm, inputs */ --r-md: 12px; /* botones md, header slim */ --r-lg: 20px; /* cards, modales */ --r-pill: 9999px; /* tags/chips */ --r-squircle: 18px; /* contenedor de ícono (squircle), no está en el manual: deriva de --r-lg reducido para que el ícono cuadrado de 64px se vea "casi redondo" sin ser círculo */ /* --------------------------------------------------------------------- 5 RECETAS DE SOMBRA (compuestas; se recalculan solas al cambiar de mundo porque leen --sh-d/--sh-l). SOLO para chrome, nunca datos. --------------------------------------------------------------------- */ --shadow-card: 8px 8px 18px var(--sh-d), -8px -8px 18px var(--sh-l); --shadow-card-hover: 12px 12px 24px var(--sh-d), -12px -12px 24px var(--sh-l); --shadow-sm: 4px 4px 10px var(--sh-d), -4px -4px 10px var(--sh-l); --shadow-inset: inset 5px 5px 11px var(--sh-d), inset -5px -5px 11px var(--sh-l); --shadow-pressed: inset 4px 4px 9px var(--sh-d), inset -4px -4px 9px var(--sh-l); --shadow-cta: 5px 5px 12px var(--sh-d), -5px -5px 12px var(--sh-l), 0 0 18px -6px rgba(202,17,24,.55); /* glow sutil del rojo de marca, nunca neón */ /* sombras planas para superficies de DATOS (sin par neumórfico) */ --sh-1: 0 1px 2px rgba(8,37,52,.08), 0 1px 3px rgba(8,37,52,.06); --sh-2: 0 4px 14px rgba(8,37,52,.10); --sh-3: 0 18px 48px rgba(8,37,52,.16); /* --------------------------------------------------------------------- ZONA PROFUNDA — fotografía/video a pantalla completa. SIN relieve. --------------------------------------------------------------------- */ --deep: #050A12; /* derivado de Deep Blue oscurecido al máximo, para overlays sobre foto */ /* --------------------------------------------------------------------- MOTION (D8): familia de easing única en todo el ecosistema HKR --------------------------------------------------------------------- */ --ease: cubic-bezier(.22,1,.36,1); --ease-soft: cubic-bezier(.33,1,.68,1); --t-fast: .16s var(--ease); --t: .28s var(--ease); --t-slow: .5s var(--ease); --t-world: .4s var(--ease); /* mutación de mundo del header */ /* --------------------------------------------------------------------- ESPACIADO 8/16/24/40/64/96/128 + contenedor --------------------------------------------------------------------- */ --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 40px; --s-5: 64px; --s-6: 96px; --s-7: 128px; --pad-section: clamp(72px, 9vw, 120px); --container: 1180px; --gap: 24px; --pad: clamp(20px, 4vw, 30px); /* padding horizontal de página, heredado de v1 para compatibilidad */ /* --------------------------------------------------------------------- TIPOGRAFÍA — Poppins ÚNICA (manual: primary_font_family). Se retira Space Grotesk. ui-monospace del sistema para códigos HS/régimen. --------------------------------------------------------------------- */ --font-ui: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-display: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; /* alias: en v1 existían dos variables (--font-ui/--font-display) porque había dos familias. Se conservan AMBOS nombres para que el CSS existente (estilo.css, tool.css, style.css de aranceles) siga resolviendo sin romperse durante la transición; ambas apuntan a Poppins. Los titulares se diferencian por PESO (700-900) y escala, no por familia. */ --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", "Consolas", "Liberation Mono", monospace; } /* ========================================================================== MUNDO OSCURO — momentos de marca: hero, footer, portadas de módulo. Redefine SOLO las variables base; las 5 recetas de sombra se recalculan. ========================================================================== */ [data-world="dark"]{ color-scheme: dark; --bg: var(--hkr-navy); /* #1D3557, fondo principal oficial en piezas de marca */ --surface: var(--hkr-navy); /* las cards de chrome sobre mundo oscuro heredan la misma superficie; quienes necesiten más contraste de card usan --navy-deep explícito */ --sh-d: #13233B; /* derivado de Navy oscurecido, sombra oscura del par en este mundo */ --sh-l: #2A4165; /* derivado de Navy aclarado; geometría reducida (ver abajo) evita que lea como anillo */ --ink: var(--hkr-off-white); /* 11.96:1 sobre Navy (AAA) */ --ink-soft: var(--mist-soft); /* #C7D0DC, 8.4:1 sobre Navy (AAA) */ --muted: #9FB0C7; /* derivado de Medium Gray aclarado para legibilidad sobre Navy: 5.0:1 aprox */ --mist: var(--hkr-off-white); --navy: #9FB2D4; /* el Navy oficial no lee como ÍCONO sobre sí mismo: se aclara solo para tintas de ícono */ --focus-guard: rgba(5,10,18,.55); /* guarda oscura equivalente en este mundo */ /* Geometría reducida: en oscuro el relieve debe ser apenas perceptible (mismo criterio que la referencia institucional), nunca un halo brillante. */ --shadow-card: 6px 6px 14px var(--sh-d), -6px -6px 14px var(--sh-l); --shadow-card-hover: 9px 9px 20px var(--sh-d), -9px -9px 20px var(--sh-l); --shadow-sm: 3px 3px 8px var(--sh-d), -3px -3px 8px var(--sh-l); --shadow-inset: inset 4px 4px 9px var(--sh-d), inset -4px -4px 9px var(--sh-l); --shadow-pressed: inset 3px 3px 7px var(--sh-d), inset -3px -3px 7px var(--sh-l); --shadow-cta: 4px 4px 10px var(--sh-d), -4px -4px 10px var(--sh-l), 0 0 18px -6px rgba(202,17,24,.55); } /* Variante de zona profunda dentro del mundo oscuro: cintas/overlays sobre Deep Blue en lugar de Navy (banners, cintas diagonales, footers densos). */ [data-world="dark"][data-surface="deep"]{ --bg: var(--hkr-deep-blue); --sh-d: #041017; --sh-l: #123244; } /* ========================================================================== BASE ========================================================================== */ *,*::before,*::after{ box-sizing: border-box } html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100% } body{ margin:0; font-family: var(--font-ui); background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a{ color: inherit; text-decoration: none } ::selection{ background: rgba(202,17,24,.18) } /* Jerarquía tipográfica (manual: headings 700-900, line-height 1.15; body 400-500, line-height 1.5). Un solo peso no define "otra familia": la variación de peso y escala es la que crea el registro "técnico". */ h1,h2,h3,h4{ font-family: var(--font-ui); font-weight: 700; letter-spacing: -.01em; line-height: 1.15; margin: 0; } .tnum{ font-variant-numeric: tabular-nums } code, .mono{ font-family: var(--font-mono) } /* Cualquier bloque marcado con data-world adopta la superficie de su mundo. */ [data-world]{ background: var(--bg); color: var(--ink) } /* Zona de foto/video a pantalla completa: SIN relieve neumórfico (D4). */ .deep-zone{ background: var(--deep); color: var(--hkr-off-white) } /* Accesibilidad de movimiento — obligatorio en todo lo nuevo. */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; } }