/* ── Theme CSS Variables ─────────────────────────────────────────────────── */ /* Light = default. Dark activated via data-theme="dark" on . */ :root, [data-theme="light"] { --bg-page: #f3f4f6; --bg-surface: #ffffff; --bg-surface-hover: #f9fafb; --bg-surface-alt: #f8fafc; --bg-input: #ffffff; --bg-btn-secondary: #f3f4f6; --bg-hover-row: #e0f0ff; --bg-active: #eff6ff; --bg-selected: #eff6ff; --text-primary: #374151; --text-secondary: #6b7280; --text-tertiary: #9ca3af; --text-heading: #1f2937; --text-bold: #111827; --border-color: #e5e7eb; --border-light: #d1d5db; --shadow: rgba(0,0,0,0.08); --shadow-heavy: rgba(0,0,0,0.12); --chart-bg: #ffffff; --chart-text: #374151; --chart-grid: #f0f0f0; } [data-theme="dark"] { --bg-page: #0d1117; --bg-surface: #161b22; --bg-surface-hover: #1c2129; --bg-surface-alt: #1c2129; --bg-input: #0d1117; --bg-btn-secondary: #21262d; --bg-hover-row: #1a2736; --bg-active: #1a2736; --bg-selected: #1a2736; --text-primary: #c9d1d9; --text-secondary: #8b949e; --text-tertiary: #6e7681; --text-heading: #e6edf3; --text-bold: #f0f6fc; --border-color: #30363d; --border-light: #3d444d; --shadow: rgba(0,0,0,0.3); --shadow-heavy: rgba(0,0,0,0.5); --chart-bg: #161b22; --chart-text: #c9d1d9; --chart-grid: #21262d; }