/* Shopping List — theme variables (dark default, light override via [data-sl-theme="light"] on ) */ :root { --sl-bg: #0f1117; --sl-surface: #1a1d27; --sl-surface2: #22263a; --sl-border: #2e3250; --sl-text: #e2e8f0; --sl-text-strong: #fff; --sl-text-hover: #cbd5e1; --sl-muted: #94a3b8; --sl-muted2: #64748b; --sl-accent-soft: #a5b4fc; --sl-warn-text: #fcd34d; --sl-danger-text: #fca5a5; --sl-overlay: rgba(0,0,0,.5); --sl-shadow: rgba(0,0,0,.4); } html[data-sl-theme="light"] { --sl-bg: #f8fafc; --sl-surface: #ffffff; --sl-surface2: #eef1f6; --sl-border: #e2e8f0; --sl-text: #0f172a; --sl-text-strong: #0f172a; --sl-text-hover: #1e293b; --sl-muted: #475569; --sl-muted2: #64748b; --sl-accent-soft: #4f46e5; --sl-warn-text: #b45309; --sl-danger-text: #dc2626; --sl-overlay: rgba(15,23,42,.35); --sl-shadow: rgba(15,23,42,.12); } /* ── Theme picker (used by the settings modal on Index/Detail) ── */ .sl-theme-picker { display: flex; gap: 10px; margin-bottom: 4px; } .sl-theme-opt { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 10px; border-radius: 12px; border: 1.5px solid var(--sl-border); background: var(--sl-bg); color: var(--sl-muted); cursor: pointer; font-size: .82rem; font-weight: 600; transition: all .15s; } .sl-theme-opt .material-icons { font-size: 22px; } .sl-theme-opt:hover { border-color: rgba(99,102,241,.5); color: var(--sl-text-hover); } .sl-theme-opt.selected { background: rgba(99,102,241,.12); border-color: #6366f1; color: var(--sl-accent-soft); }