:root {
    --accent-color: #e91e63;   /* Pink 500 */

    /* Backgrounds */
    --bg-base: #ffffff;
    --bg-surface: #f3f4ff;
    --bg-elevated: #e0e2f5;
    --bg-hover: #e8eaf6;
    --bg-deep: #d1c4e9;

    /* Sidebar / Menus */
    --bg-sidebar: #f3f4ff;
    --bg-btn-menu: #ffffff;
    --sidebar-icon-color: filter 0.1s cubic-bezier(0.4, 0, 0.2, 1);
    --sidebar-icon-hover: brightness(1) invert(1);

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

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

    /* Icon color (black) */
    --icon-color: #000000;

    /* 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);     /* Primary accent button background */
    --btn-accent-color: #ffffff; 
    
    /* Scroll Bar */
    
    --scrollbar-track-color: var(--bg-surface);
    --scrollbar-thumb-color: var(--accent-color);
    --scrollbar-thumb-hover-color: color-mix(in srgb, var(--accent-color), black 20%);
    
    /* Image Color */
    --image-color: brightness(.25);
}