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

/* Accent icon filter approximation (dark gold) */
--accent-icon: sepia(0.6) saturate(3000%) hue-rotate(30deg) brightness(1);

/* Backgrounds */
--bg-base: rgb(23 19 11);
--bg-surface: rgb(40, 35, 20);
--bg-deep: rgb(6 5 3);
--bg-elevated: rgb(90 63 10);
--bg-hover: rgb(70, 60, 35);

/* Sidebar / Menus */
--bg-sidebar: rgb(40, 35, 20);
--bg-btn-menu: rgb(23, 19, 11);
--sidebar-icon-color: brightness(1) saturate(2) sepia(1) hue-rotate(30deg) invert(0);
--sidebar-icon-hover: brightness(1.3) saturate(2) sepia(1) hue-rotate(30deg) invert(0);

/* Text colors */
--text-base: #ffffff;
--text-surface: #ffffff;
--text-elevated: #ffffff;
--text-deep: #ffffff;
--text-btn-menu: #f0e6c8;

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

/* Icon color (general icons) */
--icon-color: brightness(1) saturate(2) sepia(1) hue-rotate(30deg) invert(0);

/* 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: #fff8dc;
--btn-accent-icon: brightness(1) saturate(2) sepia(1) hue-rotate(30deg) invert(0);

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