/* ══════════════════════════════════════════════════ Colores elegidos por el usuario (Ajustes → Apariencia) js/app.js → applyPalette() pone data-bg, data-accent y data-accent2 en ; aquí cada opción redefine las variables de variables.css. Cada opción tiene versión oscura y clara. Las de fondo solo tiñen los grises: el texto sigue siendo el de cada modo, así siempre se lee. El verde (--accent3) y el rojo se quedan fijos: marcan éxito y error. Las claves tienen que coincidir con PALETTE en backend/routes/profile.js. ══════════════════════════════════════════════════ */ /* ── Fondo ─────────────────────────────────────────── */ html:not(.light-mode)[data-bg="midnight"] { --bg: #0a0e16; --bg2: #0f141e; --bg3: #151b27; --bg4: #1c2331; --bg5: #252d3d; } html.light-mode[data-bg="midnight"] { --bg: #cfd5de; --bg2: #c4cbd5; --bg3: #b9c1cc; --bg4: #adb6c2; --bg5: #a1abb8; } html:not(.light-mode)[data-bg="forest"] { --bg: #0a100d; --bg2: #0f1612; --bg3: #151e19; --bg4: #1c2620; --bg5: #25302a; } html.light-mode[data-bg="forest"] { --bg: #ced6cf; --bg2: #c4cdc5; --bg3: #bac4bb; --bg4: #aebaaf; --bg5: #a2afa4; } html:not(.light-mode)[data-bg="wine"] { --bg: #110a0c; --bg2: #171013; --bg3: #20161a; --bg4: #291d22; --bg5: #33252b; } html.light-mode[data-bg="wine"] { --bg: #dbcfd1; --bg2: #d1c4c7; --bg3: #c7babd; --bg4: #bcaeb2; --bg5: #b1a2a6; } html:not(.light-mode)[data-bg="plum"] { --bg: #0e0b14; --bg2: #14101b; --bg3: #1b1624; --bg4: #231d2e; --bg5: #2c2539; } html.light-mode[data-bg="plum"] { --bg: #d4cfdc; --bg2: #cac4d3; --bg3: #c0bac9; --bg4: #b5aebf; --bg5: #aaa3b4; } /* ── Color principal (--accent, dorado por defecto) ── */ html:not(.light-mode)[data-accent="crimson"] { --accent: #e0686b; } html.light-mode[data-accent="crimson"] { --accent: #b3363a; } html:not(.light-mode)[data-accent="blue"] { --accent: #6aa6e8; } html.light-mode[data-accent="blue"] { --accent: #2c67a8; } html:not(.light-mode)[data-accent="rose"] { --accent: #e684b6; } html.light-mode[data-accent="rose"] { --accent: #ad3f78; } html:not(.light-mode)[data-accent="orange"] { --accent: #e89a5b; } html.light-mode[data-accent="orange"] { --accent: #a95a17; } html:not(.light-mode)[data-accent="teal"] { --accent: #5fc4c4; } html.light-mode[data-accent="teal"] { --accent: #1d7f7f; } /* ── Color de detalles (--accent2, violeta por defecto) ── */ html:not(.light-mode)[data-accent2="blue"] { --accent2: #5b8dd4; } html.light-mode[data-accent2="blue"] { --accent2: #2f5fa8; } html:not(.light-mode)[data-accent2="cyan"] { --accent2: #4fb8c8; } html.light-mode[data-accent2="cyan"] { --accent2: #1f7f8c; } html:not(.light-mode)[data-accent2="pink"] { --accent2: #d47da8; } html.light-mode[data-accent2="pink"] { --accent2: #a8457a; } html:not(.light-mode)[data-accent2="amber"] { --accent2: #d4a24f; } html.light-mode[data-accent2="amber"] { --accent2: #93650f; }