/* ============================================================ UVLIS — Light theme ------------------------------------------------------------ Activated by (set by theme.js / the no-FOUC head snippet). The dark theme remains the default and is untouched — this file only adds overrides scoped under :root[data-theme="light"], so specificity always wins over the base rules regardless of stylesheet order. Palette philosophy: not stark #fff. A warm, calm greige/cream canvas with near-white lifted cards, ink-black text and soft shadows — elegant and easy on the eyes. Brand accents (violet, cyan, gold, green) are kept exactly as in dark mode; only the neutral surface / line / text tokens are re-pointed. ============================================================ */ /* ── Reduce motion (any theme) — respects the Ajustes toggle ── */ :root[data-reduce-motion] *, :root[data-reduce-motion] *::before, :root[data-reduce-motion] *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* ============================================================ 1. GLOBAL DESIGN TOKENS (styles.css :root) ============================================================ */ :root[data-theme="light"] { color-scheme: light; /* Surfaces — warm cream / greige, cards lift toward white */ --bg-base: #e9e7e1; /* page canvas */ --bg-surface: #f4f2ec; /* panels */ --bg-elevated: #fbfaf6; /* cards, modals */ --bg-overlay: #ffffff; --bg-hover: #e3e1d9; /* Text — ink black + warm grays */ --text-primary: #1d1d1f; --text-secondary: #565660; --text-muted: #86868b; --text-inverse: #fbfaf6; /* Borders — dark alpha instead of white alpha */ --border-subtle: rgba(0, 0, 0, 0.06); --border-default: rgba(0, 0, 0, 0.10); --border-strong: rgba(0, 0, 0, 0.16); /* Glass — frosted white over the cream canvas */ --glass-bg: rgba(255, 255, 255, 0.72); --glass-border: rgba(0, 0, 0, 0.08); /* Gradients */ --gradient-hero: linear-gradient(135deg, #f4f2ec 0%, #e9e7e1 55%, #efedE7 100%); --gradient-glow: radial-gradient(circle at 50% 0%, rgba(124, 58, 237, 0.10) 0%, transparent 70%); /* Shadows — softer & cooler for light surfaces */ --shadow-sm: 0 1px 2px rgba(17, 12, 46, 0.06); --shadow-md: 0 4px 14px rgba(17, 12, 46, 0.08); --shadow-lg: 0 10px 34px rgba(17, 12, 46, 0.12); --shadow-glow: 0 8px 30px rgba(124, 58, 237, 0.18); --shadow-glow-accent: 0 8px 30px rgba(6, 182, 212, 0.14); /* Ruleta overlay tokens (defined in styles.css) */ --rt-panel: rgba(255, 255, 255, 0.82); --rt-panel-strong: rgba(255, 255, 255, 0.94); --rt-border: rgba(0, 0, 0, 0.10); --rt-shadow: 0 10px 34px rgba(17, 12, 46, 0.12); } /* ── Base elements ── */ :root[data-theme="light"] a { color: var(--primary-700); } :root[data-theme="light"] a:hover { color: var(--primary-600); } :root[data-theme="light"] input, :root[data-theme="light"] textarea, :root[data-theme="light"] select { color: var(--text-primary); } :root[data-theme="light"] input::placeholder, :root[data-theme="light"] textarea::placeholder { color: var(--text-muted); } :root[data-theme="light"] ::selection { background: rgba(124, 58, 237, 0.18); color: #1d1d1f; } :root[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.22); } :root[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: var(--primary-500); } /* ============================================================ 2. SIDEBAR (injected by uvlis-sidebar.js — hardcoded dark) ============================================================ */ :root[data-theme="light"] .sidebar { background: rgba(250, 249, 246, 0.82); border-right: 1px solid rgba(0, 0, 0, 0.07); } :root[data-theme="light"] .sidebar .sidebar-header { border-bottom-color: rgba(0, 0, 0, 0.06); } :root[data-theme="light"] .sidebar .sidebar-brand-icon { background: #16161f; } :root[data-theme="light"] .sidebar .sidebar-brand h2 { color: #1d1d1f; } :root[data-theme="light"] .sidebar .uvs-collapse-btn { border-color: rgba(0, 0, 0, 0.09); background: rgba(0, 0, 0, 0.04); color: #6a6a72; } :root[data-theme="light"] .sidebar .uvs-collapse-btn:hover { background: rgba(0, 0, 0, 0.08); color: #1d1d1f; } :root[data-theme="light"] .sidebar .sidebar-section-title { color: #86868b; } :root[data-theme="light"] .sidebar .uvs-link { color: #55555c; } :root[data-theme="light"] .sidebar .uvs-link:hover { background: rgba(0, 0, 0, 0.045); color: #1d1d1f; } :root[data-theme="light"] .sidebar .uvs-link.active { background: rgba(124, 58, 237, 0.12); color: #5b21b6; } :root[data-theme="light"] .sidebar .uvs-link.active .uvs-link-count { background: rgba(124, 58, 237, 0.16); color: #5b21b6; } :root[data-theme="light"] .sidebar .uvs-link-count { background: rgba(0, 0, 0, 0.06); color: #6a6a72; } :root[data-theme="light"] .sidebar .uvs-expand-caret { color: #86868b; } :root[data-theme="light"] .sidebar .uvs-expand.open .uvs-expand-caret { color: #55555c; } :root[data-theme="light"] .sidebar .uvs-expand-btn.has-active { color: #1d1d1f; } :root[data-theme="light"] .sidebar .uvs-sublinks { border-left-color: rgba(0, 0, 0, 0.08); } :root[data-theme="light"] .sidebar .uvs-sublink, :root[data-theme="light"] .sidebar .uvs-rooms-sublinks .room-item { color: #6a6a72; } :root[data-theme="light"] .sidebar .uvs-sublink:hover, :root[data-theme="light"] .sidebar .uvs-rooms-sublinks .room-item:hover { background: rgba(0, 0, 0, 0.045); color: #1d1d1f; } :root[data-theme="light"] .sidebar .uvs-sublink.active, :root[data-theme="light"] .sidebar .uvs-rooms-sublinks .room-item.active { background: rgba(124, 58, 237, 0.12); color: #5b21b6; } :root[data-theme="light"] .sidebar .uvs-sublink-count, :root[data-theme="light"] .sidebar .room-item .room-count { background: rgba(0, 0, 0, 0.06); color: #6a6a72; } :root[data-theme="light"] .sidebar .uvs-room-create { border-color: rgba(0, 0, 0, 0.14); color: #6a6a72; } :root[data-theme="light"] .sidebar .uvs-room-create:hover { border-color: rgba(124, 58, 237, 0.5); color: #6d28d9; } :root[data-theme="light"] .sidebar .uvs-online-badge::before { background: #b8b8bf; } /* Sidebar footer: profile, balance, install */ :root[data-theme="light"] .sidebar .sidebar-profile { border-top-color: rgba(0, 0, 0, 0.06); } :root[data-theme="light"] .sidebar .sidebar-profile-link:hover { background: rgba(0, 0, 0, 0.04); } :root[data-theme="light"] .sidebar .sidebar-profile-name { color: #1d1d1f; } :root[data-theme="light"] .sidebar .sidebar-profile-status { color: #86868b; } :root[data-theme="light"] .sidebar .btn-logout { color: #86868b; } :root[data-theme="light"] .sidebar .btn-logout:hover { background: rgba(239, 68, 68, 0.1); color: #dc2626; } :root[data-theme="light"] .sidebar .sidebar-balance-chip { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.08); color: #1d1d1f; } :root[data-theme="light"] .sidebar .sidebar-balance-label { color: #86868b; } :root[data-theme="light"] .sidebar .uvs-settings-btn { color: #86868b; } :root[data-theme="light"] .sidebar .uvs-settings-btn:hover { background: rgba(0, 0, 0, 0.06); color: #1d1d1f; } /* Sidebar mobile / search / online (chat mode) */ :root[data-theme="light"] .sidebar .search-input, :root[data-theme="light"] .sidebar input[type="text"], :root[data-theme="light"] .sidebar input[type="search"] { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.08); color: #1d1d1f; } :root[data-theme="light"] .sidebar input[type="search"].people-search-input { background: transparent; } :root[data-theme="light"] .sidebar-close { color: #6a6a72; } /* ============================================================ 3. PER-PAGE LOCAL TOKENS Neutral surface / line / text tokens re-pointed to light. Brand accents (violet/cyan/gold/green) are intentionally left untouched so the identity is preserved. ============================================================ */ /* Home */ :root[data-theme="light"] { --hm-glass: rgba(255, 255, 255, 0.66); --hm-glass-hi: rgba(255, 255, 255, 0.9); --hm-line: rgba(0, 0, 0, 0.09); --hm-line-soft: rgba(0, 0, 0, 0.055); --hm-muted: #565660; --hm-muted-2: #86868b; /* Marketplace */ --mk-glass: rgba(255, 255, 255, 0.66); --mk-glass-hi: rgba(255, 255, 255, 0.9); --mk-line: rgba(0, 0, 0, 0.09); --mk-line-soft: rgba(0, 0, 0, 0.055); --mk-text: #1d1d1f; --mk-muted: #565660; --mk-faint: #86868b; /* Senderos */ --sn-glass: rgba(255, 255, 255, 0.66); --sn-glass-hi: rgba(255, 255, 255, 0.9); --sn-line: rgba(0, 0, 0, 0.09); --sn-line-soft: rgba(0, 0, 0, 0.055); --sn-ink: #1d1d1f; --sn-dim: #565660; --sn-faint: #86868b; /* Referrals */ --rf-glass: rgba(255, 255, 255, 0.66); --rf-glass-hi: rgba(255, 255, 255, 0.9); --rf-line: rgba(0, 0, 0, 0.09); --rf-line-soft: rgba(0, 0, 0, 0.055); --rf-ink: #1d1d1f; --rf-dim: #565660; --rf-faint: #86868b; /* Bounties */ --bt-bg: #e9e7e1; --bt-card: #fbfaf6; --bt-card-2: #f4f2ec; --bt-line: rgba(0, 0, 0, 0.09); --bt-text: #1d1d1f; --bt-muted: #565660; /* Hackathons */ --hk-bg: #e9e7e1; --hk-card: #fbfaf6; --hk-card-2: #f4f2ec; --hk-line: rgba(0, 0, 0, 0.09); --hk-text: #1d1d1f; --hk-muted: #565660; /* Events */ --ev-card: #fbfaf6; --ev-card-2: #f4f2ec; --ev-line: rgba(0, 0, 0, 0.09); --ev-text: #1d1d1f; --ev-muted: #565660; /* Feedback */ --fb-card: #fbfaf6; --fb-card-2: #f4f2ec; --fb-line: rgba(0, 0, 0, 0.09); --fb-text: #1d1d1f; --fb-muted: #565660; /* Juntita */ --mt-card: #fbfaf6; --mt-card-2: #f4f2ec; --mt-line: rgba(0, 0, 0, 0.09); --mt-text: #1d1d1f; --mt-muted: #565660; /* Historia */ --hist-card: #fbfaf6; --hist-line: rgba(0, 0, 0, 0.09); --hist-text: #1d1d1f; --hist-muted: #565660; /* Mensajes */ --mg-muted: #565660; --mg-faint: #86868b; --mg-line: rgba(0, 0, 0, 0.09); --mg-glass: rgba(255, 255, 255, 0.66); /* Salas */ --sl-card: #fbfaf6; --sl-line: rgba(0, 0, 0, 0.09); --sl-muted: #565660; /* Juegos */ --jg-card: #fbfaf6; --jg-line: rgba(0, 0, 0, 0.09); --jg-muted: #565660; /* Daxico (space/globe stays dark — only chrome text softened) */ --dx-ink: #1d1d1f; --dx-dim: #565660; --dx-faint: #86868b; /* Bounties/Events/etc share these — profile handled below */ } /* Profile — user-customisable accent stays; only readable neutrals flip */ :root[data-theme="light"] { --pf-on-bg: #1d1d1f; --pf-on-bg-muted: #565660; } /* ============================================================ 4. CONTENT SHELLS with hardcoded surfaces (high-traffic pages) ============================================================ */ /* ── Tienda / Home (home reuses tienda.css classes) ── */ :root[data-theme="light"] .tienda-topbar { background: rgba(250, 249, 246, 0.72); border-bottom-color: rgba(0, 0, 0, 0.07); } :root[data-theme="light"] .package-card, :root[data-theme="light"] .tienda-card { background: rgba(255, 255, 255, 0.66); border-color: rgba(0, 0, 0, 0.08); } :root[data-theme="light"] .package-card:hover { background: rgba(255, 255, 255, 0.92); border-color: rgba(0, 0, 0, 0.12); } :root[data-theme="light"] .package-buy-btn { background: #1d1d1f; color: #fbfaf6; } :root[data-theme="light"] .package-buy-btn:hover { background: #000; } /* ── Home (hardcoded surfaces the tokens don't reach) ── */ :root[data-theme="light"] .hm-balance-plus { background: rgba(0, 0, 0, 0.07); color: #1d1d1f; } :root[data-theme="light"] .hm-modal { background: rgba(251, 250, 246, 0.94); } :root[data-theme="light"] .hm-see-all:hover { background: rgba(0, 0, 0, 0.045); border-color: rgba(0, 0, 0, 0.16); } :root[data-theme="light"] .hm-disc-bar { background: rgba(0, 0, 0, 0.08); } :root[data-theme="light"] .hm-edit-btn:hover { border-color: rgba(0, 0, 0, 0.16); } :root[data-theme="light"] .hm-modal-close:hover { background: rgba(0, 0, 0, 0.08); color: #1d1d1f; } /* ── Chat (chat-glass.css) ── */ :root[data-theme="light"] .chat-header { background: rgba(250, 249, 246, 0.72); } :root[data-theme="light"] .chat-header-online { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.09); } :root[data-theme="light"] button.chat-header-online:hover { background: rgba(0, 0, 0, 0.07); border-color: rgba(0, 0, 0, 0.16); } :root[data-theme="light"] .message-body { background: rgba(0, 0, 0, 0.05); color: #1d1d1f; } :root[data-theme="light"] .message.own .message-body { color: #fff; } /* violet bubble keeps white text */ :root[data-theme="light"] .message-reply { background: rgba(0, 0, 0, 0.045); border-color: rgba(0, 0, 0, 0.08); } :root[data-theme="light"] .message-actions { background: rgba(255, 255, 255, 0.94); } :root[data-theme="light"] .welcome-banner h2 { -webkit-text-fill-color: #1d1d1f; color: #1d1d1f; } :root[data-theme="light"] .welcome-banner p { color: #565660; } :root[data-theme="light"] .composer-input, :root[data-theme="light"] .chat-composer { background: rgba(0, 0, 0, 0.04); } :root[data-theme="light"] .composer-input:focus-within { border-color: rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.06); } /* ============================================================ 5. PAGE-WRAPPER ATMOSPHERIC BACKGROUNDS (the big one) Most pages paint their main scroll wrapper with a hardcoded dark #050507 radial glow at a higher specificity than the token-driven body, so it covered the cream canvas. Re-paint those wrappers with a soft cream glow. Each selector below out-specifies its dark counterpart, so no !important needed. (Daxico's space globe + admin are intentionally left dark.) ============================================================ */ :root[data-theme="light"] .chat-page, :root[data-theme="light"] .tienda-content:has(.hm-content), :root[data-theme="light"] .tienda-content:has(#sn-app), :root[data-theme="light"] .tienda-content:has(.mk-content), :root[data-theme="light"] .tienda-content:has(.tienda-hero), :root[data-theme="light"] .ref-main, :root[data-theme="light"] .mg-main { background: radial-gradient(1100px 620px at 80% -10%, rgba(124, 58, 237, 0.06), transparent 62%), radial-gradient(900px 540px at 4% 0%, rgba(6, 182, 212, 0.05), transparent 55%), #eae8e2; } /* Home keeps the shared cinematic video (same as the landing), so its wrappers stay transparent even in light mode — the video shows through as a faint texture and .hm-bg lays a bright cream scrim over it so the frosted-white cards stay crisp. Comes after the cream-wrapper rule above and re-out-specifies it. */ :root[data-theme="light"] .chat-page:has(.hm-content), :root[data-theme="light"] .tienda-content:has(.hm-content) { background: transparent; } :root[data-theme="light"] .hm-video { background: #eae8e2; } :root[data-theme="light"] .hm-video video { opacity: 0.28; } :root[data-theme="light"] .hm-bg { background: radial-gradient(1200px 700px at 78% -12%, rgba(124, 58, 237, 0.10), transparent 62%), radial-gradient(1000px 600px at 6% 2%, rgba(6, 182, 212, 0.08), transparent 55%), linear-gradient(180deg, rgba(238, 236, 230, 0.78) 0%, rgba(234, 232, 226, 0.86) 45%, rgba(234, 232, 226, 0.94) 100%); } /* Softer, lighter float-shadow for the glass cards on cream. */ :root[data-theme="light"] .hm-shortcut, :root[data-theme="light"] .hm-disc, :root[data-theme="light"] .hm-card { box-shadow: 0 18px 40px -24px rgba(40, 34, 60, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.6); } /* Remaining dark topbars (rgba(8,8,13,.6) glass) not covered above */ :root[data-theme="light"] .ref-topbar, :root[data-theme="light"] .mg-mobile-top { background: rgba(250, 249, 246, 0.72); border-bottom-color: rgba(0, 0, 0, 0.07); } :root[data-theme="light"] .mg-mobile-title, :root[data-theme="light"] .mg-mobile-top .mobile-menu-btn { color: #1d1d1f; } /* Hardcoded light headings/greeting that would vanish on cream */ :root[data-theme="light"] .hm-hero-hi, :root[data-theme="light"] .hm-section-head h2 { color: #1d1d1f; } /* ── Generic frosted cards used across many pages ── Catches the recurring `rgba(255,255,255,0.04–0.09)` glass fill pattern where a class name is stable. */ :root[data-theme="light"] .glass-card, :root[data-theme="light"] .card, :root[data-theme="light"] .panel { border-color: var(--border-default); } /* ============================================================ 6. WASHED-OUT LIGHT TEXT + chat bubbles/composer + constructor Titles & big numbers that were #fff / #f5f5f7 in dark mode and vanish on the light surfaces; the chat thread; and the Constructor gallery chrome (3D previews intentionally stay dark). ============================================================ */ /* Tienda / Comprar Fichas — balance number + section headings */ :root[data-theme="light"] .tienda-balance-main strong, :root[data-theme="light"] .packages-head, :root[data-theme="light"] .history-section h2 { color: #1d1d1f; } /* Home — discover card titles, online stat numbers, streak number */ :root[data-theme="light"] .hm-disc-title, :root[data-theme="light"] .hm-stat-num, :root[data-theme="light"] .hm-streak-big { color: #1d1d1f; } /* Mensajes — list header, conversation names, empty state, unread */ :root[data-theme="light"] .mg-list-title, :root[data-theme="light"] .mg-name, :root[data-theme="light"] .mg-empty-thread, :root[data-theme="light"] .mg-empty-thread h2, :root[data-theme="light"] .mg-search { color: #1d1d1f; } :root[data-theme="light"] .mg-row.is-unread .mg-preview { color: #1d1d1f; } :root[data-theme="light"] .mg-tab.is-active { color: #6d28d9; } /* Chat thread bubbles (chat-glass.css) */ :root[data-theme="light"] .message-body { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.08); color: #1d1d1f; } :root[data-theme="light"] .message.own .message-body { background: linear-gradient(135deg, #7c3aed, #6d28d9) !important; border-color: transparent !important; color: #fff !important; } :root[data-theme="light"] .message.own .message-body * { color: #fff !important; } :root[data-theme="light"] .welcome-banner h2 { -webkit-text-fill-color: #1d1d1f; color: #1d1d1f; } :root[data-theme="light"] .welcome-banner p { color: #565660; } :root[data-theme="light"] .online-pop, :root[data-theme="light"] .message-actions { background: rgba(255, 255, 255, 0.96); border-color: rgba(0, 0, 0, 0.10); } :root[data-theme="light"] .reaction-badge { background: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.10); } /* Chat composer — light pill + violet send button */ :root[data-theme="light"] .chat-input-container { background: linear-gradient(180deg, transparent, rgba(240, 238, 232, 0.92) 30%); border-top-color: rgba(0, 0, 0, 0.06); } :root[data-theme="light"] .chat-input-wrapper { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.10); } :root[data-theme="light"] .chat-input-wrapper:focus-within { border-color: rgba(124, 58, 237, 0.5); background: rgba(0, 0, 0, 0.02); } :root[data-theme="light"] .send-btn { background: linear-gradient(135deg, #7c3aed, #6d28d9); color: #fff; box-shadow: 0 8px 20px -8px rgba(124, 58, 237, 0.5); } :root[data-theme="light"] .send-btn:hover { background: linear-gradient(135deg, #6d28d9, #5b21b6); } /* Constructor — gallery/editor chrome light; 3D previews stay dark */ :root[data-theme="light"] { --cst-bg: #e9e7e1; --cst-elev: rgba(251, 250, 246, 0.92); --cst-elev-2: rgba(244, 242, 236, 0.92); --cst-surface: rgba(255, 255, 255, 0.6); --cst-surface-hi: rgba(0, 0, 0, 0.05); --cst-border: rgba(0, 0, 0, 0.10); --cst-border-hi: rgba(0, 0, 0, 0.18); --cst-text: #1d1d1f; --cst-muted: #565660; --cst-shadow: 0 10px 34px rgba(17, 12, 46, 0.12); } :root[data-theme="light"] .cst-tab.active { color: #5b21b6; background: rgba(124, 92, 255, 0.14); } /* ============================================================ 7. Gradient hero titles, more card titles, sidebar online bar, and themed chat rooms (keep their own dark background). ============================================================ */ /* Community hero titles were linear-gradient(#fff, ) → invisible on cream. Re-point to a darker, still-premium brand gradient. */ :root[data-theme="light"] .hk-head-titles h1 { background: linear-gradient(120deg, #5b21b6, #7c3aed 55%, #0e7490); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } :root[data-theme="light"] .bt-head-titles h1 { background: linear-gradient(120deg, #047857, #16a34a); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } :root[data-theme="light"] .ev-head-titles h1 { background: linear-gradient(120deg, #0e7490, #0891b2); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } :root[data-theme="light"] .mt-head-titles h1 { background: linear-gradient(120deg, #5b21b6, #7c5cff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Card & section titles that were near-white */ :root[data-theme="light"] .hk-card-title, :root[data-theme="light"] .bt-card-title, :root[data-theme="light"] .ev-title, :root[data-theme="light"] .mt-section-title, :root[data-theme="light"] .bt-rail-title { color: #1d1d1f; } :root[data-theme="light"] .ev-title-muted { color: #565660; } /* Sidebar "EN LÍNEA" sticky header — was a black gradient fade */ :root[data-theme="light"] .sidebar .sidebar-section.online-section .sidebar-section-header { background: linear-gradient(180deg, #faf9f6 0%, #faf9f6 76%, rgba(250, 249, 246, 0) 100%); } /* Ignore custom display-name colors inside the light sidebar online list. */ :root[data-theme="light"] .sidebar .online-user-name { color: #1d1d1f !important; } /* ── Themed chat rooms ── Rooms with a custom background (data-room-theme, e.g. "thoughts") are intentionally dark. Keep their original dark chat chrome instead of the light composer/bubbles — those clashed with the room image. */ :root[data-theme="light"] .chat-page[data-room-theme] .chat-header { background: rgba(8, 8, 13, 0.55); border-bottom-color: rgba(255, 255, 255, 0.06); } :root[data-theme="light"] .chat-page[data-room-theme] .message-body { background: rgba(255, 255, 255, 0.08); border: none; color: #f5f5f7; } :root[data-theme="light"] .chat-page[data-room-theme] .message.own .message-body { background: linear-gradient(135deg, rgba(124, 58, 237, 0.95), rgba(91, 33, 182, 0.96)) !important; color: #fff !important; } :root[data-theme="light"] .chat-page[data-room-theme] .chat-input-container { background: linear-gradient(180deg, transparent, rgba(5, 5, 7, 0.85) 32%); border-top-color: rgba(255, 255, 255, 0.06); } :root[data-theme="light"] .chat-page[data-room-theme] .chat-input-wrapper { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.12); } :root[data-theme="light"] .chat-page[data-room-theme] .chat-input-wrapper:focus-within { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.24); } :root[data-theme="light"] .chat-page[data-room-theme] .chat-input-wrapper input, :root[data-theme="light"] .chat-page[data-room-theme] .chat-input-wrapper textarea, :root[data-theme="light"] .chat-page[data-room-theme] .chat-input-wrapper [contenteditable] { color: #f5f5f7; } :root[data-theme="light"] .chat-page[data-room-theme] .send-btn { background: #fff; color: #050507; } :root[data-theme="light"] .chat-page[data-room-theme] .welcome-banner h2 { -webkit-text-fill-color: #f5f5f7; color: #f5f5f7; } /* Message TEXT itself (a child of .message-body using --text-primary) must stay light inside a themed room, or it goes dark-on-dark. */ :root[data-theme="light"] .chat-page[data-room-theme] .message-content { color: #f5f5f7; } :root[data-theme="light"] .chat-page[data-room-theme] .message.own .message-content { color: #fff; } /* ============================================================ 8. Contrast round 3 — washed stat numbers, marketplace prices, historia hero, senderos filter bar. ============================================================ */ /* Stat numbers across community pages (were #fff / pale accents) */ :root[data-theme="light"] .hk-stat-num, :root[data-theme="light"] .ev-stat-num, :root[data-theme="light"] .bt-stat-num, :root[data-theme="light"] .fb-stat-num { color: #1d1d1f; } :root[data-theme="light"] .hk-stat-num.is-purple { color: #6d28d9; } :root[data-theme="light"] .hk-stat-num.is-gold { color: #a16207; } :root[data-theme="light"] .ev-stat-num.is-cyan { color: #0891b2; } :root[data-theme="light"] .ev-stat-num.is-green { color: #16a34a; } /* Marketplace — filter titles + buy-button prices */ :root[data-theme="light"] .mk-filter-title { color: #1d1d1f; } :root[data-theme="light"] .mk-price { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.12); color: #1d1d1f; } :root[data-theme="light"] .mk-price:hover:not(:disabled) { background: #1d1d1f; border-color: #1d1d1f; color: #fff; } :root[data-theme="light"] .mk-price.is-locked { color: #86868b; background: transparent; } /* Historia — gradient hero title, badge, stat numbers, entry titles */ :root[data-theme="light"] .hist-head h1 { background: linear-gradient(120deg, #4c1d95, #6d28d9); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } :root[data-theme="light"] .hist-head-badge { color: #5b21b6; } :root[data-theme="light"] .hist-stat-num, :root[data-theme="light"] .hist-title { color: #1d1d1f; } /* Senderos — category filter bar was a dark strip */ :root[data-theme="light"] .sn-cat:hover { color: #1d1d1f; } :root[data-theme="light"] .sn-cat.active { background: #1d1d1f; border-color: #1d1d1f; color: #fff; } /* ============================================================ 9. Contrast round 4 — marketplace balance/tabs/range, tienda bonus + tx amounts, senderos headline pills + tabs. ============================================================ */ /* Marketplace — topbar balance, range pills, active tab */ :root[data-theme="light"] .mk-balance strong { color: #1d1d1f; } :root[data-theme="light"] .mk-range-pill { color: #1d1d1f; } :root[data-theme="light"] .mk-tab.active { color: #1d1d1f; border-bottom-color: #1d1d1f; } :root[data-theme="light"] .mk-tab.active .mk-tab-count { background: rgba(0, 0, 0, 0.08); color: #1d1d1f; } /* Tienda — package bonus pill + transaction amounts (pale green/red) */ :root[data-theme="light"] .package-bonus { color: #16a34a; } :root[data-theme="light"] .history-item-amount.positive { color: #16a34a; } :root[data-theme="light"] .history-item-amount.negative { color: #dc2626; } /* Senderos — detail headline pills + active course tab */ :root[data-theme="light"] .sn-headline-cats .sn-pill { color: #1d1d1f; background: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.1); } :root[data-theme="light"] .sn-tab.active { color: #1d1d1f; border-bottom-color: #1d1d1f; } /* Senderos gold (#f5b544 / #f5c469) washes out on cream even when darkened, so switch the whole "apoyo" accent to the brand violet in light mode — clearly visible and consistent with the rest of the platform. */ :root[data-theme="light"] { --sn-gold: #6d28d9; } :root[data-theme="light"] .sn-btn-support { color: #6d28d9; background: rgba(124, 58, 237, 0.1); border-color: rgba(124, 58, 237, 0.3); } :root[data-theme="light"] .sn-btn-support:hover { background: rgba(124, 58, 237, 0.16); } :root[data-theme="light"] .sn-support-cta { color: #6d28d9; background: rgba(124, 58, 237, 0.08); border-color: rgba(124, 58, 237, 0.24); } :root[data-theme="light"] .sn-support-cta:hover { background: rgba(124, 58, 237, 0.14); border-color: rgba(124, 58, 237, 0.4); } :root[data-theme="light"] .sn-support-cta small { color: rgba(124, 58, 237, 0.7); } :root[data-theme="light"] .sn-support-banner { background: rgba(124, 58, 237, 0.07); border-color: rgba(124, 58, 237, 0.22); } /* Per-sendero category color (--sn, user-chosen, set inline). It's mixed with #fff to brighten it for dark mode, so on cream it washes out — worst with yellow themes. In light mode, mix the SAME hue toward dark ink instead: every sendero keeps its color identity but stays readable. */ :root[data-theme="light"] .sn-reader-type, :root[data-theme="light"] .sn-lesson-bar-type, :root[data-theme="light"] .sn-vote-btn.active, :root[data-theme="light"] .sn-curr-stage.is-done .sn-curr-stage-num, :root[data-theme="light"] .sn-curr-stage-check.is-done, :root[data-theme="light"] .sn-teacher-badge, :root[data-theme="light"] .sn-contrib-type { color: color-mix(in srgb, var(--sn, #22c55e) 55%, #1d1d1f); } /* Solid progress bars + active-lesson accent — deepen so they read on cream */ :root[data-theme="light"] .sn-card-progbar i, :root[data-theme="light"] .sn-curr-prog-fill { background: color-mix(in srgb, var(--sn, #22c55e) 80%, #1d1d1f); } :root[data-theme="light"] .sn-lesson.active { border-left-color: color-mix(in srgb, var(--sn, #22c55e) 70%, #1d1d1f); } /* ============================================================ 10. Daxico — the globe/space canvas stays black (it's space), but the floating UI chrome switches to light glass. Its tokens are defined on .dx-content (not :root), so they must be overridden there or they stay dark. ============================================================ */ :root[data-theme="light"] .dx-content { --dx-ink: #1d1d1f; --dx-dim: #565660; --dx-faint: #86868b; --dx-line: rgba(0, 0, 0, 0.10); --dx-glass: rgba(0, 0, 0, 0.04); --dx-panel: rgba(250, 249, 246, 0.92); } :root[data-theme="light"] .dx-topbar { background: rgba(250, 249, 246, 0.72); border-bottom-color: rgba(0, 0, 0, 0.08); } :root[data-theme="light"] .dx-publish-btn { background: #1d1d1f; color: #fff; } :root[data-theme="light"] .dx-publish-btn:hover { background: #000; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); } :root[data-theme="light"] .dx-chip { background: rgba(255, 255, 255, 0.8); } :root[data-theme="light"] .dx-chip:hover { background: rgba(0, 0, 0, 0.05); color: #1d1d1f; } :root[data-theme="light"] .dx-chip.active { background: rgba(124, 58, 237, 0.9); border-color: transparent; color: #fff; } :root[data-theme="light"] .dx-zoom-btn { background: rgba(250, 249, 246, 0.88); } :root[data-theme="light"] .dx-zoom-btn:hover { background: #fff; border-color: rgba(0, 0, 0, 0.16); } :root[data-theme="light"] .dx-hud-hint { background: rgba(250, 249, 246, 0.82); } :root[data-theme="light"] .dx-search-input:focus { background: rgba(0, 0, 0, 0.02); } :root[data-theme="light"] .dx-card { background: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.09); } :root[data-theme="light"] .dx-card:hover { background: rgba(0, 0, 0, 0.055); border-color: rgba(0, 0, 0, 0.16); } :root[data-theme="light"] .dx-list::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.15); } :root[data-theme="light"] .dx-preview { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.1); } /* Daxico — event detail card (bottom-left) */ :root[data-theme="light"] .dx-detail { background: rgba(250, 249, 246, 0.95); box-shadow: 0 26px 64px rgba(17, 12, 46, 0.22); } :root[data-theme="light"] .dx-detail-close { background: rgba(0, 0, 0, 0.05); } :root[data-theme="light"] .dx-detail-close:hover { background: rgba(0, 0, 0, 0.1); } :root[data-theme="light"] .dx-detail-row a { color: #0891b2; } /* Daxico — publish modal (dx-modal-v2): labels, chips, preview, footer */ :root[data-theme="light"] .dx-flabel { color: #565660; } :root[data-theme="light"] .dx-modal-sub, :root[data-theme="light"] .dx-preview-meta { color: #565660; } :root[data-theme="light"] .dx-preview-title { color: #1d1d1f; } :root[data-theme="light"] .dx-ppill { background: rgba(0, 0, 0, 0.08); color: #1d1d1f; } :root[data-theme="light"] .dx-modal-v2 .dx-chip { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.1); color: #1d1d1f; } :root[data-theme="light"] .dx-modal-v2 .dx-chip:hover { background: rgba(0, 0, 0, 0.06); } :root[data-theme="light"] .dx-modal-v2 .modal-actions { background: linear-gradient(180deg, transparent, rgba(251, 250, 246, 0.96) 40%); } /* Daxico — leaflet marker tooltip / popup */ :root[data-theme="light"] .leaflet-tooltip, :root[data-theme="light"] .leaflet-popup-content-wrapper, :root[data-theme="light"] .leaflet-popup-tip { background: rgba(250, 249, 246, 0.96) !important; color: #1d1d1f !important; border-color: rgba(0, 0, 0, 0.1) !important; }