/* ============================================================ TEMA CLARO — se activa con data-theme="light" en Los colores salen del generador de la skill (estilo corporativo, mismo azul de marca y mismo verde de acento) y están verificados en WCAG AA sobre fondo claro: texto 16.4:1 · texto suave 6.7:1 · azul 4.5:1 · verde 4.8:1 Lo único que cambia respecto al oscuro, además del color, es la LUZ: en claro las sombras son suaves y grises, y el neón se apaga — un glow sobre blanco se ve sucio, no premium. ============================================================ */ :root[data-theme="light"] { --bg: #F4F7FD; /* azul clarísimo: nunca blanco puro de fondo */ --bg-2: #FFFFFF; --bg-3: #FFFFFF; --surface: #FFFFFF; --line: rgba(26,32,40,0.14); --line-soft: rgba(26,32,40,0.08); --text: #1A2028; --text-soft: #4E5D74; --text-dim: #7A889F; --brand: #2B7FFF; --brand-deep: #0C6DFF; --brand-2: #1F5FD0; --brand-on: #FFFFFF; --accent: #00C58F; --accent-deep: #00825F; --accent-on: #FFFFFF; --ok: #17843F; --warn: #A56A07; --danger: #D91414; /* Luz de día: sombras cortas y grises, relieve suave, sin glow de neón */ --lift-1: 0 1px 2px rgba(20,32,60,.06), 0 2px 8px rgba(20,32,60,.06); --lift-2: 0 1px 2px rgba(20,32,60,.07), 0 6px 18px rgba(20,32,60,.09), 0 16px 40px rgba(20,32,60,.07); --lift-3: 0 2px 4px rgba(20,32,60,.08), 0 12px 30px rgba(20,32,60,.12), 0 30px 70px rgba(20,32,60,.10); --bevel: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(20,32,60,.06); --neon: 0 1px 2px rgba(0,130,95,.18); --neon-soft: 0 1px 2px rgba(0,130,95,.14); --neon-blue: 0 1px 2px rgba(12,109,255,.16); --edge: color-mix(in srgb, var(--brand) 30%, transparent); } /* El fondo de día: azul muy claro con dos halos, sin el degradado nocturno */ :root[data-theme="light"] body { background: radial-gradient(1100px 620px at 12% -8%, rgba(43,127,255,.10), transparent 62%), radial-gradient(900px 560px at 92% 4%, rgba(0,197,143,.07), transparent 60%), var(--bg); } /* Las cifras en claro no llevan relieve oscuro: se leen mejor planas */ :root[data-theme="light"] .hero__price, :root[data-theme="light"] .hero__num { text-shadow: none; } :root[data-theme="light"] .hero__h1 { text-shadow: none; } :root[data-theme="light"] .row__rank, :root[data-theme="light"] .row--top .row__rank, :root[data-theme="light"] .row__amount, :root[data-theme="light"] .stats dd, :root[data-theme="light"] .nav__logo { text-shadow: none; } :root[data-theme="light"] .sec__h2 { text-shadow: none; } /* La cuadrícula en perspectiva del hero, mucho más discreta de día */ :root[data-theme="light"] .hero::after { opacity: .22; } :root[data-theme="light"] .hero__glow { opacity: .5; } :root[data-theme="light"] .nav { background: color-mix(in srgb, #FFFFFF 82%, transparent); box-shadow: 0 6px 24px rgba(20,32,60,.07); } :root[data-theme="light"] .modal { background: color-mix(in srgb, #0B1220 42%, transparent); } :root[data-theme="light"] #form input, :root[data-theme="light"] #form select, :root[data-theme="light"] #form textarea, :root[data-theme="light"] .filter { background: #FFFFFF; box-shadow: inset 0 1px 3px rgba(20,32,60,.08); } :root[data-theme="light"] .tag { background: color-mix(in srgb, var(--warn) 12%, #fff); } :root[data-theme="light"] .cta { color: #FFFFFF; } :root[data-theme="light"] .cta h2 { color: #FFFFFF; } :root[data-theme="light"] .cta p { color: rgba(255,255,255,.9); } :root[data-theme="light"] .cta .btn--brand { background: #FFFFFF; color: var(--brand-deep); } /* Botón de tema */ .theme { min-height: 40px; min-width: 44px; border-radius: var(--r-pill); border: 1px solid var(--line); background: color-mix(in srgb, var(--bg-3) 60%, transparent); color: var(--text); font-size: 1rem; cursor: pointer; box-shadow: var(--bevel); display: grid; place-items: center; transition: all var(--t); } .theme:hover { border-color: var(--edge); color: var(--accent-deep); } /* El logo lleva verde claro para brillar sobre el fondo oscuro; sobre blanco hace falta la versión oscura o se lee lavado. */ :root[data-theme="light"] .nav__logo-img, :root[data-theme="light"] .foot__logo { content: url("/img/logo-light.svg"); filter: none; } /* La etiqueta "demo" en naranja se quedaba en 3.87:1 sobre el fondo claro. Este tono llega a AA sin dejar de leerse como aviso. */ :root[data-theme="light"] .tag { color: #7A4B05; border-color: rgba(122,75,5,.42); }