/* ============================================================ luzgasia — tokens.css Sistema de diseño (custom properties). Paleta duotono de marca (kit `docs/luzgasia-brand/`): navy + azul (gas) + cálido amarillo→ naranja (luz), con la "ia" en naranja. Space Grotesk + Inter. ============================================================ */ :root { /* ---------- Tokens de marca luzgasia (fuente de verdad del color) ---------- Copiados de docs/luzgasia-brand/palette.css. Disponibles por nombre en toda la web, el panel y el área; los tokens semánticos --c-* de abajo se mapean sobre ellos para que el re-skin sea cohesivo sin tocar cada componente. */ --lg-navy: #0B1A33; /* fondo principal oscuro */ --lg-navy-2: #123A75; /* glow radial de fondo */ --lg-blue: #1B6FE0; /* gota (gas) - base */ --lg-blue-light: #3EA0FF; /* gota (gas) - claro */ --lg-orange: #FF8A1E; /* acento "ia" / llama (luz) - base */ --lg-yellow: #FFD54A; /* llama (luz) - claro */ --lg-white: #FFFFFF; --lg-fog: #F4F5F8; /* superficies claras */ --lg-text-muted: #7FA8E0; /* subtexto sobre navy */ --lg-border: #16305C; /* bordes sobre navy */ --lg-font-brand: 'Space Grotesk', system-ui, sans-serif; /* wordmark / titulares */ --lg-font-ui: 'Inter', system-ui, sans-serif; /* interfaz / cuerpo */ /* ---------- Paleta de marca (ramp navy/azul mapeada a luzgasia) ---------- */ --c-marino-950: #06101f; --c-marino-900: #0b1a33; /* = --lg-navy */ --c-marino-800: #123a75; /* = --lg-navy-2 */ --c-marino-700: #164a93; --c-marino-600: #1e5eb8; /* AA como texto sobre blanco (≈5.2:1) */ --c-marino-100: #e3ecfa; --c-marino-50: #f2f6fc; /* Acento cálido = duotono luz de luzgasia (amarillo→naranja). Se usa siempre con texto/foreground navy encima (contraste OK). El pop de marca es el naranja; el amarillo es la variante clara (hover, texto sobre navy). */ --c-amarillo-500: #ff8a1e; /* = --lg-orange */ --c-amarillo-400: #ffd54a; /* = --lg-yellow */ --c-amarillo-100: #ffe7b3; /* tinte cálido pálido para superficies claras */ --c-blanco: #ffffff; /* ---------- Semánticos ---------- */ --c-fondo: var(--c-blanco); --c-fondo-suave: var(--c-marino-50); --c-texto: #16233b; --c-texto-suave: #4a5b78; /* AA sobre blanco (≈6.9:1) */ --c-texto-inverso: #f5f8fd; --c-texto-inverso-suave: #c6d3e6; /* AA sobre marino-950 */ --c-primario: var(--c-marino-900); --c-acento: var(--c-amarillo-500); --c-borde: #d8e0ec; --c-borde-fuerte: #a9b8cf; --c-exito: #157a55; --c-exito-fondo: #e7f6ef; /* Verde para leer SOBRE superficie oscura (banner de ahorro del funnel, que va sobre un degradado marino). El --c-exito normal esta pensado para fondo claro y encima de navy no se lee. */ --c-exito-claro: #6ee7a8; --c-error: #b3261e; --c-error-fondo: #fcebea; --c-aviso: #7a5800; --c-aviso-fondo: #fff6de; --c-foco: var(--lg-blue); /* anillo de foco en fondos claros */ --c-foco-inverso: var(--c-amarillo-400); /* anillo de foco en fondos oscuros */ /* ---------- Tipografía (Google Fonts vía en el , con system-ui de fallback para degradar sin CDN) ---------- */ --fuente: var(--lg-font-ui); --fuente-marca: var(--lg-font-brand); /* Titulares de la web PUBLICA. Distinta de --fuente-marca a proposito: el wordmark sigue en Space Grotesk (es la marca y no se toca), pero los display editoriales usan Bricolage Grotesque, que tiene el caracter que a Space Grotesk le falta en cuerpos grandes. Si el CDN no carga, degrada a la marca y de ahi a system-ui. */ --fuente-display: 'Bricolage Grotesque', var(--lg-font-brand); --fuente-sistema: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; /* Datos que se cotejan caracter a caracter: CUPS, IBAN, claves, volcados JSON. Estaba escrita a mano en once sitios del panel; aqui pasa a ser un token para que se cambie en uno. */ --fuente-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --texto-xs: 0.8125rem; --texto-s: 0.9375rem; --texto-m: 1.125rem; --texto-l: 1.25rem; --texto-xl: clamp(1.375rem, 1.1rem + 1.4vw, 1.75rem); --texto-2xl: clamp(1.75rem, 1.4rem + 1.8vw, 2.375rem); --texto-display: clamp(2.125rem, 1.5rem + 3.4vw, 3.5rem); --interlineado-texto: 1.6; --interlineado-titulo: 1.15; /* ---------- Espaciado (base 4 px) ---------- */ --esp-1: 0.25rem; --esp-2: 0.5rem; --esp-3: 0.75rem; --esp-4: 1rem; --esp-5: 1.5rem; --esp-6: 2rem; --esp-8: 3rem; --esp-10: 4rem; --esp-seccion: clamp(3.5rem, 6vw + 1rem, 6.5rem); /* ---------- Radios (botones grandes y redondeados, briefing) ---------- */ --radio-s: 8px; --radio-m: 12px; --radio-l: 20px; --radio-pill: 999px; /* ---------- Sistema de elevación (sombras multicapa) ---------- */ --sombra-1: 0 1px 2px rgba(11, 26, 51, 0.05), 0 1px 3px rgba(11, 26, 51, 0.08); --sombra-2: 0 3px 6px rgba(11, 26, 51, 0.05), 0 8px 20px rgba(11, 26, 51, 0.09); --sombra-3: 0 8px 16px rgba(11, 26, 51, 0.08), 0 20px 44px rgba(11, 26, 51, 0.13); --sombra-4: 0 16px 32px rgba(11, 26, 51, 0.12), 0 32px 72px rgba(11, 26, 51, 0.18); --sombra-acento: 0 8px 24px rgba(255, 138, 30, 0.35); /* ---------- Transiciones ---------- */ --trans-rapida: 150ms ease; --trans-media: 280ms cubic-bezier(0.22, 0.7, 0.35, 1); --trans-entrada: 600ms cubic-bezier(0.22, 0.7, 0.35, 1); --rebote: cubic-bezier(0.34, 1.56, 0.64, 1); /* spring suave para micro-interacciones */ /* ---------- Capas (escala única, sin hacks de z-index) ---------- */ --capa-base: 0; --capa-elevada: 1; --capa-cabecera: 10; --capa-flotante: 20; /* ---------- Layout ---------- */ --ancho-contenido: 72rem; --ancho-estrecho: 46rem; --ancho-texto: 42rem; --altura-cabecera: 4.3125rem; /* 69px: min-height 4.25rem + borde 1px (header sticky) */ /* ============================================================ v2 — Rediseño "Editorial del dato" (web pública). Solo los consumen chrome.css / publica.css: añadirlos aquí no cambia nada del funnel, del área ni del panel. ============================================================ */ /* Papel cálido (la base clara v2 NO es blanco puro ni marino-50: es la diferencia de temperatura lo que separa la página de la hermana). */ --lz-papel: #faf8f4; --lz-papel-2: #f3efe8; /* franja clara alternativa */ --lz-tinta: #101a2b; /* texto principal sobre papel */ --lz-tinta-suave: #4c5a72; /* AA sobre papel */ --lz-linea: #e2ddd2; /* reglas/bordes sobre papel */ /* Tipografía display a escala póster (Space Grotesk). */ /* Escala REBAJADA a proposito (antes el display-1 llegaba a 8.25rem = 132px contra un cuerpo de 17px: relacion 7,8:1). Un titular que grita al lado de un parrafo diminuto no es jerarquia, es un salto — feedback directo del cliente ("texto grande texto pequeño queda raro"). Ahora ~4,5:1, y el cuerpo sube un punto para encontrarse a medio camino. */ --fs-display-1: clamp(2.5rem, 1.1rem + 5.2vw, 5.5rem); --fs-display-2: clamp(1.9rem, 1.2rem + 3vw, 3.4rem); --fs-display-3: clamp(1.45rem, 1.1rem + 1.7vw, 2.25rem); --fs-etiqueta: 0.8125rem; /* etiquetas small-caps con índice numérico */ --track-display: -0.035em; --lh-display: 0.96; /* Sistema de la gota: radios asimétricos con UNA esquina viva. */ --radius-gota: 1.5rem 1.5rem 1.5rem 0.3rem; --radius-gota-inv: 0.3rem 1.5rem 1.5rem 1.5rem; --radius-gota-s: 0.9rem 0.9rem 0.9rem 0.2rem; --radius-vivo: 0.3rem; /* Firma de movimiento: spring linear() (generado offline, estático) con fallback cubic-bezier declarado SIEMPRE antes en el componente. */ --ease-gota: linear(0, 0.563 19.8%, 1.02 36.6%, 1.006 51.4%, 0.994 65%, 1); --ease-salida-v2: cubic-bezier(0.22, 0.7, 0.35, 1); --dur-v2-1: 180ms; --dur-v2-2: 340ms; --dur-v2-3: 640ms; }