:root {
--bg: #0a0000; /* deep red-black */
--card: #1a0505; /* deep dark red card */
--text: #ffffff; /* pure white text */
--muted: rgba(255, 255, 255, 0.55); /* white-muted */
--accent: #ffffff; /* white accent */
--accent-2: #f5f5f5;
--line: rgba(255, 255, 255, 0.25); /* subtle white */
--line-active: rgba(255, 255, 255, 0.7);
--panel: #160303;
--surface: #1f0707;
--line-weak: #2a0909;
--line-strong: #350c0c;
--text-1: #ffffff;
--text-2: #d4a5a5;
--text-3: #997070;
--hover: rgba(255, 255, 255, .08);
--active-bg: rgba(255, 255, 255, 0.15);
--modal-overlay: rgba(10, 0, 0, 0.7);
--modal-shadow: rgba(10, 0, 0, 0.5);
--toast-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(245, 245, 245, 0.95));
--table-container-bg: rgba(26, 5, 5, 0.7);
--table-surface: rgba(10, 0, 0, 0.5);
--table-border: rgba(255, 255, 255, 0.06);
--table-heading: #ffffff;
--table-text: rgba(255, 255, 255, 0.85);
--table-hover: rgba(255, 255, 255, 0.04);
--table-checkbox-border: rgba(255, 255, 255, 0.15);
--table-checkbox-bg: rgba(255, 255, 255, 0.05);
--table-checkbox-check: #ff6b6b;
--table-btn-border: rgba(255, 255, 255, 0.12);
--table-btn-text: rgba(255, 255, 255, 0.7);
--table-btn-hover-bg: rgba(255, 255, 255, 0.08);
--table-btn-hover-text: #ffffff;
--table-hover-border: rgba(255, 107, 107, 0.3);
--parent-border: #ffd75a;
--gap-1: 0.4rem;
--gap-2: 0.6rem;
--gap-3: 0.9rem;
--gap-4: 1.2rem;
--row-1: 40px;
--row-2: 34px;
--panel-w: 300px; /* upgraded sidepanel width */
--right-panel-w: 0px;
}

:root.charcoal {
--bg: #0d0d0d; /* darker charcoal */
--card: #1a1a1a; /* darker charcoal card */
--text: #e5e5e5; /* light gray text */
--muted: rgba(229, 229, 229, 0.55); /* muted gray */
--accent: #e5e5e5; /* light gray accent */
--accent-2: #d4d4d4;
--line: rgba(229, 229, 229, 0.15); /* more subtle gray lines */
--line-active: rgba(229, 229, 229, 0.5);
--panel: #151515;
--surface: #1f1f1f;
--line-weak: #242424;
--line-strong: #2a2a2a;
--text-1: #e5e5e5;
--text-2: #b8b8b8;
--text-3: #8a8a8a;
--hover: rgba(229, 229, 229, 0.08);
--active-bg: rgba(229, 229, 229, 0.15);
--modal-overlay: rgba(13, 13, 13, 0.7);
--modal-shadow: rgba(0, 0, 0, 0.6);
--toast-bg: linear-gradient(135deg, rgba(229, 229, 229, 0.95), rgba(212, 212, 212, 0.95));
--table-container-bg: rgba(26, 26, 26, 0.7);
--table-surface: rgba(13, 13, 13, 0.5);
--table-border: rgba(229, 229, 229, 0.06);
--table-heading: #e5e5e5;
--table-text: rgba(229, 229, 229, 0.85);
--table-hover: rgba(229, 229, 229, 0.04);
--table-checkbox-border: rgba(229, 229, 229, 0.15);
--table-checkbox-bg: rgba(229, 229, 229, 0.05);
--table-checkbox-check: #9a9a9a;
--table-btn-border: rgba(229, 229, 229, 0.12);
--table-btn-text: rgba(229, 229, 229, 0.7);
--table-btn-hover-bg: rgba(229, 229, 229, 0.08);
--table-btn-hover-text: #e5e5e5;
--table-hover-border: rgba(154, 154, 154, 0.3);
--parent-border: #00ffc9;
}

:root.light {
--bg: #fff5f5;
--panel: #ffffff;
--surface: #fee2e2;
--line-weak: #fecaca;
--line-strong: #fca5a5;
--card: #ffffff;
--text-1: #450a0a;
--text-2: #7f1d1d;
--text-3: #991b1b;
--hover: rgba(69, 10, 10, 0.08);
--active-bg: rgba(69, 10, 10, 0.12);
--modal-overlay: rgba(69, 10, 10, 0.55);
--toast-bg: linear-gradient(135deg, rgba(69, 10, 10, 0.85), rgba(127, 29, 29, 0.85));
--table-container-bg: rgba(255, 255, 255, 0.85);
--table-surface: rgba(255, 255, 255, 0.9);
--table-border: rgba(185, 28, 28, 0.12);
--table-heading: #7f1d1d;
--table-text: rgba(69, 10, 10, 0.85);
--table-hover: rgba(185, 28, 28, 0.04);
--table-checkbox-border: rgba(185, 28, 28, 0.2);
--table-checkbox-bg: rgba(254, 226, 226, 0.4);
--table-checkbox-check: #dc2626;
--table-btn-border: rgba(185, 28, 28, 0.15);
--table-btn-text: rgba(69, 10, 10, 0.7);
--table-btn-hover-bg: rgba(254, 226, 226, 0.5);
--table-btn-hover-text: #450a0a;
--table-hover-border: rgba(220, 38, 38, 0.35);
--parent-border: #000000;
}

html,
body {
height: 100%;
margin: 0;
background: var(--bg);
color: var(--text-1);
font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu,
Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji",
"Segoe UI Emoji";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

body.light-mode {
background: var(--bg);
color: var(--text-1);
}