/* ===================================================================== theme.css · Variables de tema (oscuro + claro) · DCN App --------------------------------------------------------------------- Todo el diseño usa estas variables. Para cambiar de tema, se pone data-theme="claro" en el y toda la app cambia de golpe. El tema por defecto (sin atributo) es el OSCURO. ===================================================================== */ :root, :root[data-theme="oscuro"] { /* Fondos */ --bg: #343434; /* fondo principal */ --bg-2: #3d3d3d; /* tarjetas / superficies */ --bg-3: #2b2b2b; /* fondos más hundidos (reproductor) */ --surface: #444441; /* inputs, items */ /* Texto */ --txt: #ffffff; --txt-2: #bbbbbb; /* secundario */ --txt-3: #9f9f9f; /* hints, placeholders */ /* Marca / acentos */ --accent: #E2725B; /* coral (botones, marca) */ --accent-hover: #F0896D; --accent-soft: rgba(226,114,91,0.15); --gold: #ffcf72; /* dorado del vinilo / acentos */ /* Estados */ --ok: #2E8B57; --ok-hover: #276749; --danger: #C55D4A; --danger-hover: #D98473; /* Bordes y varios */ --border: rgba(255,255,255,0.20); --radius: 14px; --radius-pill: 25px; /* Iconos pastel de Ajustes (se mantienen en ambos temas) */ --ic-pink: #FDDDE6; --ic-green: #DDE6AA; --ic-blue: #DDE6FD; --ic-purple: #E6DCFD; --ic-peach: #FDEEDC; } :root[data-theme="claro"] { /* Fondos */ --bg: #f4f4f2; /* crema suave */ --bg-2: #ffffff; /* tarjetas blancas */ --bg-3: #2b2b2b; /* el reproductor se mantiene oscuro (el vinilo luce mejor) */ --surface: #ececea; /* Texto (usa el 343434 del tema oscuro, como pidió el usuario) */ --txt: #343434; --txt-2: #6b6b66; --txt-3: #8a8a84; /* Marca / acentos */ --accent: #E2725B; /* coral igual en ambos temas */ --accent-hover: #cf5f48; --accent-soft: rgba(226,114,91,0.12); --gold: #E0A82E; /* ámbar: dorado con más contraste sobre claro */ /* Estados */ --ok: #2E8B57; --ok-hover: #276749; --danger: #C55D4A; --danger-hover: #b04a39; /* Bordes */ --border: rgba(0,0,0,0.15); --radius: 14px; --radius-pill: 25px; /* Iconos pastel (un poco más saturados para que se vean en claro) */ --ic-pink: #E98BAA; --ic-green: #A9C24E; --ic-blue: #6FA8E0; --ic-purple: #A98BE0; --ic-peach: #E0A867; }