/* ═══════════════════════════════════════════════════════════════ TOKENS.css — LA PALANCA DE COLOR DEL MOLDE Este es el archivo que tienes que tocar para cambiar la identidad visual del sitio entero. Cambia un valor de aqui y cambia en las seis paginas a la vez. Se carga al FINAL del de cada pagina, a proposito: es la ultima hoja de estilo, asi que sus valores ganan sobre el tema. ─── PALETA ACTUAL: verde de marca ─────────────────────────────── Los dos colores base salen del logo (MGI_green_pos_rgb_20.svg): · #055A60 teal oscuro — la palabra del logo · #7EBD5F verde hoja — el simbolo del logo OJO CON EL VERDE HOJA: sobre blanco da 2.25:1 de contraste y el minimo legible es 4.5:1. Por eso NO se usa para texto. El reparto de papeles es: · Texto, titulos y enlaces -> teal #055A60 (7.96:1) · Rellenos, iconos, simbolo -> verde hoja #7EBD5F (solo forma) · Texto o boton que deba ser VERDE -> #3F7A26 (5.22:1) · Fondos oscuros (hero/pie) -> teal profundo #03383C Los nombres de las variables siguen diciendo "navy" y "celeste" porque vienen del molde original y renombrarlos obligaria a tocar mas de 60 sitios sin ganar nada. Lee el comentario, no el nombre. Lo que NO esta aqui: el blanco (#fff) y el negro puros, que se dejaron literales porque no son colores de marca. ═══════════════════════════════════════════════════════════════ */ :root { /* ── MARCA ── */ --marca-navy: #055A60; /* TEAL principal. El color de la marca: textos, titulos, fondos. (27 usos) */ --marca-navy-alt: #055A60; /* Igual que el anterior (en el original eran #002169 y #012169, 1 punto de diferencia). (23 usos) */ --marca-navy-oscuro: #03383C; /* Teal profundo, para hero, pie y degradados. (1 usos) */ --marca-celeste: #3F7A26; /* Verde de acento LEGIBLE: enlaces, botones con texto blanco. (22 usos) */ --marca-celeste-claro: #7EBD5F; /* Verde hoja del logo: rellenos SVG, iconos, simbolo. Nunca texto. (16 usos) */ --marca-celeste-boton: #3F7A26; /* Verde del boton del popup (lleva texto blanco encima). (3 usos) */ /* ── TEXTO ── (mismos grises del molde, re-tenidos de azul a teal) */ --texto-suave: #5A8083; /* Parrafos y texto secundario. (14 usos) */ --texto-medio: #4D6F72; /* Texto de apoyo. (5 usos) */ --texto-tenue: #699DA1; /* Etiquetas y pies. (7 usos) */ --texto-tenue-2: #6D9EA2; /* Variante de etiquetas. (6 usos) */ --texto-claro: #79AAAD; /* Texto muy tenue. (4 usos) */ /* ── FONDOS Y BORDES ── */ --fondo-suave: #F7FBFB; /* Fondo de secciones alternas. (8 usos) */ --fondo-azulado: #EBF6F7; /* Fondo de tarjetas destacadas. (4 usos) */ --borde: #D8E5E6; /* Bordes y separadores. (4 usos) */ --borde-suave: #E6EDEE; /* Bordes mas tenues. (4 usos) */ /* ── ESTADO ── */ /* El verde de exito se movio a esmeralda (tono 155) para que NO se confunda con el verde de marca (tono 100). Antes eran casi iguales. */ --exito: #0F9D63; /* Verde de confirmacion. (4 usos) */ --exito-oscuro: #0B7F50; /* Verde presionado. (4 usos) */ --error: #E5484D; /* Rojo de error. Sin cambio. (3 usos) */ /* ── TIPOGRAFIA ── */ --fuente-base: 'Poppins', sans-serif; /* Fuente de todo el sitio: parrafos, menus, botones. */ --fuente-hero: "Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif; /* Fuente del banner TM7 (hero de la portada). */ --fuente-serif: 'Georgia', 'Times New Roman', serif; /* Numeros grandes y titulares del bloque de estadisticas. */ --fuente-titulo-globo: 'Playfair Display', 'Poppins', serif; /* Titulos de las tarjetas del globo. OJO: Playfair no se carga, cae a Poppins. */ --fuente-mono: 'JetBrains Mono', monospace; /* Cifras del globo. OJO: JetBrains no se carga, cae al monospace del sistema. */ /* ═══════════════════════════════════════════════════════════════ PUENTE AL TEMA — no borrar El tema (assets/temp/css/frontend_style_blue.css) tiene su propia lista de colores en su :root, y de ahi salen 210 usos: cabecera, pie, botones, fondos de seccion. Antes vivia aparte, asi que cambiar este archivo dejaba medio sitio del color viejo. Estas lineas la conectan: como TOKENS.css carga DESPUES del tema, estos valores ganan y el tema pasa a obedecer a las variables de arriba. Ahora si, cambiar la marca es cambiar SOLO este archivo. ═══════════════════════════════════════════════════════════════ */ --color-primary: var(--marca-celeste); /* acento del tema (76 usos) */ --color-dark: var(--marca-navy); /* oscuro del tema (56 usos) */ --color-primary-blue: var(--marca-navy); /* hover oscuro de primary */ --color-dark-blue-1: rgba(5, 90, 96, 0.9); /* overlay del hero */ --color-dark-blue-2: var(--marca-navy); /* fondo del pie */ --color-primary-light: rgba(126, 189, 95, 0.15); /* tinte suave del acento */ --color-black: var(--marca-navy); /* titulares sobre blanco */ --color-grey: var(--marca-navy); /* texto body sobre blanco */ --color-grey-1: rgba(5, 90, 96, 0.9); /* texto descriptivo */ --color-grey-2: rgba(5, 90, 96, 0.2); /* separadores sutiles */ --color-light: var(--fondo-suave); /* fondo claro del tema */ }