/* ========================================================================== 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; /* --- 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); /* --- 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-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; } }