/* ==================================================================== DEEPTALENT — TEMA OFICIAL DEL SITIO ==================================================================== Este archivo es la ÚNICA fuente de verdad para los colores de todo el sitio (landing, páginas de /soluciones, política de datos y la herramienta /deeptalent). Cualquier pantalla nueva debe: 1. Enlazar este archivo en el : 2. Usar únicamente las variables semánticas de abajo (var(--color-*)). Nunca pegar un código hexadecimal suelto en un componente nuevo. La paleta base ("--palette-*") son los 7 colores de marca. No se deben usar directamente en componentes: siempre a través de una variable semántica, para que un cambio de marca futuro solo requiera tocar este archivo. El azul oscuro (--palette-navy / --palette-teal) es el color predominante del sitio (fondos, header, navbar, footer, secciones grandes); el resto de la paleta son SOLO acentos (botones, links, iconos, bordes) — nunca deben usarse como fondo principal de una sección. TABLA DE USO (variable semántica → dónde se usa) -------------------------------------------------------------------- --color-bg Fondo principal de la página (predominante). --color-bg-secondary Fondo de secciones secundarias / footer. --color-surface Fondo de tarjetas y paneles (tinte translúcido sobre --color-bg, nunca un color sólido). --color-surface-strong Igual que --color-surface pero para hover. --color-border Bordes y líneas divisorias sutiles. --color-border-strong Bordes activos (hover / foco de inputs). --color-text Texto principal (párrafos, cuerpo). --color-text-muted Texto secundario (subtítulos, hints). --color-text-faint Texto terciario (metadatos, timestamps). --color-heading Encabezados (h1/h2/h3). --color-icon Iconos, puntos decorativos, divisores. --color-accent FONDO de botones de acción / CTA / insignias sólidas (nunca como color de texto plano sobre --color-bg — ver --color-accent-readable). --color-accent-2 Segundo tono para degradados con --color-accent y hover de botones. --color-accent-text Color de texto/iconos SOBRE un fondo de --color-accent sólido (ej. texto de botón). --color-accent-readable Variante de --color-accent AJUSTADA para usarse como TEXTO sobre --color-bg/--color-bg-secondary (eyebrow, "accent" en títulos, hover de links). --color-accent en crudo no alcanza 4.5:1 como texto sobre un fondo tan oscuro; esta variante sí — úsala siempre que el acento sea texto, no relleno. --color-accent-soft Fondo suave de insignias/iconos (ej. eyebrow). --color-accent-soft-border Borde de esas mismas insignias/iconos. --color-nav-bg Fondo del navbar (fijo, no cambia con el modo claro/oscuro — así lo pidió la marca). --color-nav-text Texto principal del navbar (fijo). --color-nav-muted Texto secundario del navbar (fijo, ej. links inactivos) — NUNCA uses --color-text-muted aquí: ese token cambia con el tema y en modo claro se vuelve casi invisible sobre el navbar, que siempre es oscuro. --color-nav-accent Acento como TEXTO/ícono sobre el navbar (fijo) — mismo motivo: --color-accent-readable cambia con el tema y deja de tener contraste aquí en modo claro. --color-footer-bg Fondo del footer (fijo, igual que el navbar). --color-footer-text Texto principal del footer (fijo). --color-footer-muted Texto secundario del footer (fijo) — mismo motivo que --color-nav-muted. --color-footer-faint Texto terciario del footer (fijo, ej. el copyright) — mismo motivo. --color-footer-accent Acento como texto sobre el footer (fijo, ej. hover de links) — mismo motivo que --color-nav-accent. --color-focus Color de contorno de foco (accesibilidad) — siempre el beige, para que el foco sea visible incluso donde los acentos no lo son. --color-paper Fondo de "tarjetas de documento" (looks de papel: política de datos, CV generado). Siempre claro, fijo, sin importar el tema. --color-paper-text Texto principal sobre --color-paper. --color-paper-text-muted Texto secundario sobre --color-paper. --color-paper-accent-bg Fondo de botón primario sobre --color-paper. --color-paper-accent-text Texto de ese botón primario. --color-paper-border Bordes sobre --color-paper. --color-danger Estados de error (NO es parte de la paleta de marca: los 7 colores oficiales no incluyen un rojo, así que este es un color utilitario reservado solo para mensajes de error e iconos de documento). --color-danger-bg Fondo de mensajes de error. --color-danger-border Borde de mensajes de error. --color-danger-text Texto de mensajes de error (varía por tema para mantener contraste AA sobre --color-bg). CONTRASTE VERIFICADO (WCAG AA, ratio ≥ 4.5:1 para texto normal) -------------------------------------------------------------------- Esta paleta es MUCHO más oscura que la anterior (fondo casi negro, --palette-navy tiene una luminancia de ~0.007). Los 4 colores de acento (#305B7E, #864C2C, #6E3115, #4F210D) son en sí mismos demasiado oscuros para usarse como TEXTO plano sobre un fondo así de oscuro — el mejor de los cuatro solo llega a ~2.6:1. Por eso: - Se usan como FONDO SÓLIDO (botones, insignias) con texto beige encima, donde sí funcionan de sobra: --color-accent (terracota) + --color-accent-text (beige) → 4.8:1 - Cuando el acento debe verse como TEXTO/ícono directamente sobre --color-bg o --color-bg-secondary, se usa --color-accent-readable (una mezcla más clara de la terracota) en vez del acento crudo: --color-accent-readable + --color-bg (navy) → 7.0:1 --color-accent-readable + --color-bg-secondary (teal) → 4.7:1 - --color-bg (navy) + --color-text (beige) → 13.0:1 - --color-bg-secondary/--color-footer-bg (teal) + --color-footer-text (beige) → 8.7:1 - modo claro: --color-bg (blanco azulado) + --color-text (marrón) → 12.0:1 - --color-focus (beige) sobre --color-bg (navy) → 13.0:1 --color-icon (azul medio) y --color-border/--color-border-strong NUNCA se usan como color sólido detrás de texto de párrafo — solo como ícono, tinte translúcido, borde o divisor (ahí el estándar es más laxo y no exige 4.5:1). ==================================================================== */ :root{ /* Paleta de marca — no usar directamente, ver variables semánticas */ --palette-navy:#071524; --palette-teal:#1E3653; --palette-medium-blue:#305B7E; --palette-beige:#F0D4BF; --palette-terracotta:#864C2C; --palette-accent-brown:#6E3115; --palette-deep-brown:#4F210D; /* Blanco azulado — solo para el fondo del modo claro (ver --color-bg en :root[data-theme="light"]). Derivado del azul de marca, no un color suelto. */ --palette-frost:color-mix(in srgb, #ffffff 92%, var(--palette-medium-blue) 8%); /* Tokens no relacionados con color (compartidos por todas las páginas) */ --radius-sm:10px; --radius:18px; --radius-lg:28px; --ease:cubic-bezier(.16,.8,.24,1); --shadow-card:0 1px 0 rgba(255,255,255,0.04) inset; /* ---- Semántico: tema oscuro (por defecto, el predominante del sitio) ---- */ --color-bg:var(--palette-navy); --color-bg-secondary:var(--palette-teal); --color-surface:rgba(48,91,126,0.07); --color-surface-strong:rgba(48,91,126,0.13); --color-border:rgba(79,33,13,0.45); --color-border-strong:rgba(48,91,126,0.6); --color-text:var(--palette-beige); --color-text-muted:rgba(240,212,191,0.72); --color-text-faint:rgba(240,212,191,0.5); --color-heading:var(--palette-beige); --color-icon:var(--palette-medium-blue); --color-accent:var(--palette-terracotta); --color-accent-2:var(--palette-accent-brown); --color-accent-text:var(--palette-beige); --color-accent-readable:color-mix(in srgb, var(--palette-terracotta) 45%, var(--palette-beige) 55%); --color-accent-soft:rgba(134,76,44,0.14); --color-accent-soft-border:rgba(134,76,44,0.35); --color-focus:var(--palette-beige); /* Navbar / footer: fijos, no cambian con el toggle claro/oscuro */ --color-nav-bg:rgba(7,21,36,0.85); --color-nav-text:var(--palette-beige); --color-nav-muted:rgba(240,212,191,0.72); --color-nav-accent:color-mix(in srgb, var(--palette-terracotta) 45%, var(--palette-beige) 55%); --color-footer-bg:var(--palette-teal); --color-footer-text:var(--palette-beige); --color-footer-muted:rgba(240,212,191,0.72); --color-footer-faint:rgba(240,212,191,0.5); --color-footer-accent:color-mix(in srgb, var(--palette-terracotta) 45%, var(--palette-beige) 55%); /* "Papel" (documentos / CV generado): siempre claro, fijo */ --color-paper:var(--palette-beige); --color-paper-text:var(--palette-deep-brown); --color-paper-text-muted:rgba(79,33,13,0.65); --color-paper-accent-bg:var(--palette-navy); --color-paper-accent-text:var(--palette-beige); --color-paper-border:rgba(79,33,13,0.14); /* Utilitario — fuera de la paleta de marca, solo para errores */ --color-danger:#B23B3B; --color-danger-bg:rgba(178,59,59,0.1); --color-danger-border:rgba(178,59,59,0.35); --color-danger-text:#F2A6A6; color-scheme:dark; } /* ---- Semántico: tema claro ---- El azul oscuro sigue siendo predominante incluso aquí: nav/footer no cambian, y el único fondo que sí aclara es el de la página (un blanco azulado, --palette-frost, en vez del beige — el beige se reserva para --color-paper y los acentos). */ :root[data-theme="light"]{ --color-bg:var(--palette-frost); --color-bg-secondary:color-mix(in srgb, var(--palette-frost) 88%, var(--palette-navy) 12%); --color-surface:rgba(79,33,13,0.05); --color-surface-strong:rgba(79,33,13,0.09); --color-border:rgba(79,33,13,0.16); --color-border-strong:rgba(48,91,126,0.35); --color-text:var(--palette-deep-brown); --color-text-muted:rgba(79,33,13,0.72); --color-text-faint:rgba(79,33,13,0.5); --color-heading:var(--palette-deep-brown); --color-icon:var(--palette-medium-blue); --color-accent:var(--palette-terracotta); --color-accent-2:var(--palette-accent-brown); --color-accent-text:var(--palette-beige); --color-accent-readable:var(--palette-terracotta); --color-focus:var(--palette-deep-brown); /* Navbar / footer se mantienen oscuros incluso en modo claro — mismos valores fijos que en el tema oscuro, no re-derivados. */ --color-nav-bg:rgba(7,21,36,0.9); --color-nav-text:var(--palette-beige); --color-nav-muted:rgba(240,212,191,0.72); --color-nav-accent:color-mix(in srgb, var(--palette-terracotta) 45%, var(--palette-beige) 55%); --color-footer-bg:var(--palette-teal); --color-footer-text:var(--palette-beige); --color-footer-muted:rgba(240,212,191,0.72); --color-footer-faint:rgba(240,212,191,0.5); --color-footer-accent:color-mix(in srgb, var(--palette-terracotta) 45%, var(--palette-beige) 55%); --color-danger-text:#8C2F2F; color-scheme:light; }