/* Shared theme tokens. data-theme on is one of: system | light | dark.
Dark is the base (:root). Light applies explicitly for data-theme="light",
and for data-theme="system" only when the OS prefers a light scheme. */
:root {
--bg: #0f172a;
--card: #1e293b;
--accent: #3b82f6;
--accent-hover: #2563eb;
--cyan: #22d3ee;
--text: #e2e8f0;
--muted: #94a3b8;
--err: #f87171;
--ok: #4ade80;
--border: #334155;
--input-bg: #0f172a;
--chart-grid: rgba(148, 163, 184, 0.12);
--shadow: rgba(0, 0, 0, 0.4);
}
:root[data-theme="light"] {
--bg: #f1f5f9;
--card: #ffffff;
--accent: #2563eb;
--accent-hover: #1d4ed8;
--cyan: #0891b2;
--text: #0f172a;
--muted: #64748b;
--err: #dc2626;
--ok: #16a34a;
--border: #e2e8f0;
--input-bg: #f8fafc;
--chart-grid: rgba(100, 116, 139, 0.18);
--shadow: rgba(15, 23, 42, 0.12);
}
@media (prefers-color-scheme: light) {
:root[data-theme="system"] {
--bg: #f1f5f9;
--card: #ffffff;
--accent: #2563eb;
--accent-hover: #1d4ed8;
--cyan: #0891b2;
--text: #0f172a;
--muted: #64748b;
--err: #dc2626;
--ok: #16a34a;
--border: #e2e8f0;
--input-bg: #f8fafc;
--chart-grid: rgba(100, 116, 139, 0.18);
--shadow: rgba(15, 23, 42, 0.12);
}
}
body { transition: background-color .15s ease, color .15s ease; }
.icon-btn {
box-sizing: border-box;
width: 2.25rem;
height: 2.25rem;
padding: 0;
margin: 0;
background: var(--input-bg);
color: var(--text);
border: 1px solid var(--border);
border-radius: 8px;
font-size: 1rem;
font-family: inherit;
line-height: 1;
cursor: pointer;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
}
.icon-btn:hover { background: var(--border); }