/* ========================================================================== Glopy · Tokens de tema (única fuente de verdad) -------------------------------------------------------------------------- Antes cada pantalla declaraba su propio :root con un subconjunto distinto de variables, y encima con nombres que no coincidían (--gl-muted en appshell.css frente a --gl-text-muted en feed.css). Con eso no había un sitio donde cambiar el tema: mandaba la última hoja que cargara. Aquí viven todos los tokens. Este fichero se carga EL PRIMERO en cada pantalla, antes que su CSS propio. Dos familias: · Marca (--gl-blue, --gl-green…) → NO cambian con el tema. · Rol (--gl-surface, --gl-text…) → sí cambian. Los tokens se nombran por lo que HACEN, no por el color que tienen: "--gl-bg: #07090f" deja de tener sentido en cuanto existe un modo claro, mientras que "--gl-surface" sigue siendo verdad en los dos. El tema se aplica con [data-theme] en . `:root[data-theme="light"]` tiene más especificidad (0,1,1) que un `:root` suelto (0,0,1), así que gana aunque una hoja antigua vuelva a declarar sus variables — que es lo que permite migrar pantalla a pantalla sin romper las que faltan. ========================================================================== */ :root { /* --- Marca (idéntica en claro y oscuro) ------------------------------ */ --gl-blue: #1060ff; --gl-blue-soft: #3d86ff; --gl-green: #26d07c; --gl-amber: #f5c451; --gl-violet: #b07cff; --gl-red: #ff4d57; --gl-cyan: #38c6e0; /* --- Tokens heredados de las pantallas splash (welcome, login, onboarding). Vivían en el :root de cada CSS de pantalla y se perdieron al centralizar los tokens aquí: sin ellos el degradado del logo GLOPPY quedaba INVISIBLE (texto transparente sobre fondo transparente) y el botón "Empezar" se pintaba negro. Son visuales de marca fijos: no cambian con el tema claro. ---------------------- */ --gl-blue-deep: #0b4ad6; --gl-bg-0: #05070f; --gl-bg-1: #0a0e1a; --gl-radius: 16px; --gl-orange: #ff8a3d; --gl-pink: #ff7ac2; --gl-card-2: #11182a; /* fondo de las hojas inferiores (sheets) */ /* --- Roles · tema oscuro (por defecto) ------------------------------- */ --gl-surface: #07090f; /* fondo de la pantalla */ --gl-surface-raised: #0e1422; /* tarjetas y paneles */ --gl-surface-sunken: #0c1322; /* campos, huecos */ --gl-surface-hover: rgba(255, 255, 255, 0.06); --gl-text: #ffffff; --gl-text-soft: #cfd6e8; --gl-text-muted: #8c98b6; --gl-border: rgba(255, 255, 255, 0.08); --gl-border-strong: rgba(255, 255, 255, 0.16); --gl-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); /* Degradado que oscurece la foto para que el texto encima se lea. */ --gl-photo-scrim: linear-gradient(180deg, rgba(7, 9, 15, 0) 0%, rgba(7, 9, 15, 0.85) 100%); --gl-chip-bg: rgba(0, 0, 0, 0.55); --gl-chip-text: #ffffff; --gl-shell-bg: radial-gradient(50% 40% at 22% 30%, rgba(16, 96, 255, 0.22) 0%, rgba(16, 96, 255, 0) 70%), radial-gradient(120% 90% at 50% 12%, #0d1426 0%, #0a0e1a 46%, #05070f 100%); --gl-shell-frame-radius: 36px; --gl-shell-frame-height: min(800px, 90vh); /* --- Cabecera de app (pestañas + botones rotulados) ------------------- La comparten el feed de swipe y el Modo Lista. Estaban cada una con sus medidas y en un iPhone (390 px) se veían distintas: pestaña de 14,4 px contra 16,8 px y botón de 50 contra 58. Se tocan AQUÍ, nunca en feed.css / feed_list.css, que solo consumen estas variables. */ --gl-head-pad-top: 12px; --gl-head-pad-x: 16px; --gl-head-pad-bottom: 10px; --gl-head-tab-size: 1rem; --gl-head-tab-weight: 700; --gl-head-tab-gap: 14px; --gl-head-btn: 54px; --gl-head-btn-radius: 15px; --gl-head-btn-icon: 1.08rem; --gl-head-btn-label: 0.66rem; --gl-head-btn-gap: 10px; /* --- Alias heredados ------------------------------------------------- Las hojas todavía sin migrar siguen usando estos nombres. Al apuntarlos a los tokens de rol, esas pantallas cambian de tema solas y la migración puede ir pantalla a pantalla en vez de todo de golpe. */ --gl-bg: var(--gl-surface); --gl-bg-soft: var(--gl-surface-sunken); --gl-card: var(--gl-surface-raised); --gl-line: var(--gl-border); --gl-line-strong: var(--gl-border-strong); --gl-muted: var(--gl-text-muted); } /* --- Tema claro ---------------------------------------------------------- */ /* Sólo se redefinen los tokens de ROL: la marca no cambia. Los alias de arriba apuntan a estos mismos tokens, así que se arrastran sin repetirlos. */ :root[data-theme="light"] { --gl-surface: #f4f6fb; --gl-surface-raised: #ffffff; --gl-card-2: #ffffff; /* las hojas inferiores pasan a blanco en claro */ --gl-surface-sunken: #eaeef7; --gl-surface-hover: rgba(16, 32, 70, 0.05); --gl-text: #0b1020; --gl-text-soft: #33405c; --gl-text-muted: #63708c; --gl-border: rgba(11, 16, 32, 0.10); --gl-border-strong: rgba(11, 16, 32, 0.20); --gl-shadow: 0 10px 28px rgba(16, 32, 70, 0.10); /* La foto sigue necesitando velo oscuro: el texto que va encima es blanco en los dos temas, porque la imagen no cambia de color. */ --gl-photo-scrim: linear-gradient(180deg, rgba(10, 14, 26, 0) 0%, rgba(10, 14, 26, 0.78) 100%); --gl-chip-bg: rgba(255, 255, 255, 0.92); --gl-chip-text: #0b1020; --gl-shell-bg: radial-gradient(50% 40% at 22% 30%, rgba(16, 96, 255, 0.10) 0%, rgba(16, 96, 255, 0) 70%), radial-gradient(120% 90% at 50% 12%, #eef2fb 0%, #e6ecf8 46%, #dfe6f5 100%); } /* Oscuro es el tema por defecto (decisión de producto): la app abre en negro aunque el móvil esté en claro. NO se sigue `prefers-color-scheme`, porque si no un usuario con el sistema en claro vería la app en blanco sin haberlo pedido, que es justo lo contrario de lo acordado. El modo claro se activa solo cuando el usuario lo elige con el interruptor. */ /* Evita el "flash" blanco/negro mientras carga: el color de fondo del documento ya sale del token, sin esperar al CSS de cada pantalla. */ html { background: var(--gl-surface); } /* El cambio de tema se anima salvo que el usuario pida menos movimiento. */ @media (prefers-reduced-motion: no-preference) { body { transition: background-color 0.2s ease, color 0.2s ease; } } /* Móviles estrechos: encoger la cabecera es cuestión de bajar los tokens una vez; antes cada pantalla tenía su propia media query (y el listado no tenía ninguna, así que no encogía). */ @media (max-width: 400px) { :root { --gl-head-tab-size: 0.94rem; --gl-head-tab-gap: 11px; --gl-head-btn: 50px; --gl-head-btn-icon: 1rem; --gl-head-btn-label: 0.62rem; --gl-head-btn-gap: 8px; } }