/* ============================================================ Variables de tema (modo claro / oscuro) Especialidad Informática — ITS Pereira Paleta: azules informáticos + verde institucional del escudo. Los tokens semánticos (--color-*) son los que usa styles.css; la paleta cruda solo se referencia desde aquí. Contrastes verificados WCAG 2.1 AA (mínimo 4.5:1 en texto). ============================================================ */ :root { /* Paleta institucional */ --azul-profundo: #0d47a1; --azul-medio: #1976d2; --azul-claro: #42a5f5; --verde-escudo: #008f39; /* Tokens semánticos — MODO CLARO */ --color-fondo: #f4f7fb; --color-superficie: #ffffff; --color-superficie-alt: #e8f0fe; --color-texto: #18202b; --color-texto-suave: #46535f; --color-enlace: #1565c0; /* 5.4:1 sobre fondo claro */ --color-acento: var(--azul-medio); --color-acento-fuerte: var(--azul-profundo); --color-verde-texto: #00702d; /* 6.2:1 sobre blanco */ --color-verde-acento: var(--verde-escudo); --color-borde: #d4deea; --color-foco: var(--azul-profundo); /* Puente hacia Bootstrap */ --bs-body-bg: var(--color-fondo); --bs-body-color: var(--color-texto); --bs-link-color: var(--color-enlace); --bs-link-hover-color: var(--color-acento-fuerte); /* ======================================================== Rediseño visual (Fase 1) — tokens nuevos, MODO CLARO Ratios calculados sobre superficie #ffffff salvo nota. ======================================================== */ /* --- Acentos por programa (componentes ≥3:1, texto ≥4.5:1) --- */ --prog-mantenimiento: #0d47a1; /* 8.63:1 — sirve como texto */ --prog-mantenimiento-texto: #0d47a1; /* 8.63:1 */ --prog-web: #0277bd; /* 4.8:1 — sirve como texto */ --prog-web-texto: #01579b; /* 7.4:1 */ --prog-grafico: #00796b; /* 5.32:1 — sirve como texto */ --prog-grafico-texto: #00695c; /* 6.61:1 */ --prog-exploracion: #008f39; /* 4.21:1 — SOLO componentes/iconos */ --prog-exploracion-texto: #00702d; /* 6.26:1 */ /* --- Duotonos planos (acento al 12% sobre blanco, precalculados; texto #18202b sobre cada tinte ≥13.4:1) --- */ --duo-mantenimiento: #e2e9f4; --duo-web: #e1eff7; --duo-grafico: #e0efed; --duo-exploracion: #e0f2e7; /* --- Tipografía display (tamaño fluido móvil → escritorio) --- */ --texto-display-1: clamp(2.1rem, 1.2rem + 3.5vw, 3.4rem); --texto-display-2: clamp(1.5rem, 1.1rem + 1.8vw, 2.2rem); --texto-dato: clamp(1.8rem, 1.3rem + 2vw, 2.6rem); /* cifras destacadas */ --peso-display: 800; --interletra-display: -0.02em; /* --- Claymorphism --- Sombra exterior teñida (decorativa) + doble inset que da el volumen de arcilla. El borde es transparente en claro: el volumen se lee por las sombras. */ --radio-clay: 1.75rem; --radio-clay-chico: 1rem; --sombra-clay: 0 10px 26px rgba(13, 71, 161, 0.14), inset 2px 2px 6px rgba(255, 255, 255, 0.9), inset -3px -3px 8px rgba(13, 71, 161, 0.08); --sombra-clay-hundida: 0 4px 12px rgba(13, 71, 161, 0.10), inset 3px 3px 8px rgba(13, 71, 161, 0.12), inset -2px -2px 6px rgba(255, 255, 255, 0.7); --borde-clay: 1px solid transparent; /* Tintes para teñir la sombra exterior por programa (Fase 3) */ --tinte-sombra-mantenimiento: rgba(13, 71, 161, 0.18); --tinte-sombra-web: rgba(2, 119, 189, 0.18); --tinte-sombra-grafico: rgba(0, 121, 107, 0.18); --tinte-sombra-exploracion: rgba(0, 143, 57, 0.18); /* --- Movimiento (toda animación usa estos tokens) --- */ --duracion-rapida: 150ms; --duracion-media: 320ms; --curva-arcilla: cubic-bezier(0.34, 1.4, 0.64, 1); /* rebote blando */ } [data-bs-theme="dark"] { /* Tokens semánticos — MODO OSCURO */ --color-fondo: #0d1117; --color-superficie: #161b27; --color-superficie-alt: #1c2433; --color-texto: #e6edf3; --color-texto-suave: #a8b3c1; --color-enlace: #64b5f6; /* 8:1 sobre fondo oscuro */ --color-acento: #64b5f6; --color-acento-fuerte: #90caf9; --color-verde-texto: #3fd06c; /* 8.4:1 sobre superficie oscura */ --color-verde-acento: #3fd06c; --color-borde: #2b3648; --color-foco: #64b5f6; --bs-body-bg: var(--color-fondo); --bs-body-color: var(--color-texto); --bs-link-color: var(--color-enlace); --bs-link-hover-color: var(--color-acento-fuerte); /* ======================================================== Rediseño visual (Fase 1) — tokens nuevos, MODO OSCURO Ratios calculados sobre superficie #161b27. ======================================================== */ /* --- Acentos por programa (todos sirven como texto: ≥7:1) --- */ --prog-mantenimiento: #64b5f6; /* 7.77:1 */ --prog-mantenimiento-texto: #64b5f6; --prog-web: #4dd0e1; /* 9.36:1 */ --prog-web-texto: #4dd0e1; --prog-grafico: #4db6ac; /* 7.05:1 */ --prog-grafico-texto: #4db6ac; --prog-exploracion: #3fd06c; /* 8.56:1 */ --prog-exploracion-texto: #3fd06c; /* --- Duotonos (acento al 15% sobre #161b27, precalculados; texto #e6edf3 sobre cada tinte ≥10.6:1) --- */ --duo-mantenimiento: #223246; --duo-web: #1e3643; --duo-grafico: #1e323b; --duo-exploracion: #1c3631; /* --- Claymorphism en oscuro --- La sombra exterior no se percibe sobre fondo oscuro: el volumen sale de las dos inset + un borde 1px más claro que la superficie. */ --sombra-clay: 0 8px 20px rgba(0, 0, 0, 0.35), inset 2px 2px 6px rgba(230, 237, 243, 0.07), inset -3px -3px 8px rgba(0, 0, 0, 0.45); --sombra-clay-hundida: 0 3px 10px rgba(0, 0, 0, 0.3), inset 3px 3px 8px rgba(0, 0, 0, 0.5), inset -2px -2px 6px rgba(230, 237, 243, 0.05); --borde-clay: 1px solid #344157; /* volumen perceptible sin sombra */ --tinte-sombra-mantenimiento: rgba(0, 0, 0, 0.35); --tinte-sombra-web: rgba(0, 0, 0, 0.35); --tinte-sombra-grafico: rgba(0, 0, 0, 0.35); --tinte-sombra-exploracion: rgba(0, 0, 0, 0.35); }