/* ============================================================================ tokens.css — variables de diseño de la landing «MejorIA × LHC TFT» Fuente: brief/v2/PALETA-TFT.md (paleta v2 «TFT», 02/10/2026) y brief/BRIEF.md §6. Reparto: noche azul del interfaz de TFT (fondos); metal = marco TFT (eyebrows, filetes, bordes); crema = titulares; teal = MejorIA (acción y luz; mismo tono que el teal del interfaz de TFT); oro TFT = recompensa y dinero; rareza = progresión, solo en marcos. Morado nunca de fondo ni en botones. Teal, verde, azul y morado de rareza jamás como texto de cuerpo. Todos los módulos CSS consumen estas variables; ninguno escribe un color en hexadecimal. Los ratios de contraste indicados están calculados con la fórmula WCAG 2.x (luminancia relativa). ========================================================================== */ :root { color-scheme: dark; /* --- Color: fondo y superficies (noche azul del interfaz de TFT) ------------------ */ --color-fondo-0: #010A13; /* Hextech Black: intro, película, inicio del degradado */ --color-fondo-1: #0A1428; /* azul noche del interfaz: fondo base y theme-color */ --color-tinta: #183040; /* navy oficial del logo MejorIA (sin cambio) */ --color-superficie-1: #0E1B32; /* tarjetas y fichas sobre el fondo */ --color-superficie-2: #13213B; /* nav, franja, footer, campos del formulario */ --color-superficie-3: #1A2C4B; /* hover de tarjetas, campo en foco */ --color-panel-luz: #EAF6F5; /* panel luminoso bajo MIA (recorte canon sobre claro) */ --color-panel-luz-texto: #183040;/* texto sobre el panel luminoso: 12,37:1 */ /* --- Color: luz eléctrica de MejorIA (acción y luz; sin cambio) ------------------ */ --color-teal: #30C8C0; /* sobre #0A1428: 8,87:1; sobre #010A13: 9,63:1 */ --color-cyan: #00D1C2; /* núcleo de luz, estelas, hover del CTA */ --color-verde: #20C058; /* verde de las barras del logo: SOLO logo y micro-acentos */ /* --- Color: oro TFT (recompensa y dinero: tarjeta, Top 4, racha 3, importes, foco) */ --color-oro: #F8B33F; /* oro del logo de TFT. Sobre #0A1428: 10,07:1 */ --color-oro-sombra: #D78C3A; /* parte baja del degradado del logo de TFT */ --color-oro-brillo: #FFE29A; /* brillo (marco oro del podio de la LHC) */ /* --- Color: metal del interfaz de TFT (marco: eyebrows, filetes, bordes) ---------- */ --color-titulo: #F0E6D2; /* Gold 1: h1-h4 y rótulos grandes. 14,83:1 */ --color-metal: #C8AA6E; /* Gold 3: eyebrows y filetes. 8,25:1 (vale para texto pequeño) */ --color-metal-sombra: #785A28; /* Gold 5: SOLO decorativo (2,88:1) */ --color-metal-brillo: var(--color-titulo); /* --- Color: escalera de rareza y estrellas (solo marcos y rellenos; ver §6.5) ----- */ --color-rareza-1: #808080; /* coste 1 · gris (reserva) */ --color-rareza-2: #11B288; /* coste 2 · verde: fase 1-1 */ --color-rareza-3: #207AC7; /* coste 3 · azul: fase 2-1. NUNCA con texto encima */ --color-rareza-4: #C440DA; /* coste 4 · morado: fase 4-2. NUNCA con texto encima ni de fondo */ --color-rareza-5: var(--color-oro); /* coste 5 · oro: Top 4 */ --color-estrella-bronce: #CD8B5A;/* racha 1 */ --color-estrella-plata: #C9D1DC; /* racha 2 (la 3 es --color-oro) */ --color-fuego-victoria: #FF5A1F; /* 4.ª ronda (03/10) · llama de la racha de VICTORIAS de TFT, rojo-naranja (la azul es la de derrotas). Sobre #0A1428: 5,89:1; sobre la tarjeta #0E1B32: 5,51:1. Solo relleno y halo, nunca texto */ --color-fuego-victoria-sombra: #E8341C; /* base roja de esa llama. Sobre #0A1428: 4,32:1; sobre #0E1B32: 4,04:1 (≥ 3:1 de gráfico, WCAG 1.4.11). Solo relleno */ --color-fatuo: #A4E5E9; /* turquesa de fuego fatuo (Set 18): partículas, nunca texto */ /* --- Color: intro v5 «Ahri» (Josema 03/10: fuera el azul de la intro; oro con magenta) ---- */ --color-magenta: #FF4FA3; /* magenta de Ahri: luces, chispas y grietas de la intro («¿Acertarás?», los botones y el rayo ya van en azul). Sobre #010A13: 6,4:1 */ --color-rosa: #FFB8E2; /* rosa claro: núcleo del fuego fatuo y brillos. Sobre #010A13: 12,9:1 */ --color-noche-morada: #12081A; /* fondo de placas y de la tapa de la carta en la intro */ --color-noche-morada-2: #24112F; /* parte alta de esas placas */ /* --- Color: texto sobre oscuro (sin cambio) --------------------------------------- */ --color-texto: #F5F8FA; /* 17,22:1 sobre #0A1428 */ --color-texto-2: #B8C7D1; /* 10,61:1 sobre #0A1428 */ --color-texto-3: #8FA3B0; /* 7,02:1 sobre #0A1428: metadatos y placeholders */ --color-texto-invertido: #0F2330;/* texto sobre teal (7,79:1), cyan (8,36:1) y oro (8,83:1) */ /* --- Color: estados ---------------------------------------------------------------- */ --color-error: #FF8A75; /* 8,00:1 sobre #0A1428 */ --color-error-fondo: rgba(255, 138, 117, 0.12); --color-exito: var(--color-teal); --color-aviso: var(--color-oro); --color-pendiente-fondo: #F5C542;/* : marcador de QA, no es el oro de diseño */ --color-pendiente-texto: #0F2330; /* --- Color: bordes y líneas ------------------------------------------------------- */ --color-borde: rgba(200, 170, 110, 0.3); /* filete metal tenue (decorativo) */ --color-borde-fuerte: rgba(200, 170, 110, 0.55);/* botón secundario: 3,30:1 sobre #0A1428 */ --color-borde-metal: rgba(200, 170, 110, 0.6); /* marco TFT de tarjeta y divisor: 3,58:1 sobre la tarjeta */ --color-borde-teal: rgba(48, 200, 192, 0.45); --color-borde-oro: rgba(248, 179, 63, 0.6); /* --- Degradados y luz ------------------------------------------------------------- */ --degradado-fondo: linear-gradient(180deg, var(--color-fondo-0) 0%, var(--color-fondo-1) 100%); --degradado-hero: linear-gradient(180deg, rgba(1, 10, 19, 0.35) 0%, rgba(1, 10, 19, 0.6) 55%, var(--color-fondo-1) 100%); --degradado-seccion: linear-gradient(180deg, var(--color-fondo-1) 0%, rgba(10, 20, 40, 0.72) 40%, rgba(10, 20, 40, 0.72) 60%, var(--color-fondo-1) 100%); --degradado-teal: linear-gradient(135deg, var(--color-teal) 0%, var(--color-cyan) 100%); --degradado-oro: linear-gradient(135deg, var(--color-oro-brillo) 0%, var(--color-oro) 50%, var(--color-oro-sombra) 100%); --degradado-metal: linear-gradient(180deg, var(--color-metal-brillo) 0%, var(--color-metal) 45%, var(--color-metal-sombra) 100%); --degradado-prismatico: linear-gradient(45deg, #F0EBFA, #EFF0A7, #9CFF9C, #BADCF5, #9072FA, #DBBBF8, #F0EBFA); --luz-teal: 0 0 24px rgba(48, 200, 192, 0.45), 0 0 64px rgba(0, 209, 194, 0.18); --luz-oro: 0 0 24px rgba(248, 179, 63, 0.45), 0 0 64px rgba(248, 179, 63, 0.18); /* --- Tipografía (autoalojada: assets/fonts/fonts.css) ----------------------------- */ --fuente-titulo: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif; /* titulares y CTA, 500–800 */ --fuente-cuerpo: 'Montserrat', 'Segoe UI', system-ui, -apple-system, sans-serif;/* cuerpo y UI, variable 400–900 */ --fuente-sello: 'Cinzel', 'Times New Roman', Georgia, serif; /* SOLO eyebrows y sellos, 700–900 */ --texto-xs: 0.75rem; /* 12 px: franja, notas legales */ --texto-s: 0.875rem; /* 14 px: ayudas, micro, metadatos */ --texto-m: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); /* 16–18 px: cuerpo */ --texto-l: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); /* 17–20 px: intros de sección */ --texto-xl: clamp(1.25rem, 1.1rem + 0.8vw, 1.625rem); /* 20–26 px: subtítulos */ --titulo-3: clamp(1.25rem, 1.1rem + 0.9vw, 1.75rem); /* h3 */ --titulo-2: clamp(2.125rem, 1.6rem + 2.6vw, 3.75rem); /* h2 · 4.ª ronda (Josema 03/10): +25 % (48 → 60 px a 1440; 29 → 35 px a 375). Antes: clamp(1.75rem, 1.35rem + 2vw, 3rem) */ --titulo-1: clamp(2.6rem, 1.6rem + 4.6vw, 5.3rem); /* h1 · 4.ª ronda: +25 % (68 → 85 px a 1440; 36 → 43 px a 375). Antes: clamp(2.125rem, 1.4rem + 3.6vw, 4.25rem) */ --rotulo-pelicula: clamp(1.5rem, 1.1rem + 2.4vw, 3rem); /* .film-msg y rótulos de la intro */ --eyebrow: clamp(0.6875rem, 0.62rem + 0.3vw, 0.8125rem); /* Cinzel, mayúsculas, tracking */ --eyebrow-seccion: clamp(1.25rem, calc((100vw - 2 * var(--gutter)) * 0.07), 2.4375rem); /* 5.ª ronda (Josema 03/10): rótulo de cabecera de sección al TRIPLE de --eyebrow (13 → 39 px; los 39 px, desde ≈ 610 px de pantalla). En móvil, el 7 % del ancho útil (24 px a 375; antes 11): al triple (33 px) los rótulos partían en 3–5 líneas */ --interlineado-titulo: 1.08; --interlineado-cuerpo: 1.6; --interlineado-eyebrow-seccion: 1.15; --tracking-eyebrow: 0.18em; --tracking-eyebrow-seccion: 0.04em; /* rótulo de sección hasta 1023 px (para que quepa en dos líneas); desde 1024 vuelve a --tracking-eyebrow */ --peso-titulo: 700; --peso-cta: 600; /* --- Espaciado (escala de 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-7: 3rem; --esp-8: 4rem; --esp-9: 6rem; --esp-10: 8rem; --seccion-y: clamp(3.5rem, 5vw + 1rem, 7rem); /* padding vertical de cada sección */ --gutter: clamp(1rem, 4vw, 2rem); /* margen lateral del contenedor (≥16 px en móvil) */ --ancho-max: 1200px; /* .container */ --ancho-max-ancho: 1440px; /* .container--ancho: hero y película */ --ancho-texto: 68ch; /* medida máxima de un párrafo */ --ancho-form: 640px; /* columna del formulario */ /* --- Medidas de componentes ------------------------------------------------------- */ --alto-nav: 64px; --alto-cta-fijo: 76px; /* barra fija móvil; scroll-padding-bottom la respeta */ --alto-btn: 52px; --alto-btn-s: 44px; --objetivo-min: 44px; /* objetivo táctil mínimo (WCAG 2.5.8 pide 24; aquí 44) */ --hex-s: 56px; /* hexágonos pequeños (clubes de la intro, avatares) */ --hex-m: 120px; /* fichas de la intro en móvil */ --hex-l: 200px; /* fichas de la intro en escritorio */ /* --- Radios ----------------------------------------------------------------------- */ --radio-s: 6px; --radio-m: 12px; --radio-l: 20px; --radio-xl: 28px; --radio-pill: 999px; /* --- Sombras ---------------------------------------------------------------------- */ --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.35); --sombra-2: 0 8px 24px rgba(0, 0, 0, 0.45), 0 24px 64px rgba(0, 0, 0, 0.35); --sombra-teal: 0 8px 24px rgba(48, 200, 192, 0.28); --sombra-oro: 0 8px 24px rgba(248, 179, 63, 0.28); /* --- Foco visible (WCAG 2.4.7 / 1.4.11): anillo oro sobre halo navy, ≥3:1 en todo fondo */ --anillo-foco: 0 0 0 3px var(--color-fondo-1), 0 0 0 6px var(--color-oro); --contorno-foco: 3px solid var(--color-oro); /* --- Movimiento ------------------------------------------------------------------- */ --dur-1: 160ms; --dur-2: 320ms; --dur-3: 640ms; --dur-4: 1200ms; --ease-salida: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-entrada: cubic-bezier(0.4, 0, 1, 1); --ease-rebote: cubic-bezier(0.34, 1.56, 0.64, 1); /* ≈ GSAP back.out(1.4) para CSS */ /* --- Capas (z-index), de abajo arriba --------------------------------------------- */ --z-fondo: -1; --z-base: 0; --z-contenido: 1; --z-elevado: 10; --z-nav: 100; --z-cta-fijo: 200; --z-cookies: 300; /* el banner no tapa el foco: se coloca sobre la barra fija, nunca sobre un campo activo */ --z-intro: 1000; --z-skip: 1100; /* --- Breakpoints (documentación: las media queries no admiten variables) ---------- --bp-xs: 480px móvil grande / apaisado --bp-s: 768px tablet vertical; ≤768 = hero 9:16 y juego de frames «frames-m» --bp-m: 1024px tablet apaisada / portátil pequeño; a partir de aquí, cierre a dos columnas --bp-l: 1280px escritorio --bp-xl: 1440px escritorio de referencia del encargo Mobile-first: siempre min-width. ------------------------------------------------ */ }