/** * LeapTools Theme System * Light theme is default, dark theme activated by .dark class on */ :root { /* Light theme (default) */ --color-bg: #ffffff; --color-bg-secondary: #f8fafc; --color-card: #ffffff; --color-card-hover: #f1f5f9; --color-border: #e2e8f0; --color-border-light: #f1f5f9; --color-text: #0f172a; --color-text-secondary: #334155; --color-text-muted: #475569; --color-primary: #06B6D4; --color-primary-hover: #0891B2; --color-nav-bg: rgba(255, 255, 255, 0.8); --color-nav-border: rgba(0, 0, 0, 0.05); --color-shadow: rgba(0, 0, 0, 0.1); } .dark { /* Dark theme */ --color-bg: #020617; --color-bg-secondary: #0f172a; --color-card: #1e293b; --color-card-hover: #334155; --color-border: #334155; --color-border-light: #1e293b; --color-text: #ffffff; --color-text-secondary: #cbd5e1; --color-text-muted: #94a3b8; --color-primary: #06B6D4; --color-primary-hover: #0891B2; --color-nav-bg: rgba(2, 6, 23, 0.8); --color-nav-border: rgba(255, 255, 255, 0.05); --color-shadow: rgba(0, 0, 0, 0.3); } /* Base styles using CSS variables */ body { font-family: 'Inter', sans-serif; background-color: var(--color-bg); color: var(--color-text); transition: background-color 0.3s ease, color 0.3s ease; } /* Theme toggle button */ .theme-toggle { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--color-border); background: var(--color-card); color: var(--color-text-secondary); cursor: pointer; transition: all 0.2s ease; } .theme-toggle:hover { background: var(--color-card-hover); color: var(--color-text); border-color: var(--color-primary); } /* Sun icon (shown in dark mode) */ .theme-toggle .sun-icon { display: none; } .dark .theme-toggle .sun-icon { display: block; } /* Moon icon (shown in light mode) */ .theme-toggle .moon-icon { display: block; } .dark .theme-toggle .moon-icon { display: none; } /* Utility classes for theme colors */ .bg-theme { background-color: var(--color-bg); } .bg-theme-secondary { background-color: var(--color-bg-secondary); } .bg-theme-card { background-color: var(--color-card); } .text-theme { color: var(--color-text); } .text-theme-secondary { color: var(--color-text-secondary); } .text-theme-muted { color: var(--color-text-muted); } .border-theme { border-color: var(--color-border); } /* Gradient border for cards */ .gradient-border { position: relative; } .gradient-border::before { content: ''; position: absolute; inset: -2px; background: linear-gradient(135deg, #06B6D4, #8B5CF6); border-radius: inherit; z-index: -1; } /* Hero gradient - adapts to theme */ .hero-gradient { background: linear-gradient(180deg, var(--color-bg-secondary) 0%, var(--color-bg) 100%); } /* Grid background pattern */ .grid-bg { background-image: linear-gradient(var(--color-border-light) 1px, transparent 1px), linear-gradient(90deg, var(--color-border-light) 1px, transparent 1px); background-size: 50px 50px; }