:root,
:root.light {
  --body-color: #f6f6f6;
  --title-color: #272727;
  --color-white: #ffffff;
  --subtitle-color: #636363;
  --card-bg-color: #fff;
  --card-header-border-color: #eee;

  --input-text-color: var(--subtitle-color);
  --input-bg-color: var(--card-bg-color);
  --input-border-color: #ddd;

  --border-color: #efefef;
  --topsearchbar-header-bg-color: var(--card-bg-color);
  --toptoolbar-header-bg-color: #2C2E43;

  --tab-bg-color: #f2f2f2;
  --tab-text-color: var(--subtitle-color);
  --tab-hover-text-color: var(--title-color);
  --tab-hover-color: var(--color-white);
  --topsearchbar-header-bg-color: var(--color-white);
  --thumbnail-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);

  --button-bg-color: #e9e9e9;
  --button-bg-hover-color: #e9e9e9;
  --button-saving-bg-color: rgb(116, 127, 134);
  --button-outline-bg-color: var(--card-bg-color);
  --button-outline-hover-bg-color: #f6f6f6;
  --pagebuilder-section-bg: var(--card-bg-color);

  --blue-text-color: #2F87FE;
  --sidebar-blue-text-color: var(--blue-text-color);
  --hover-blue-text-color: #0E60CF;

  --help-link-color: #545454;
  --help-link-hover-color: #000;

  --scrollbar-track-bg-color: rgba(0,0,0, 0.05);
  --scrollbar-track-scroll-bg-color: rgba(0,0,0, 0.2);
  --scrollbar-track-hover-bg-color:;


  --initial-opacity: 1;
  --initial-scale: 1;
  --initial-translateX: 0%;
  --initial-translateY: 0%;
  --animation-duration: 800ms;
}

:root.dark {
  --body-color: #121212;  
  --color-white: #ffffff;
  --title-color: #fff;
  --subtitle-color: #bfbfbf;
  --card-bg-color: #1e1e1e;
  --card-header-border-color: #3e3e42;
  --border-color: #3e3e42;

  --input-text-color: var(--subtitle-color);
  --input-bg-color: var(--card-bg-color);
  --input-border-color: var(--card-header-border-color);

  --topsearchbar-header-bg-color: #2d2d30;  
  --toptoolbar-header-bg-color: var(--button-bg-color);
  --thumbnail-box-shadow: 0px 8px 16px 0px rgba(96, 96, 96, 0.90);

  --tab-bg-color: #3e3e42;
  --tab-hover-color: var(--card-bg-color);
  --tab-hover-text-color: var(--title-color);
  --tab-text-color: var(--subtitle-color); 

  --button-bg-color: #3e3e42;
  --button-bg-hover-color: var(--tab-hover-color);
  --button-saving-bg-color: rgb(116, 127, 134);
  --button-outline-bg-color: var(--card-bg-color);
  --button-outline-hover-bg-color: var(--border-color);
  --pagebuilder-section-bg: var(--button-bg-color);;

  --blue-text-color: #559dff;
  --hover-blue-text-color: #2F87FE;
  --sidebar-blue-text-color: var(--color-white);

  --help-link-color: var(--subtitle-color);
  --help-link-hover-color: var(--subtitle-color);

  --scrollbar-track-bg-color: var(--button-bg-color);
  --scrollbar-track-scroll-bg-color: var(--tab-hover-color);
  --scrollbar-track-hover-bg-color:;
}