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

    --accent-icon: sepia(1) saturate(5000%) hue-rotate(20deg) brightness(1.0);

    /* Backgrounds */
    --bg-base: rgb(40, 25, 10);
    --bg-surface: rgb(30, 20, 5);
    --bg-deep: rgb(25, 15, 5);
    --bg-elevated: rgb(60, 35, 10);
    --bg-hover: rgb(70, 40, 10);

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

    /* Text */
    --text-base: white;
    --text-surface: white;
    --text-elevated: white;
    --text-deep: white;
    --text-btn-menu: white;
    --text-color-secondary: #e0cfc0;
    --subtext-color: #e0cfc0;

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

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