/* ══════════════════════════════════════════════════════════════════ TOKENS · Jose Rabadán Psicología Paleta y escala del rediseño de agosto de 2026. Los ratios anotados están calculados según WCAG 2.1 sobre el fondo que se indica. Ver docs/contraste.md para la tabla completa. ══════════════════════════════════════════════════════════════════ */ :root { /* ── Marca ───────────────────────────────────────────── */ --verde-marca: #A2AC8E; /* 2.1 · verde del logotipo, medido del original. Nunca como color de texto; con --tinta encima da 7.47. */ --beige-base: #F3F1EA; /* fondo de página */ --superficie: #FFFFFF; /* tarjetas, pie y campos */ /* ── Tinta ───────────────────────────────────────────── */ --tinta: #17181A; /* 15.72 sobre beige · titulares */ --tinta-cuerpo: #4A4944; /* 7.98 sobre beige · texto corrido */ --tinta-tenue: #635F55; /* 5.63 sobre beige · antetítulos y metadatos */ /* El valor original del diseño para --tinta-tenue era #726F66, que da 4.44 sobre el beige y 3.75 sobre los fondos teñidos: no llega a AA en ninguno de los dos. Se ha oscurecido a #635F55, que pasa 4.75 en el teñido más claro y mantiene el mismo carácter gris cálido. */ /* ── Filetes ─────────────────────────────────────────── */ --linea: #DEDAD0; /* separadores decorativos */ --linea-fuerte: #8C8879; /* 3.14 · bordes de campos y controles */ /* ── Áreas · fondo macizo (nunca como color de texto) ── */ --area-familias: #C5B8A8; /* con --tinta 9.13 */ --area-terapia: #8FA4AD; /* con --tinta 6.84 */ --area-formacion: #C7AA68; /* con --tinta 7.93 */ --area-centros: #B98272; /* con --tinta 5.50 */ --area-organizaciones: #2F5561; /* con --tinta 2.19 ✗ → texto en blanco (8.10) */ /* ── Áreas · variante de texto, enlaces e iconos ─────── */ --area-familias-texto: #6B5D4C; /* 5.64 sobre beige · AA ✓ */ --area-terapia-texto: #4C626B; /* 5.69 sobre beige · AA ✓ */ --area-formacion-texto: #755D26; /* 5.55 sobre beige · AA ✓ */ --area-centros-texto: #8A4A38; /* 5.96 sobre beige · AA ✓ */ --area-organizaciones-texto: #2F5561; /* 7.17 sobre beige · AA ✓ */ /* El valor original del diseño para formación era #7A6128: sobre su propio teñido al 12 % daba 4.46 y se quedaba a un pelo de AA. #755D26 sube a 4.71 sin cambiar el tono percibido. */ --verde-texto: #2E4A46; /* 8.51 sobre beige · acento de portada y legales */ /* ══════════════════════════════════════════════════════ TEMATIZACIÓN POR ÁREA Los componentes usan --acento / --acento-sobre / --acento-suave, jamás un hexadecimal literal ni un token de área directamente. La portada no lleva data-area: hereda el verde de marca. IMPORTANTE · por qué --acento-suave se repite en cada bloque. Los var() anidados dentro de una custom property se sustituyen en el elemento donde la propiedad se DECLARA, no donde se usa. Si la mezcla se declarase solo aquí, en :root (es decir, en ), quedaría congelada con el acento de portada, y la redefinición posterior en body[data-area="…"] no tendría ningún efecto. Por eso cada área vuelve a declarar la mezcla junto a su propio --acento. ══════════════════════════════════════════════════════ */ --acento: var(--verde-texto); --acento-sobre: #FFFFFF; /* blanco sobre --acento: 6.27–9.61 · AA ✓ */ --acento-suave: color-mix(in srgb, var(--acento) 12%, var(--beige-base)); --acento-solido: var(--verde-marca); /* solo decorativo fuera de un área */ --solido-sobre: var(--tinta); /* ══════════════════════════════════════════════════════ TIPOGRAFÍA Autoalojada. Ver fonts/LEEME.md. ══════════════════════════════════════════════════════ */ --tipo-titulo: 'Playfair Display', Georgia, 'Times New Roman', serif; --tipo-texto: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* Escala fluida */ --texto-xs: 0.78rem; /* antetítulos en versal */ --texto-s: 0.85rem; --texto-m: 0.9rem; /* navegación, notas, pie */ --texto: 1rem; /* cuerpo */ --texto-l: 1.1rem; --texto-xl: 1.15rem; /* entradilla de portada */ --titulo-portada: clamp(2.2rem, 1.7rem + 2.5vw, 3.4rem); --titulo-servicio: clamp(2.1rem, 1.7rem + 2vw, 3.1rem); --titulo-legal: clamp(2.3rem, 1.75rem + 2.75vw, 3.8rem); --seccion-portada: clamp(1.8rem, 1.5rem + 1.5vw, 2.6rem); --seccion-interior:clamp(1.7rem, 1.4rem + 1.3vw, 2.3rem); --seccion-legal: clamp(1.5rem, 1.32rem + 0.9vw, 2rem); --titulo-tarjeta: 1.3rem; --titulo-ficha: 1.2rem; --titulo-menor: 1.1rem; --interlineado-titulo: 1.2; --interlineado-texto: 1.65; --medida: 68ch; /* ══════════════════════════════════════════════════════ ESPACIADO ══════════════════════════════════════════════════════ */ --e-1: 0.25rem; --e-2: 0.5rem; --e-3: 0.75rem; --e-4: 1rem; --e-5: 1.5rem; --e-6: 2rem; --e-7: 2.5rem; --e-8: 3rem; --e-9: 3.5rem; --ancho-pagina: 72rem; --ancho-texto: 46rem; --ancho-estrecho: 44rem; /* El rediseño trabaja con esquinas casi rectas: la jerarquía se resuelve con espacio en blanco y filetes, no con radios ni sombras. */ --radio: 2px; --transicion: 160ms ease; } /* ══════════════════════════════════════════════════════════════════ ÁREAS Se aplican en (página de servicio) y también en cualquier elemento suelto, como las tarjetas de la portada. ══════════════════════════════════════════════════════════════════ */ [data-area="familias"] { --acento: var(--area-familias-texto); --acento-solido: var(--area-familias); --acento-sobre: #FFFFFF; /* 6.37 · AA ✓ */ --acento-suave: color-mix(in srgb, var(--acento) 12%, var(--beige-base)); --solido-sobre: var(--tinta); /* 9.13 · AA ✓ */ } [data-area="terapia"] { --acento: var(--area-terapia-texto); --acento-solido: var(--area-terapia); --acento-sobre: #FFFFFF; /* 6.43 · AA ✓ */ --acento-suave: color-mix(in srgb, var(--acento) 12%, var(--beige-base)); --solido-sobre: var(--tinta); /* 6.84 · AA ✓ */ } [data-area="formacion"] { --acento: var(--area-formacion-texto); --acento-solido: var(--area-formacion); --acento-sobre: #FFFFFF; /* 6.27 · AA ✓ */ --acento-suave: color-mix(in srgb, var(--acento) 12%, var(--beige-base)); --solido-sobre: var(--tinta); /* 7.93 · AA ✓ */ } [data-area="centros"] { --acento: var(--area-centros-texto); --acento-solido: var(--area-centros); --acento-sobre: #FFFFFF; /* 6.74 · AA ✓ */ --acento-suave: color-mix(in srgb, var(--acento) 12%, var(--beige-base)); --solido-sobre: var(--tinta); /* 5.50 · AA ✓ */ } /* #2F5561 con --tinta da 2.19 y no cumple AA: el texto sobre el bloque macizo de organizaciones va obligatoriamente en blanco (8.10). */ [data-area="organizaciones"] { --acento: var(--area-organizaciones-texto); --acento-solido: var(--area-organizaciones); --acento-sobre: #FFFFFF; /* 8.10 · AA ✓ */ --acento-suave: color-mix(in srgb, var(--acento) 12%, var(--beige-base)); --solido-sobre: #FFFFFF; /* 8.10 · AA ✓ */ } /* ══════════════════════════════════════════════════════════════════ REGLA DE ACCESIBILIDAD SOBRE FONDO TEÑIDO (--acento-suave, 12 %) Sobre el teñido solo se admiten: --tinta 12.97–13.45 ✓ --tinta-cuerpo 6.58–6.83 ✓ --tinta-tenue 4.75–4.82 ✓ (con el valor corregido #635F55) --acento 4.71–7.02 ✓ (con formación corregido a #755D26) ══════════════════════════════════════════════════════════════════ */