/* themes.css — paletas como variables CSS (un set por tema). El tema se fija con el atributo data-theme en (ver js/theme.js). Paletas en CLAUDE.md §4c. */ /* Tema oscuro — PROTOTIPO inspirado en dark.webp (verde salvia + menta/coral/ámbar). El verde va al acento y a un brillo ambiental; el fondo se mantiene oscuro para que el texto sobre fondo (no solo en tarjetas) siga legible con un único --text. */ :root, [data-theme="dark"] { --bg: #0F140F; /* fondo verde-negro profundo */ --surface: #19211B; /* tarjetas elevadas, base de la pill glass */ --accent: #5C3A29; /* terracota terroso: RELLENO (botones, toggles, pill activa) */ --accent-ink: #C98A6E; /* terracota clara: TINTA legible sobre oscuro (cifras, agua, iconos) */ --text: #E7ECE6; /* texto principal casi blanco */ --secondary: #E9B7A8; /* coral suave: acento secundario */ --on-accent: #EFE7E2; /* texto/elementos sobre el terracota (crema cálido) */ --surface-glass: rgba(25, 33, 27, 0.55); /* base translúcida de la pill */ --border: rgba(231, 236, 230, 0.12); --shadow: rgba(0, 0, 0, 0.45); --danger: #E79086; /* Brillo ambiental sutil tipo "aurora" verde en la parte superior (ver base.css). */ --bg-ambient: radial-gradient(120% 75% at 50% -8%, rgba(40, 70, 54, 0.55) 0%, transparent 58%); } /* Tema claro — PROTOTIPO terroso: crema cálido + salvia ambiental, superficies blancas, mismo acento terracota que el oscuro (sobre claro lee bien como relleno y como tinta). */ [data-theme="light"] { --bg: #F0ECE3; /* fondo crema cálido */ --surface: #FFFFFF; /* tarjetas blancas (la profundidad la dan las sombras) */ --accent: #5C3A29; /* terracota (compartido con el oscuro) */ --accent-ink: #5C3A29; /* sobre claro el propio terracota ya lee como tinta */ --text: #36291F; /* espresso oscuro, no negro puro (≈11:1 sobre crema → AA) */ --secondary: #8AA58F; /* salvia: brillo ambiental / acento secundario */ --on-accent: #F4EFE7; /* texto crema sobre el terracota */ --surface-glass: rgba(255, 255, 255, 0.60); /* base translúcida de la pill */ --border: rgba(54, 41, 31, 0.14); --shadow: rgba(60, 40, 25, 0.12); /* sombra cálida blanda */ --danger: #b0413e; /* Brillo ambiental salvia (espejo del glow verde del oscuro). */ --bg-ambient: radial-gradient(120% 75% at 50% -8%, rgba(138, 165, 143, 0.40) 0%, transparent 58%); }