/* ========================================================================== Light Theme CSS Variables Applied when data-theme="light" is set on element ========================================================================== */ [data-theme="light"] { /* Colors - Light Theme */ --color-bg-primary: #ffffff; /* Pure white background */ --color-bg-secondary: #f8f9fa; /* Subtle off-white for depth */ --color-bg-card: #ffffff; /* White cards with shadows */ --color-bg-input: #f5f5f5; /* Light gray input backgrounds */ --color-text-light: #1a1a1a; /* Dark text for readability */ --color-text-muted: #6c757d; /* Medium gray for secondary text */ --color-text-dark: #ffffff; /* White text (for colored backgrounds) */ --color-accent-blue: #0077cc; /* Slightly darker blue for contrast */ --color-accent-purple: #8b5cf6; /* Vibrant purple */ --color-border-subtle: #e0e0e0; /* Light gray borders */ --color-success: #059669; /* Darker green for visibility */ --color-warning: #d97706; /* Darker orange */ --color-error: #dc2626; /* Strong red */ } /* ========================================================================== Light Theme - Component Overrides ========================================================================== */ [data-theme="light"] body { background: var(--color-bg-primary); color: var(--color-text-light); } /* Cards need shadows in light mode for depth */ [data-theme="light"] .card, [data-theme="light"] .trip-item { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); border-color: var(--color-border-subtle); } [data-theme="light"] .card:hover, [data-theme="light"] .trip-item:hover { box-shadow: 0 8px 24px rgba(0, 119, 204, 0.15); border-color: var(--color-accent-blue); } /* Form containers */ [data-theme="light"] .form-container { background: var(--color-bg-card); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); } /* Links */ [data-theme="light"] a { color: var(--color-accent-blue); } [data-theme="light"] a:hover { color: var(--color-accent-purple); } /* Navigation */ [data-theme="light"] .nav { border-bottom-color: var(--color-border-subtle); } [data-theme="light"] .page-header { border-bottom-color: var(--color-border-subtle); } /* Custom cursor adjustments for light mode */ [data-theme="light"] .custom-cursor { background-color: var(--color-accent-blue); mix-blend-mode: multiply; /* Better blend mode for light backgrounds */ } /* Loading spinner */ [data-theme="light"] .loading { border-color: var(--color-border-subtle); border-top-color: var(--color-accent-blue); } /* Buttons - enhance contrast in light mode */ [data-theme="light"] .btn-secondary { background: var(--color-bg-secondary); border-color: var(--color-border-subtle); color: var(--color-text-light); } [data-theme="light"] .btn-secondary:hover:not(:disabled) { background: var(--color-bg-primary); border-color: var(--color-accent-blue); } /* ========================================================================== Smooth Theme Transition ========================================================================== */ html { transition: background-color 0.3s ease, color 0.3s ease; } body, .card, .form-container, .btn, a { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }