/* * Dark Mode Styles * Linear-style near-black dark theme * Overrides CSS variables when data-theme="dark" is set on */ [data-theme="dark"] { color-scheme: dark; /* Brand colors — slightly lightened for dark backgrounds */ --color-primary: #8B4049; --color-primary-dark: #a04d57; --color-primary-subtle: rgba(139, 64, 73, 0.15); /* Semantic colors */ --color-secondary: #8fa7bf; --color-success: #3cb371; --color-success-dark: #2e8b57; --color-danger: #e74c3c; --color-danger-dark: #c0392b; --color-warning: #f5a623; --color-info: #5dade2; --color-producer: #4caf50; --color-google: #5a9cf5; /* Warning surfaces */ --color-bg-warning: rgba(245, 166, 35, 0.12); --color-border-warning: rgba(245, 166, 35, 0.4); --color-text-warning: #f5a623; /* Text */ --color-text: #EDEDEF; --color-text-light: #8B8B96; --color-text-muted: #5C5C66; --color-text-inverse: #FFFFFF; /* Surfaces — Linear near-black */ --color-bg: #0D0D0D; --color-bg-card: #161618; --color-surface: #1C1C1F; --color-border: #2A2A2E; --color-border-hover: #3A3A3E; --color-bg-hover: #1C1C1F; /* Flash messages */ --color-flash-notice-bg: rgba(39, 174, 96, 0.1); --color-flash-notice-text: #6dd49e; --color-flash-notice-border: #27ae60; --color-flash-alert-bg: rgba(192, 57, 43, 0.1); --color-flash-alert-text: #e88e88; --color-flash-alert-border: #c0392b; /* Overlays */ --color-overlay: rgba(0, 0, 0, 0.7); --color-overlay-heavy: rgba(0, 0, 0, 0.95); /* Shadows — more prominent on dark */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5); --shadow-float: 0 8px 24px rgba(0, 0, 0, 0.5); } /* Form inputs in dark mode need explicit background/color. Exclude submit/button/reset inputs — those are styled by .btn classes. */ [data-theme="dark"] input:not([type="submit"]):not([type="button"]):not([type="reset"]), [data-theme="dark"] select, [data-theme="dark"] textarea { background-color: var(--color-bg); color: var(--color-text); border-color: var(--color-border); } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--color-text-muted); } /* Color input special case */ [data-theme="dark"] input[type="color"] { background-color: transparent; } /* Checkbox and radio don't need dark background */ [data-theme="dark"] input[type="checkbox"], [data-theme="dark"] input[type="radio"] { background-color: transparent; } /* ===== Theme Toggle Button ===== */ .theme-toggle { width: 36px; height: 36px; padding: 0; background: transparent; border: none; border-radius: var(--radius); color: var(--color-text-light); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; } .theme-toggle:hover { background: var(--color-surface); color: var(--color-text); }