/* ══════════════════════════════════════════════════════ e-Cities — Dark Mode Overrides Applied when [data-theme="dark"] is on ══════════════════════════════════════════════════════ */ [data-theme="dark"] { --ec-bg: #0F172A; /* slate-900 */ --ec-bg-secondary: #1E293B; /* slate-800 */ --ec-bg-tertiary: #334155; /* slate-700 */ --ec-surface: #1E293B; --ec-surface-hover: #334155; --ec-border: #334155; /* slate-700 */ --ec-border-strong: #475569; /* slate-600 */ --ec-text: #F1F5F9; /* slate-100 */ --ec-text-secondary: #94A3B8; /* slate-400 */ --ec-text-muted: #64748B; /* slate-500 */ --ec-primary-subtle: #3E2723; /* brown-900 — dark orange subtle */ --ec-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --ec-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3); --ec-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3); --ec-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.3); } /* ── Dark mode specific overrides ── */ [data-theme="dark"] .ec-header__logo img { /* Logo is already orange — just brighten slightly for dark bg */ filter: brightness(1.15); } [data-theme="dark"] .ec-card { border-color: var(--ec-border); } [data-theme="dark"] .ec-header { background: rgba(15, 23, 42, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom-color: var(--ec-border); } [data-theme="dark"] .ec-input, [data-theme="dark"] .ec-select, [data-theme="dark"] .ec-textarea { background: var(--ec-bg-tertiary); border-color: var(--ec-border); color: var(--ec-text); } [data-theme="dark"] .ec-input::placeholder, [data-theme="dark"] .ec-textarea::placeholder { color: var(--ec-text-muted); } [data-theme="dark"] .ec-btn-secondary { background: var(--ec-bg-tertiary); border-color: var(--ec-border); color: var(--ec-text); } [data-theme="dark"] .ec-footer { background: var(--ec-bg-secondary); border-top-color: var(--ec-border); } [data-theme="dark"] .ec-badge { background: var(--ec-bg-tertiary); }