:root {
    --treetop-gray-900: rgb(240, 240, 240);
    --treetop-gray-800: rgb(229, 229, 229);
    --treetop-gray-700: rgb(212, 212, 212);
    --treetop-gray-600: rgb(163, 163, 163);
    --treetop-gray-500: rgb(115, 115, 115);
    --treetop-gray-400: rgb(82, 82, 82);
    --treetop-gray-300: rgb(64, 64, 64);
    --treetop-gray-200: rgb(38, 38, 38);
    --treetop-gray-150: rgb(27, 27, 27);
    --treetop-gray-100: rgb(23, 23, 23);
    --treetop-gray-50: rgb(19, 19, 19);
    --treetop-gray-semitransparent: rgb(19, 19, 19, .4);

    --treetop-cool-gray-900: rgb(247, 250, 252);
    --treetop-cool-gray-800: rgb(237, 242, 247);
    --treetop-cool-gray-700: rgb(226, 232, 240);
    --treetop-cool-gray-600: rgb(203, 213, 224);
    --treetop-cool-gray-500: rgb(160, 174, 192);
    --treetop-cool-gray-400: rgb(113, 128, 150);
    --treetop-cool-gray-300: rgb(74, 85, 104);
    --treetop-cool-gray-200: rgb(45, 55, 72);
    --treetop-cool-gray-100: rgb(26, 32, 44);
    --treetop-cool-gray-50: rgb(18, 22, 31);
    --treetop-cool-gray-semitransparent: rgb(18, 22, 31, .4);

    --treetop-red-900: rgb(255, 230, 230);
    --treetop-red-800: rgb(240, 167, 167);
    --treetop-red-700: rgb(230, 138, 138);
    --treetop-red-600: rgb(236, 91, 91);
    --treetop-red-500: rgb(243, 62, 62);
    --treetop-red-400: rgb(214, 46, 46);
    --treetop-red-300: rgb(160, 28, 28);
    --treetop-red-200: rgb(107, 25, 25);
    --treetop-red-100: rgb(92, 28, 28);
    --treetop-red-50: rgb(63, 29, 29);
    --treetop-red-semitransparent: rgb(63, 29, 29, .4);

    --treetop-orange-900: rgb(255, 243, 220);
    --treetop-orange-800: rgb(254, 235, 200);
    --treetop-orange-700: rgb(251, 211, 141);
    --treetop-orange-600: rgb(246, 173, 85);
    --treetop-orange-500: rgb(237, 137, 54);
    --treetop-orange-400: rgb(206, 119, 49);
    --treetop-orange-300: rgb(153, 94, 46);
    --treetop-orange-200: rgb(110, 74, 44);
    --treetop-orange-100: rgb(80, 54, 33);
    --treetop-orange-50: rgb(65, 46, 30);
    --treetop-orange-semitransparent: rgb(65, 46, 30, .4);

    --treetop-yellow-900: rgb(254, 249, 195);
    --treetop-yellow-800: rgb(254, 249, 195);
    --treetop-yellow-700: rgb(253, 224, 71);
    --treetop-yellow-600: rgb(250, 204, 21);
    --treetop-yellow-500: rgb(224, 182, 14);
    --treetop-yellow-400: rgb(189, 153, 8);
    --treetop-yellow-300: rgb(143, 115, 3);
    --treetop-yellow-200: rgb(121, 97, 2);
    --treetop-yellow-100: rgb(75, 60, 1);
    --treetop-yellow-50: rgb(53, 42, 0);
    --treetop-yellow-semitransparent: rgb(53, 42, 0, .4);

    --treetop-green-900: rgb(221, 255, 230);
    --treetop-green-800: rgb(198, 246, 213);
    --treetop-green-700: rgb(154, 230, 180);
    --treetop-green-600: rgb(104, 211, 145);
    --treetop-green-500: rgb(72, 187, 120);
    --treetop-green-400: rgb(56, 161, 105);
    --treetop-green-300: rgb(47, 133, 90);
    --treetop-green-200: rgb(37, 99, 70);
    --treetop-green-100: rgb(32, 77, 56);
    --treetop-green-50: rgb(32, 63, 48);
    --treetop-green-semitransparent: rgb(32, 63, 48, .4);

    --treetop-teal-900: rgb(204, 255, 245);
    --treetop-teal-800: rgb(178, 245, 234);
    --treetop-teal-700: rgb(129, 230, 217);
    --treetop-teal-600: rgb(79, 209, 197);
    --treetop-teal-500: rgb(56, 178, 172);
    --treetop-teal-400: rgb(49, 151, 149);
    --treetop-teal-300: rgb(44, 122, 123);
    --treetop-teal-200: rgb(40, 94, 97);
    --treetop-teal-100: rgb(35, 78, 82);
    --treetop-teal-50: rgb(26, 63, 66);
    --treetop-teal-semitransparent: rgb(26, 63, 66, .4);

    --treetop-blue-900: rgb(213, 240, 255);
    --treetop-blue-800: rgb(190, 227, 248);
    --treetop-blue-700: rgb(144, 205, 244);
    --treetop-blue-600: rgb(99, 179, 237);
    --treetop-blue-500: rgb(66, 153, 225);
    --treetop-blue-400: rgb(49, 130, 206);
    --treetop-blue-300: rgb(43, 108, 176);
    --treetop-blue-200: rgb(44, 82, 130);
    --treetop-blue-100: rgb(42, 67, 101);
    --treetop-blue-50: rgb(30, 51, 80);
    --treetop-blue-semitransparent: rgb(30, 51, 80, .4);

    --treetop-indigo-900: rgb(212, 231, 255);
    --treetop-indigo-800: rgb(195, 218, 254);
    --treetop-indigo-700: rgb(163, 191, 250);
    --treetop-indigo-600: rgb(127, 156, 245);
    --treetop-indigo-500: rgb(102, 126, 234);
    --treetop-indigo-400: rgb(90, 103, 216);
    --treetop-indigo-300: rgb(76, 81, 191);
    --treetop-indigo-200: rgb(67, 65, 144);
    --treetop-indigo-100: rgb(60, 54, 107);
    --treetop-indigo-50: rgb(45, 39, 85);
    --treetop-indigo-semitransparent: rgb(45, 39, 85, .4);

    --treetop-purple-900: rgb(240, 225, 255);
    --treetop-purple-800: rgb(233, 216, 253);
    --treetop-purple-700: rgb(214, 188, 250);
    --treetop-purple-600: rgb(183, 148, 244);
    --treetop-purple-500: rgb(159, 122, 234);
    --treetop-purple-400: rgb(143, 109, 209);
    --treetop-purple-300: rgb(113, 86, 165);
    --treetop-purple-200: rgb(87, 66, 126);
    --treetop-purple-100: rgb(64, 48, 92);
    --treetop-purple-50: rgb(45, 32, 66);
    --treetop-purple-semitransparent: rgb(45, 32, 66, .4);

    --treetop-pink-900: rgb(255, 223, 238);
    --treetop-pink-800: rgb(253, 184, 217);
    --treetop-pink-700: rgb(248, 153, 199);
    --treetop-pink-600: rgb(245, 127, 184);
    --treetop-pink-500: rgb(238, 94, 164);
    --treetop-pink-400: rgb(218, 75, 149);
    --treetop-pink-300: rgb(184, 50, 128);
    --treetop-pink-200: rgb(151, 38, 109);
    --treetop-pink-100: rgb(112, 36, 89);
    --treetop-pink-50: rgb(82, 24, 64);
    --treetop-pink-semitransparent: rgb(82, 24, 64, .4);

    --treetop-secondary-900: #a09abd;
    --treetop-secondary-800: #85809e;
    --treetop-secondary-700: #68657c;
    --treetop-secondary-600: #545164;
    --treetop-secondary-500: #454252;
    --treetop-secondary-400: #3b3746;
    --treetop-secondary-300: #2e2c36;
    --treetop-secondary-200: #2a2931;
    --treetop-secondary-150: #28252e;
    --treetop-secondary-100: #222027;
    --treetop-secondary-50:  #19181d;
    --treetop-secondary-semitransparent: rgba(44, 43, 51, 0.4);

    --treetop-ui-element-background: #201f25;
    --treetop-ui-element-background-2: #2a2931;
    --treetop-ui-element-background-semi-transparent: rgba(42, 42, 44, 0.5);
    --treetop-ui-element-border-color: rgb(38, 38, 41);
    --treetop-ui-element-border-color-secondary: var(--treetop-ui-element-border-color);
    --treetop-ui-element-border: 1px solid var(--treetop-ui-element-border-color);

    --treetop-app-background: #19181d;
    --treetop-app-menu-background: var(--treetop-ui-element-background);
    --treetop-vertical-menu-background: var(--treetop-ui-element-background);
    /* --treetop-app-menu-box-shadow: 0px 0px 7.5px rgba(0, 0, 0, 0.3); */

    --treetop-app-header-background: var(--treetop-app-background);
    --treetop-app-header-text: var(--treetop-gray-100);
    --treetop-app-header-text-secondary: var(--treetop-gray-400);
    --treetop-app-header-border-color: rgb(37, 37, 37);

    --treetop-menu-border: 1px solid #25242b;
    --treetop-vertical-menu-box-shadow: none;

    --treetop-button-ghost-border-color: rgb(45, 45, 49);
    --treetop-box-shadow-color: rgba(0, 0, 0, 0.10);
    --treetop-box-shadow-base: 0px 0px 2px var(--treetop-box-shadow-color);

    --treetop-text-primary: rgb(247, 247, 247);
    --treetop-text-secondary: rgb(155, 155, 155);
    --treetop-text-tertiary: rgb(119, 119, 119);
    --treetop-text-quaternary: rgb(94, 94, 94);
    --treetop-prose-text-primary: rgb(231, 231, 231);
    --treetop-prose-heading-color: var(--treetop-text-primary);

    --treetop-popup-background: #26252c;
    --treetop-popup-foreground: var(--treetop-ui-element-background-2);
    --treetop-popup-ui-element-border-color: #2e2c35;
    
    --treetop-code-block-background: var(--treetop-ui-element-background);
    
    --treetop-menu-hover-background: rgb(255 255 255 / 4%);
    --treetop-menu-active-background: rgb(255 255 255 / 7.5%);
    
    --treetop-overlay-color-light: rgba(26, 26, 27, 0.75);
    --treetop-overlay-color-dark: rgba(26, 26, 27, 0.75);
    --treetop-overlay-ui-element-background: rgba(35, 35, 35, .6);
    
    --treetop-illustration-background: #201f25;
    --treetop-illustration-foreground: var(--treetop-ui-element-background-2);
    --treetop-illustration-foreground-2: #413e4b;
    
    --treetop-input-box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.2);
    --treetop-input-border: 1px solid var(--treetop-secondary-300);
    --treetop-ui-element-input-border: 1px solid var(--treetop-secondary-400);
    --treetop-popup-input-border-color: #433f4d;
    --treetop-input-background-disabled: #18161d;
}