/* * ─────────────────────────────────────────────────────────────────── * EXPY · design tokens — PALETA EXPYLAB 2026 (oficial) * ─────────────────────────────────────────────────────────────────── * Fuente oficial: Materials/Assets/04. KEY VISUAL EXPY LAB 2026/ * 3. Paleta cromática/PALETA EXPYLAB 2026.pdf * * Decisión 2026-04-21 (round 14, opción A, LOCKED): * La paleta EXPYLAB 2026 es la paleta global del sitio expy.com.py. * IBERMEDIA (red #D1382A, blue #28436E) NO son tokens globales — solo * aparecen adentro del SVG del logo IBERMEDIA o en un bg/border contextual * puntual si hace falta dar contraste a ese logo específico. * * Regla §2.6 del plan Fase 1: en conflicto entre spec y mockup, gana la spec. * * Tipografía GLOBAL: PP Monument Extended (Pangram Pangram) + Besides. * Supersede el pairing previo "Clash Display + Inter". * * Este archivo expone SOLO CSS custom properties en :root. Ningún selector * aplica estilos reales — eso es responsabilidad de tailwind.css (generado * a partir de src/input.css) o de estilos inline puntuales. * ─────────────────────────────────────────────────────────────────── */ :root { /* ───── Paleta EXPYLAB 2026 — primitivos ───── Hex verificados contra el PDF oficial de paleta cromática. */ --expy-color-white: #FFFFFF; --expy-color-red: #F22A3A; /* red core — signature 2026 */ --expy-color-red-coral: #EB757F; /* coral — soft accent */ --expy-color-ink: #1A1A1A; /* near-black, softer que pure black */ --expy-color-gray-700: #333333; /* dark gray step */ --expy-color-cream: #DFD8D1; /* warm sand — bg secundario */ --expy-color-navy: #1A346D; /* deep navy — pareja visual del red */ /* ───── Accents (reserva — poco uso Fase 1) ───── Presentes en el PDF como paleta extendida. Útiles en ilustración, gráficos, badges, pero fuera de uso core Fase 1. */ --expy-accent-mustard: #D9A20B; --expy-accent-lime: #BDC704; --expy-accent-green: #61C73D; --expy-accent-cyan: #0782C6; /* ───── EXPYFEST identity — verde signature ───── Color sampleado del SVG oficial expy-fest-logo.svg (179 paths fill). NO es parte de la paleta EXPYLAB 2026 — es la identidad cromática específica de EXPYFEST. Uso Fase 1: caption + estrella del tab FEST en el hero landing. Reserva para futura página /expyfest. */ --expy-color-fest-green: #A1EC31; /* ───── Roles semánticos ───── Components referencian estos roles, no los primitivos, para que un rebrand futuro sea trivial. Naming (primary/secondary/bg/fg) se mantiene estable — solo cambian los valores apuntados. */ --expy-color-primary: var(--expy-color-red); --expy-color-secondary: var(--expy-color-navy); --expy-color-bg: var(--expy-color-cream); --expy-color-fg: var(--expy-color-ink); --expy-color-muted: #6b6664; --expy-color-border: rgba(26, 26, 26, 0.12); /* ───── Estados ───── */ --expy-color-link: var(--expy-color-navy); --expy-color-link-hover: var(--expy-color-red); --expy-color-focus-ring: var(--expy-color-red); /* ───── Signature gradient — identidad visual del 2026 ───── Radial circular: red core al centro → navy outer. Punto de luz tipo estrella / explosión, coincide con el logo EXPYLAB y el afiche oficial. Uso obligatorio en hero home, banner /expylab y CTA final. NO downgrade a linear sin causa específica. */ --expy-gradient-signature: radial-gradient(circle at center, var(--expy-color-red) 0%, var(--expy-color-navy) 100%); /* Variante alt: navy-dominant para diferenciar /expylab banner del home hero. Stops sin hex literal — respeta la regla "solo primitivos de la paleta oficial". Red core compacto (0-15 %) + transición (15-70 %) + navy sólido outer (70-100 %). */ --expy-gradient-signature-alt: radial-gradient(circle at center, var(--expy-color-red) 0%, var(--expy-color-red) 15%, var(--expy-color-navy) 70%, var(--expy-color-navy) 100%); /* ───── Round 19 — Subtle dark-on-dark gradient ───── Directiva user 2026-04-22: drop multicolor gradients del refactor; sólo se admite gradient SUTIL tono-sobre-tono donde refuerza la composición. Uso reservado al CTA final como cierre visual. El resto del sitio va con bg sólido (ink / cream / white) + textura overlay donde aporte profundidad. Stops: ink #1A1A1A en top → un step más claro (#262626, ink+5%) en bottom. Intencionalmente plano para que la lectura del CTA gane protagonismo sobre la firma cromática. */ --expy-gradient-subtle: linear-gradient(180deg, var(--expy-color-ink) 0%, #262626 100%); /* ───── Tipografía ───── Cascada: si el WOFF2 self-hosted no está disponible, cae a system-ui sin romper el render. */ --expy-font-display: "PP Monument Extended", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --expy-font-body: "PP Monument Extended", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --expy-font-decor: "Besides", "PP Monument Extended", serif; /* ───── Radius ───── */ --expy-radius-sm: 0.125rem; --expy-radius-md: 0.375rem; --expy-radius-lg: 0.75rem; --expy-radius-xl: 1.5rem; /* ───── Shadow ───── Sombras recalculadas sobre --expy-color-ink #1A1A1A. */ --expy-shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.08); --expy-shadow-md: 0 4px 12px rgba(26, 26, 26, 0.12); --expy-shadow-lg: 0 12px 32px rgba(26, 26, 26, 0.16); /* ───── Transitions ───── */ --expy-transition-fast: 150ms ease; --expy-transition-base: 250ms ease; } /* * Baseline que aplica ANTES de que Tailwind Preflight hidrate. Así, incluso * si tailwind.css todavía no se generó (user no corrió el build), el sitio * muestra colores de marca y tipografía correctos en lugar de default del UA. */ html { background-color: var(--expy-color-bg); color: var(--expy-color-fg); font-family: var(--expy-font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { background-color: var(--expy-color-bg); color: var(--expy-color-fg); font-family: var(--expy-font-body); margin: 0; }