/* Each variable carries both palettes via light-dark(); `color-scheme` decides
   which one is used. Default follows the OS via `light dark`; an explicit
   data-theme (set by theme.js from a saved preference) overrides it. */
:root {
    color-scheme: light dark;

    --body-bg-light: light-dark(#f1f5f9, #0b1020); /* main background */
    --body-bg-dark: light-dark(#ffffff, #141b2d); /* card / table surface */
    --body-bg-border: light-dark(#e2e8f0, #273044);
    --sidebar-bg: light-dark(#f8fafc, #0a0f1a);
    --bg-secondary: light-dark(#eef2f7, #111827); /* row hover, raised rows */
    --font-color: light-dark(#0f172a, #f3f4f6);
    --text-secondary: light-dark(#475569, #9ca3af);
    --text-muted: light-dark(#64748b, #6b7280);
    --link-color: light-dark(#2563eb, #3b82f6);
    --link-hover: light-dark(#1d4ed8, #60a5fa);
    --success: light-dark(#16a34a, #22c55e);
    --success-bg: light-dark(#dcfce7, #163322);
    --graph-bg: #000;
}

html[data-theme="light"] {
    color-scheme: light;
}

html[data-theme="dark"] {
    color-scheme: dark;
}