:root {
--accent-color: #a855f7;

/* Accent icon filter approximation (purple) */
--accent-icon: sepia(1) saturate(6000%) hue-rotate(250deg) brightness(0.9);

/* Backgrounds */
--bg-base: rgb(18, 10, 28);
--bg-surface: rgb(26, 15, 40);
--bg-deep: rgb(14, 8, 24);
--bg-elevated: rgb(40, 24, 60);
--bg-hover: rgb(54, 34, 80);

/* Sidebar / Menus */
--bg-sidebar: rgb(22, 12, 32);
--bg-btn-menu: rgb(30, 18, 45);
--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: #cbb8e8;
--subtext-color: #cbb8e8;

/* 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);
}