/* ============================================================= DESTINIO · allnewDestinio · Temas como selectores CSS v1.0 · Agencia Digital Grow · 2026-07-11 POR QUÉ EXISTE ESTE ARCHIVO theme.js aplica los temas escribiendo custom properties con JS. Eso ocurre DESPUÉS del primer paint → flash (FOUC). Aquí los mismos 4 temas se declaran como selectores [data-tema], para que el CSS los aplique SIN ESPERAR AL JS. El script inline del solo pone el atributo; el pintado lo hace este archivo. Los valores son EXACTAMENTE los de theme.js. Si cambia uno, cambian los dos. No los edites por separado. NO se toca tokens.css (está bajo aprobación de marca). ============================================================= */ html[data-tema="negro"]{ --bg:#08080d; --bg2:#0b0b12; --card:#12121b; --card2:#191924; --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.17); --tx:#ffffff; --tx2:#b0bcc9; --tx3:#7c8794; --brand:#10b981; --brand2:#2dd4bf; --on:#04120c; --amber:#f59e0b; --amberT:#f59e0b; --amberOn:#3a2600; --shadow:rgba(0,0,0,.5); } html[data-tema="blanco"]{ --bg:#ffffff; --bg2:#f5f8fa; --card:#f7f9fb; --card2:#eef2f6; --line:rgba(15,36,56,.11); --line2:rgba(15,36,56,.22); /* tx3 (captions) oscurecido: #7b8a9b daba 3.44 sobre blanco. Ahora 4.79. */ --tx:#0f2438; --tx2:#44566a; --tx3:#647486; /* ⚠ CONTRASTE MEDIDO, NO ESTIMADO. El botón primario es un degradado brand → brand2, así que manda el punto MÁS CLARO. #0d9268 / #0aa87a daban 3.94 y 3.05 contra el texto blanco: los dos por debajo de AA (4.5). Ahora: 5.13 y 4.68. ⚠ Estos valores DEBEN coincidir con theme.js. Si divergen, hay flash de color. */ --brand:#0a7d59; --brand2:#088463; --on:#ffffff; --amber:#f59e0b; --amberT:#a35b06; --amberOn:#3a2600; --shadow:rgba(15,36,56,.14); } html[data-tema="crema"]{ --bg:#faf4e8; --bg2:#f4ead6; --card:#fffdf7; --card2:#f7f0e2; --line:rgba(61,52,35,.13); --line2:rgba(61,52,35,.24); /* tx3: #8a7f68 daba 3.61 sobre crema. Ahora 5.24. */ --tx:#332c1f; --tx2:#5c5340; --tx3:#6f6552; /* ⚠ brand2 tiene DOS trabajos: es el extremo claro del degradado del botón (texto blanco encima) Y el color del texto del kicker (fondo claro detrás). Tiene que pasar AA en los dos sentidos a la vez. #088463 pasaba el botón (4.68) pero fallaba como texto sobre crema (4.27). #077a5c pasa ambos: 5.32 contra el blanco del botón, 4.86 como texto sobre el fondo. */ --brand:#097453; --brand2:#077a5c; --on:#ffffff; /* ⚠ CREMA = tema de mayor riesgo: fondo cálido + ámbar cálido. El ámbar de texto va OSCURO. Nunca el ámbar puro sobre crema. */ --amber:#c97a06; --amberT:#8a5304; --amberOn:#ffffff; --shadow:rgba(61,52,35,.14); } html[data-tema="rosa"]{ --bg:#fff6f9; --bg2:#fbe9f0; --card:#ffffff; --card2:#fdeef3; --line:rgba(70,25,45,.12); --line2:rgba(70,25,45,.24); /* tx3: #9c7686 daba 3.05 sobre rosa. Ahora 5.52. */ --tx:#3d1c2c; --tx2:#6b4356; --tx3:#82596b; /* #d6336c fallaba como TEXTO sobre el fondo rosa (4.35). #c92a60 pasa en los dos sentidos: 5.27 contra el blanco del botón, 4.97 como texto. */ --brand:#bd2557; --brand2:#c92a60; --on:#ffffff; --amber:#c97a06; --amberT:#8a5304; --amberOn:#ffffff; --shadow:rgba(70,25,45,.14); }