/* ============================================================================= RandoConnect Theme System — Light & Dark Variables Use via `var(--t-*)` in any stylesheet. Overrides apply when is present. ============================================================================= */ :root, :root[data-theme="dark"] { /* Surfaces */ --t-bg: #0a0a0f; --t-bg-alt: #12121e; --t-bg-card: #16162a; --t-bg-elevated: #1d1d36; --t-bg-hover: #252545; --t-bg-overlay: rgba(10, 10, 15, 0.85); /* Text */ --t-text: #ffffff; --t-text-2: #c8c8e0; --t-text-3: #8888aa; --t-text-muted: #6c6c8a; /* Accent (same in both themes for brand consistency) */ --t-accent: #7c3aed; --t-accent-2: #a855f7; --t-accent-glow: rgba(124, 58, 237, 0.25); --t-accent-soft: rgba(124, 58, 237, 0.12); --t-accent-gradient: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%); /* Status */ --t-success: #10b981; --t-success-soft: rgba(16, 185, 129, 0.15); --t-warning: #f59e0b; --t-warning-soft: rgba(245, 158, 11, 0.15); --t-danger: #ef4444; --t-danger-soft: rgba(239, 68, 68, 0.12); /* Borders & Shadows */ --t-border: rgba(255, 255, 255, 0.08); --t-border-strong: rgba(255, 255, 255, 0.15); --t-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --t-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --t-shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.5); --t-shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.6); --t-shadow-accent: 0 8px 30px rgba(124, 58, 237, 0.3); /* Glass (frosted surface effect) */ --t-glass: rgba(22, 22, 42, 0.65); --t-glass-border: rgba(255, 255, 255, 0.08); color-scheme: dark; } :root[data-theme="light"] { --t-bg: #fafafa; --t-bg-alt: #f4f4f7; --t-bg-card: #ffffff; --t-bg-elevated: #ffffff; --t-bg-hover: #f0f0f5; --t-bg-overlay: rgba(255, 255, 255, 0.85); --t-text: #0a0a0f; --t-text-2: #3f3f55; --t-text-3: #6a6a80; --t-text-muted: #8a8aa0; /* Accent stays the same for brand consistency */ --t-accent: #7c3aed; --t-accent-2: #a855f7; --t-accent-glow: rgba(124, 58, 237, 0.18); --t-accent-soft: rgba(124, 58, 237, 0.08); --t-accent-gradient: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%); --t-success: #059669; --t-success-soft: rgba(16, 185, 129, 0.12); --t-warning: #d97706; --t-warning-soft: rgba(245, 158, 11, 0.15); --t-danger: #dc2626; --t-danger-soft: rgba(239, 68, 68, 0.1); --t-border: rgba(0, 0, 0, 0.08); --t-border-strong: rgba(0, 0, 0, 0.15); --t-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --t-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --t-shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.1); --t-shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.12); --t-shadow-accent: 0 8px 30px rgba(124, 58, 237, 0.25); --t-glass: rgba(255, 255, 255, 0.75); --t-glass-border: rgba(0, 0, 0, 0.06); color-scheme: light; } /* Smooth transitions between themes (but don't animate layout properties) */ html { transition: background-color 0.25s ease, color 0.25s ease; } body { transition: background-color 0.25s ease, color 0.25s ease; } /* Universal theme toggle button style (opt-in via .theme-toggle class) */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--t-bg-card); border: 1px solid var(--t-border); color: var(--t-text-2); cursor: pointer; font-size: 16px; transition: all 0.2s ease; padding: 0; flex-shrink: 0; } .theme-toggle:hover { background: var(--t-bg-hover); border-color: var(--t-border-strong); color: var(--t-text); transform: scale(1.05); } .theme-toggle:focus-visible { outline: 2px solid var(--t-accent); outline-offset: 2px; }