/* ================================================================ Activity Theme — Light (default) and Dark mode Applied to all activity pages (Math, Typing, Speech) Toggle via .activity-dark class on or wrapper ================================================================ */ /* ── Light Mode (Default) — matches SocialDiverse website theme ── */ :root { --act-bg: linear-gradient(160deg, #f0faf8 0%, #f7f7ff 50%, #f2f0fe 100%); --act-bg-flat: #f5f7fa; --act-bg-card: #ffffff; --act-bg-card-hover: #f0f7f5; --act-bg-overlay: rgba(255, 255, 255, 0.96); --act-bg-input: #ffffff; --act-bg-subtle: #f8fafb; --act-border: #e5e7eb; --act-border-hover: #d1d5db; --act-text: #333333; --act-text-secondary: #555555; --act-text-muted: #888888; --act-text-accent: #1d9a8a; --act-topbar-bg: rgba(255, 255, 255, 0.88); --act-topbar-border: rgba(0, 0, 0, 0.06); --act-topbar-text: #333333; --act-topbar-back: #555555; --act-object-bg: #ffffff; --act-object-border: #e5e7eb; --act-object-counted-bg: rgba(251, 191, 36, 0.12); --act-object-counted-border: #f59e0b; --act-object-counted-shadow: rgba(251, 191, 36, 0.25); --act-input-bg: #ffffff; --act-input-border: #d1d5db; --act-input-text: #333333; --act-input-placeholder: #9ca3af; --act-input-focus: #1d9a8a; --act-btn-bg: linear-gradient(135deg, #1d9a8a, #6a60f0); --act-btn-text: #ffffff; --act-group-bg: #ffffff; --act-group-border: #d1d5db; --act-overlay-bg: rgba(255, 255, 255, 0.97); --act-overlay-text: #333333; --act-shadow: rgba(0, 0, 0, 0.06); --act-number-color: #1d9a8a; --act-correct-bg: rgba(76, 175, 80, 0.1); --act-correct-border: #4CAF50; --act-hint-color: #f59e0b; --act-celebration-bg: rgba(255, 255, 255, 0.96); --act-eq-num: #333333; --act-eq-op: #888888; --act-eq-answer-bg: rgba(29, 154, 138, 0.06); --act-eq-answer-border: rgba(29, 154, 138, 0.3); --act-show-btn-bg: rgba(29, 154, 138, 0.08); --act-show-btn-border: rgba(29, 154, 138, 0.3); --act-show-btn-text: #1d9a8a; --act-numpad-bg: #ffffff; --act-numpad-border: #e5e7eb; --act-numpad-text: #333333; --act-toggle-bg: #f0f0f0; --act-toggle-border: #d1d5db; --act-toggle-text: #555555; } /* ── Dark Mode ── */ .activity-dark { --act-bg: #0f1923; --act-bg-card: rgba(255, 255, 255, 0.04); --act-bg-card-hover: rgba(255, 255, 255, 0.07); --act-bg-overlay: rgba(15, 25, 35, 0.96); --act-bg-input: rgba(255, 255, 255, 0.06); --act-bg-subtle: rgba(255, 255, 255, 0.03); --act-border: rgba(255, 255, 255, 0.08); --act-border-hover: rgba(255, 255, 255, 0.15); --act-text: #f3f4f6; --act-text-secondary: #d1d5db; --act-text-muted: #7c8a96; --act-text-accent: #5ef5d8; --act-topbar-bg: rgba(15, 25, 35, 0.92); --act-topbar-border: rgba(255, 255, 255, 0.06); --act-topbar-text: #e5e7eb; --act-topbar-back: #b0bec5; --act-object-bg: rgba(255, 255, 255, 0.06); --act-object-border: rgba(255, 255, 255, 0.1); --act-object-counted-bg: rgba(251, 191, 36, 0.12); --act-object-counted-border: #fbbf24; --act-object-counted-shadow: rgba(251, 191, 36, 0.3); --act-input-bg: rgba(255, 255, 255, 0.08); --act-input-border: rgba(255, 255, 255, 0.2); --act-input-text: #f3f4f6; --act-input-placeholder: #6b7280; --act-input-focus: #8b5cf6; --act-btn-bg: linear-gradient(135deg, #8b5cf6, #7c3aed); --act-btn-text: #ffffff; --act-group-bg: rgba(255, 255, 255, 0.03); --act-group-border: rgba(255, 255, 255, 0.15); --act-overlay-bg: rgba(15, 25, 35, 0.96); --act-overlay-text: #f3f4f6; --act-shadow: rgba(0, 0, 0, 0.3); --act-number-color: #fbbf24; --act-correct-bg: rgba(76, 175, 80, 0.15); --act-correct-border: #4CAF50; --act-hint-color: #fbbf24; --act-celebration-bg: rgba(15, 25, 35, 0.92); --act-eq-num: #e5e7eb; --act-eq-op: #7c8a96; --act-eq-answer-bg: rgba(251, 191, 36, 0.06); --act-eq-answer-border: rgba(251, 191, 36, 0.3); --act-show-btn-bg: rgba(139, 92, 246, 0.08); --act-show-btn-border: rgba(139, 92, 246, 0.3); --act-show-btn-text: #c4b5fd; --act-numpad-bg: rgba(255, 255, 255, 0.06); --act-numpad-border: rgba(255, 255, 255, 0.1); --act-numpad-text: #e5e7eb; --act-toggle-bg: rgba(255, 255, 255, 0.04); --act-toggle-border: rgba(255, 255, 255, 0.12); --act-toggle-text: #9ca3af; } /* ── Theme Toggle Switch ── */ .activity-theme-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 20px; border: 1px solid var(--act-border); background: var(--act-bg-subtle); cursor: pointer; font-size: 0.82rem; color: var(--act-text-muted); transition: all 0.2s; user-select: none; } .activity-theme-toggle:hover { border-color: var(--act-border-hover); } .activity-theme-toggle i { font-size: 0.9rem; } .activity-theme-toggle__label { font-weight: 500; }