:root,
:root.light {
  --font-13: 13px;
  --font-14: 14px;
  --font-15: 15px;
  --font-16: 16px;
  --font-18: 18px;
  --font-20: 20px;
  --font-22: 22px;
  --font-25: 25px;
  --font-30: 30px;
  --font-35: 35px;
  --font-40: 40px;
  --font-50: 60px;
  --font-60: 60px;
  --font-74: 74px;


  --body-color: #f6f6f6;
  --title-color: #272727;
  --label-color: #363636;
  --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;
  --boxshadow-bg-color: 0 4px 23px 0 rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.15);
}

:root.dark {
  --body-color: #121212;  
  --color-white: #ffffff;
  --title-color: #fff;
  --label-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:;

  --boxshadow-bg-color: 0 4px 23px 0 rgb(255 255 255 / 20%), 0 2px 6px rgb(255 255 255 / 20%);
}


@media screen and (max-width: 1024px){
  :root{
    --font-13: 12px;
    --font-14: 13px;
    --font-15: 14px;
    --font-16: 15px;
    --font-18: 16px;
    --font-20: 18px;
    --font-22: 20px;
    --font-25: 21px;
    --font-30: 22px;
    --font-35: 27px;
    --font-40: 30px;
    --font-50: 35px;
    --font-60: 45px;
    --font-74: 55px;
  }
}