:root {
--accent-color: #198f95;

 /* Accent icon filter approximation (turquoise) */
--accent-icon: sepia(0.2) saturate(3500%) hue-rotate(320deg) brightness(1);

 /* Backgrounds */
--bg-base: rgb(10, 45, 50);
--bg-surface: rgb(5, 35, 40);
--bg-deep: rgb(0, 25, 30);
--bg-elevated: rgb(20, 65, 70);
--bg-hover: rgb(25, 70, 75);

 /* Sidebar / Menus */
--bg-sidebar: rgb(5, 35, 40);
--bg-btn-menu: rgb(10, 45, 50);
--sidebar-icon-color: brightness(0) invert(1);
--sidebar-icon-hover: brightness(1.2) invert(1);

 /* Text colors */
--text-base: #d0f0f3;
--text-surface: #d0f0f3;
--text-elevated: #d0f0f3;
--text-deep: #a0c0c3;
--text-btn-menu: #d0f0f3;

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

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