/* ============================================================================ TEMAS de Carla Masajes --------------------------------------------------------------------------- Dos pieles con las MISMAS variables: · kawaii → rosa Hello Kitty (el favorito de Carla). PREDETERMINADO. · oscuro → la piel negra y dorada original. tema.js pone data-tema en antes de pintar, así que estas reglas ([data-tema]) siempre ganan al :root en línea de cada página. Los nombres viejos (--noche, --oro, --crema…) se conservan como alias para no tener que reescribir el CSS de las páginas. ========================================================================= */ /* ---------------------------- KAWAII (por defecto) ---------------------- */ :root, :root[data-tema="kawaii"] { --fondo: #ffb3d8; /* rosa chicle: el fondo manda */ --sup: #ffffff; --sup2: #ffd9ec; --acento: #c81e6e; /* rosa fuerte, legible sobre el rosa del fondo */ --acento2: #8e2bb8; /* morado para hover y brillos */ --texto: #40122f; /* ciruela muy oscuro: contraste alto sobre rosa */ --suave: #7c3560; /* texto secundario */ --lila: #b98cff; /* segundo acento (detalles) */ --tinta: #ffffff; /* texto sobre acento sólido */ --borde: rgba(200,30,110,.38); --borde-fino: rgba(200,30,110,.22); --borde-medio: rgba(200,30,110,.30); --borde-fuerte:rgba(200,30,110,.55); --velo: rgba(255,179,216,.92); /* barra superior translúcida */ --velo-modal: rgba(255,179,216,.94); /* fondo de modales y puerta +18 */ --sombra: 0 10px 30px rgba(160,20,90,.20); --fuente-titulo: 'Baloo 2', 'Trebuchet MS', sans-serif; --fuente-texto: 'Quicksand', 'Segoe UI', sans-serif; --titulo-espaciado: .01em; --radio: 20px; /* esquinas: más redondeadas en kawaii */ /* alias de compatibilidad con el CSS ya escrito */ --noche: var(--fondo); --carbon: var(--sup); --carbon2: var(--sup2); --oro: var(--acento); --oro2: var(--acento2); --crema: var(--texto); --piedra: var(--suave); --rosa: var(--acento); --rojo: #ff3d71; --verde: #3fbf8f; } /* ------------------------------- OSCURO --------------------------------- */ :root[data-tema="oscuro"] { --fondo: #0d0a12; --sup: #161020; --sup2: #1f1729; --acento: #d9a441; --acento2: #e9c46a; --texto: #f0e6d8; --suave: #9a8fa5; --lila: #c94f7c; --tinta: #1d1508; --borde: rgba(217,164,65,.25); --borde-fino: rgba(217,164,65,.14); --borde-medio: rgba(217,164,65,.25); --borde-fuerte:rgba(217,164,65,.40); --velo: rgba(13,10,18,.85); --velo-modal: rgba(10,7,14,.90); --sombra: 0 20px 60px rgba(0,0,0,.5); --fuente-titulo: 'Bebas Neue', sans-serif; --fuente-texto: 'Raleway', sans-serif; --titulo-espaciado: .06em; --radio: 16px; --noche: var(--fondo); --carbon: var(--sup); --carbon2: var(--sup2); --oro: var(--acento); --oro2: var(--acento2); --crema: var(--texto); --piedra: var(--suave); --rosa: #c94f7c; --rojo: #e0445c; --verde: #4fbf7a; } /* ------------------------- detalles propios del tema -------------------- */ /* Lluvia de corazoncitos MUY sutil, pintada en el fondo del propio body. OJO: NO usar un ::before a pantalla completa + "body > *{position:relative}" para colocarlo: esa regla pisa el position:sticky de