/* ============================================================================ TwoEyes — Tema canónico (tokens de diseño) ---------------------------------------------------------------------------- FASE 1 (tokenizar): todos los tokens contienen EXACTAMENTE el valor oscuro actual, de modo que el aspecto NO cambia. El objetivo es enrutar los colores sólidos a `var(--te-*)` y las familias rgba() a `rgba(var(--te-*-rgb), α)`. FASE 2 (reskin): para pasar a claro/Apple, normalmente bastará con redefinir estos tokens (sobre todo los *-rgb de overlay/sombra y las superficies/textos), sin tocar el resto del código. Cómo enlazarlo: como PRIMER stylesheet del , para que las variables estén disponibles para el resto del CSS de cada pantalla. ========================================================================== */ :root { /* ---- Marca (naranja) ---- */ --te-brand: #FE8A00; /* naranja principal */ --te-brand-strong: #E77900; /* naranja oscuro (hover/borde) */ --te-brand-soft: #FEC45E; /* dorado / naranja claro (gradientes) */ --te-brand-rgb: 254, 138, 0; /* para rgba(var(--te-brand-rgb), α) */ /* ---- Premium (rosa) ---- */ --te-pink: #FF7FA3; --te-pink-strong: #FF7FA3; --te-pink-soft: #FF7FA3; --te-pink-rgb: 255, 127, 163; /* ≈ #FF7FA3 */ --te-coral: #FF9E6B; /* acento coral de marca (temas claro/oscuro) */ --te-coral-rgb: 255, 158, 107; /* ≈ var(--te-coral) */ --te-pink-warm-rgb: 255, 127, 163; /* ≈ #FF7FA3 */ /* ---- Destructivo / éxito ---- */ --te-red: #FF453A; /* rojo de acciones destructivas */ --te-red-rgb: 255, 69, 58; --te-success: #3DDC97; /* verde de éxito (consolidado, themeable) */ --te-success-rgb: 61, 220, 151; /* ---- Superficies / fondos (tema oscuro) ---- */ --te-bg-top: #1A2942; /* arriba del degradado de fondo */ --te-bg-bottom: #0C111B; /* abajo del degradado */ --te-bg-outer: #101014; /* marco exterior del móvil */ --te-surface: #06111F; /* tarjetas / paneles */ --te-surface-2: #121114; /* superficie alternativa (casi negra) */ --te-surface-3: #10131B; --te-surface-4: #101A2A; /* ---- Texto ---- */ --te-text: #F8F4EA; /* principal (off-white) */ --te-text-2: #DBE7F7; /* secundario (azulado claro) */ --te-text-3: #BCC3CE; /* terciario */ --te-text-muted: #7F8794; /* atenuado */ --te-text-invert: #08090C; /* texto SOBRE naranja (oscuro) */ --te-text-rgb: 248, 244, 234; /* para rgba(var(--te-text-rgb), α) */ /* ---- Overlays y sombras (canales de color; el alpha se deja inline) ---- CLAVE para el reskin: en claro, basta cambiar estos *-rgb. */ --te-overlay-rgb: 255, 255, 255; /* bordes/fondos translúcidos sobre oscuro */ --te-shadow-rgb: 0, 0, 0; /* sombras */ --te-text-2-rgb: 219, 231, 247; /* texto secundario azulado (#DBE7F7) en rgba() */ --te-line-rgb: 54, 83, 126; /* azul-gris de líneas/bordes recurrente en rgba() */ /* ---- Blanco / negro puros (uso no temático: iconos, etc.) ---- */ --te-white: #FFFFFF; --te-black: #000000; } /* ============================================================================ PREVIEW DE TEMA CLARO (CRUDO — solo para comprobar que el "interruptor" funciona) ---------------------------------------------------------------------------- Esto NO es el diseño final claro/Apple (el radar de canvas, algunos glows y los contrastes finos se rehacen en la Fase 2). Es solo una demostración de que, al redefinir los tokens, toda la app cambia de golpe sin tocar el resto del código. Para probarlo: añade la clase "theme-light" al (o ) de cualquier pantalla, p. ej. , y recarga. ========================================================================== */ html.theme-light, body.theme-light { --te-bg-top: #FFFFFF; --te-bg-bottom: #EFF1F5; --te-bg-outer: #E6E8EE; --te-surface: #FFFFFF; --te-surface-2: #F4F5F8; --te-surface-3: #F4F5F8; --te-surface-4: #EEF1F6; --te-text: #0B0C0F; /* texto principal -> casi negro */ --te-text-2: #3A4150; --te-text-3: #5A6472; --te-text-muted: #8A94A3; --te-text-rgb: 11, 12, 15; /* el truco clave: los overlays blancos-sobre-oscuro pasan a negros-sobre-claro */ --te-overlay-rgb: 0, 0, 0; --te-shadow-rgb: 90, 100, 120; --te-text-2-rgb: 58, 65, 80; /* texto secundario -> gris oscuro (≈ #3A4150) */ --te-line-rgb: 60, 70, 90; /* líneas/bordes -> gris neutro sobre claro */ /* marca y rosa se mantienen (la identidad), texto sobre naranja sigue oscuro */ --te-text-invert: #FFFFFF; /* superficies de tarjeta heredadas (evita navy en claro) */ --twoeyes-card: linear-gradient(180deg,#FFFFFF 0%,#F7F8FB 100%); --card: #FFFFFF; /* marca en CLARO = CORAL (canon plano), no el naranja premium */ --te-brand: #FF9E6B; --te-brand-strong: #FF9E6B; --te-brand-soft: #FFB48C; --te-brand-rgb: 255, 158, 107; } /* ===== v683 · Transición de entrada entre pantallas (multipágina) ===== Suaviza el "flash" blanco al navegar entre HTML. Solo OPACIDAD (sin transform, que rompería los position:fixed del marco/nav/modales). fill-mode:both garantiza que el body termina en opacity:1 aunque la animación no llegue a ejecutarse del todo. Se desactiva con prefers-reduced-motion. Si este CSS no cargara, el body queda visible por defecto (regla aislada, no toca el estado base). */ @media (prefers-reduced-motion: no-preference) { @keyframes teScreenIn { from { opacity: 0; } to { opacity: 1; } } body { animation: teScreenIn .24s ease both; } }