:root {
    /* Layout */
    --body-max-width: 100%;
    --body-bg: #f8fafb;

    /* Typography */
    --text-color: #73879C;
    --orange-smile: #FF8054;
    --blue-smile: #3063FF;

    /* Sidebar */
    --sidebar-bg: var(--blue-smile); /* Dark blue sidebar */
    --sidebar-menu-color: var(--white); /* Light sidebar text */
    --sidebar-menu-submenu-color: var(--white);
    --sidebar-menu-active-item-bg: var(--orange-smile);
    --sidebar-menu-active-item-color: var(--white);
    --sidebar-menu-icon-color: var(--orange-smile);

    /*!* Borders *!*/
    --border-color: #D9DEE4;

    /* Navbar */
    --user-name-color: var(--blue-smile);
    --icon-color: var(--orange-smile);
    --icon-bg-color: #F5F7FA;

    /* Main Content */
    --title-color: #181728;
    --background-color: #F8F9FA;
    --bs-heading-color: #151D48;
    --active-tab: var(--orange-smile);

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 20px;
    --spacing-xxl: 24px;

    /* Border radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-full: 50%;
}