:root {
    //colors
    --color-sidenav-background: #222225;
    --color-background-body: #1e1e20;

    --accent-color: #685fff;
    --accent-color-hover: #574fd6;
    --accent-color-active: #473fb3;
    --color-text-primary: #d9d9de;
    --color-text-secondary: #c8ceda99;
    --color-text-primary-hover: #ececf3;
    --color-secondary-btn-background: #27272b;
    --color-secondary-btn-background-hover: #ffffff17;
    --color-ghost-btn-hover: rgba(104, 95, 255, 0.08);
    --color-ghost-btn-active: rgba(104, 95, 255, 0.15);
    --color-input-text-placeholder: #c8ceda4d;
    --color-input-background: #27272b;
    --color-input-border: #c8ceda24;
    --color-modals-background: #222225;

    //border colors
    --color-components-card-border: #ffffff08;
    --color-divider-regular: #c8ceda24;
    --color-divider-subtle: #c8ceda14;

    //scrollbar colors
    --color-scrollbar-thumb: rgba(217, 217, 227, 0.16);
    --color-scrollbar-thumb-hover: rgba(217, 217, 227, 0.24);
    --color-scrollbar-track: transparent;

    --gray-50: #f9f9f9;
    --gray-100: #ececec;
    --gray-200: #e3e3e3;
    --gray-300: #cdcdcd;
    --gray-400: #b4b4b4;
    --gray-500: #9b9b9b;
    --gray-600: #676767;
    --gray-700: #424242;
    --gray-750: #2f2f2f;
    --gray-800: #212121;
    --gray-850: #1a1a1a;
    --gray-900: #171717;
    --gray-950: #0d0d0d;

    //nodes
    --color-nodes-background: #27272b;
    --color-nodes-actionbar-bg: #222225;
    --color-nodes-actionbar-border: #c8ceda14;
    --color-nodes-sidepanel-bg: #222225;
}

.my-app-light {
    //colors
    --color-sidenav-background: #ffffff;
    --color-background-body: #f8fafc;

    --accent-color: #685fff;
    --accent-color-hover: #574fd6;
    --accent-color-active: #473fb3;
    --color-text-primary: #1e293b;
    --color-text-secondary: #64748b;
    --color-text-primary-hover: #0f172a;
    --color-secondary-btn-background: #f1f5f9;
    --color-secondary-btn-background-hover: #e2e8f0;
    --color-ghost-btn-hover: rgba(104, 95, 255, 0.08);
    --color-ghost-btn-active: rgba(104, 95, 255, 0.15);
    --color-input-text-placeholder: #94a3b8;
    --color-input-background: #ffffff;
    --color-input-border: #e2e8f0;
    --color-modals-background: #ffffff;

    //border colors
    --color-components-card-border: #e2e8f0;
    --color-divider-regular: #e2e8f0;
    --color-divider-subtle: #f1f5f9;

    //scrollbar colors
    --color-scrollbar-thumb: rgba(71, 85, 105, 0.2);
    --color-scrollbar-thumb-hover: rgba(71, 85, 105, 0.3);
    --color-scrollbar-track: transparent;

    //nodes
    --color-nodes-background: #ffffff;
    --color-nodes-actionbar-bg: #f8fafc;
    --color-nodes-actionbar-border: #e2e8f0;
    --color-nodes-sidepanel-bg: #ffffff;
}
