:root {
--accent-color: #4caf50;

/* Accent icon filter approximation (green) */
--accent-icon: sepia(1) saturate(4000%) hue-rotate(80deg) brightness(0.9);

/* Backgrounds */
--bg-base: rgb(20, 30, 20);
--bg-surface: rgb(15, 25, 15);
--bg-deep: rgb(10, 20, 10);
--bg-elevated: rgb(35, 55, 35);
--bg-hover: rgb(45, 65, 45);

/* Sidebar / Menus */
--bg-sidebar: rgb(15, 25, 15);
--bg-btn-menu: rgb(25, 35, 25);
--sidebar-icon-color: brightness(0) invert(1);
--sidebar-icon-hover: brightness(1.2) invert(1);

/* Text colors */
--text-base: white;
--text-surface: white;
--text-elevated: white;
--text-deep: white;
--text-btn-menu: white;

/* Secondary / muted text */
--text-color-secondary: #bfcdbf;
--subtext-color: #bfcdbf;

/* Icon color (general icons) */
--icon-color: brightness(0) invert(1);

/* Font sizes */
--fs-xxs: 8px;
--fs-xs: 10px;
--fs-sm: 12px;
--fs-md: 14px;
--fs-lg: 16px;
--fs-xl: 18px;

/* Button Accent Colors */
--btn-accent-background: var(--accent-color);
--btn-accent-color: #ffffff;
--btn-accent-icon: brightness(0) invert(1);

/* Scroll Bar */
--scrollbar-track-color: var(--bg-surface);
--scrollbar-thumb-color: var(--bg-elevated);
--scrollbar-thumb-hover-color: var(--bg-hover);

/* Image Color */
--image-color: brightness(1);
}