._theme-glass {
  /* Legacy styling */
  --wf-color-bg-secondary: var(--wf-gray-300);
  --wf-color-background-info: #bedcf1;
  --wf-color-text-warning: var(--wf-yellow-700);
  --wf-color-text-info: var(--wf-dark-blue-500);
  --wf-color-link-01: var(--wf-gray-700); /* Consolidate this */
  --wf-color-link-hover-01: var(--wf-gray-800); /* Consolidate this */

  --gray1: var(--wf-gray-800);
  --gray2: var(--wf-gray-700);
  --gray3: var(--wf-gray-500);
  --gray4: var(--wf-gray-400);
  --gray5: var(--wf-gray-300);
  --gray6: var(--wf-gray-200);
  --gray7: var(--wf-gray-100);
  --gray8: var(--wf-gray-0);
  --accent: var(--wf-blue-300);

  /* Refactored tokens */

  /* Backgrounds */
  --wf-background: #ffffff00;
  --wf-page-background: #ffffff;
  --wf-page-background-image: radial-gradient(
      119.62% 192.08% at 50% -12.01%,
      #fff 38.75%,
      rgba(255, 255, 255, 0) 100%
    ),
    linear-gradient(96deg, #8ec6ff 17.86%, #c9caf1 72.43%, #b5afed 88.47%);
  --wf-background-secondary: #ffffffb0;
  --wf-background-tertiary: var(--wf-gray-200);
  --wf-background-accent: var(--wf-blue-300);
  --wf-background-inverse: var(--wf-gray-800);
  --wf-background-inverse-transparent: var(--wf-black-opaque-5);

  /* Borders */
  --wf-border-default: var(--wf-gray-300);
  --wf-border-active: var(--wf-blue-300);
  --wf-border-subtle: var(--wf-gray-200);
  --wf-border-strong: var(--wf-gray-700);

  /* Text */
  --wf-text-primary: var(--wf-gray-800);
  --wf-text-secondary: var(--wf-gray-700);
  --wf-text-on-color: var(--wf-gray-0);
  --wf-text-inverse: var(--wf-gray-300);
  --wf-text-helper: var(--wf-gray-500);
  --wf-text-disabled: var(--wf-gray-400);
  --wf-text-error: var(--wf-red-500);

  /* Buttons */
  --wf-button-background: var(--wf-gray-200);
  --wf-button-background-primary: var(--wf-blue-300);
  --wf-button-background-primary-hover: var(--wf-blue-400);
  --wf-button-background-primary-active: var(--wf-blue-500);
  --wf-button-background-secondary: var(--wf-gray-300);
  --wf-button-background-secondary-hover: var(--wf-gray-400);
  --wf-button-background-secondary-active: var(--wf-gray-400);
  --wf-ghost-button-background-hover: var(--wf-gray-100);
  --wf-ghost-button-background-active: var(--wf-gray-200);
  --wf-button-background-danger: var(--wf-red-500);
  --wf-button-background-danger-hover: var(--wf-red-700);
  --wf-button-background-loading: var(--wf-gray-300);
  --wf-button-disabled: var(--wf-gray-200);

  /* Icons */
  --wf-icon-primary: var(--wf-gray-500);
  --wf-icon-secondary: var(--wf-gray-700);
  --wf-icon-tertiary: var(--wf-gray-300);
  --wf-icon-active: var(--wf-blue-300);

  /* Support */
  --wf-support-success: var(--wf-green-700);
  --wf-support-warning: var(--wf-yellow-200);
  --wf-support-error: var(--wf-red-500);

  /* Links */
  --wf-link-primary: var(--wf-gray-500);
  --wf-link-secondary: var(--wf-blue-300);

  /* Header */
  --wf-header-background: #ffffff;
  --wf-header-border: var(--wf-gray-200);
  --wf-header-text: var(--wf-gray-500);
  --wf-header-icon: var(--wf-gray-500);
  --wf-header-text-secondary: var(--wf-gray-700);
  --wf-header-button-background-hover: var(
    --wf-gray-200
  ); /* Header icon background hover */
  --wf-header-button-background-active: var(--wf-gray-300);
  --wf-header-button-background-disabled: var(--wf-gray-300);

  /* Menu */
  --wf-menu-background: var(--wf-gray-0);
  --wf-menu-text: var(--wf-gray-700);
  --wf-menu-border: var(--wf-gray-200);
  --wf-menu-icon: var(--wf-gray-700);

  /* Input */
  --wf-input-background: var(--wf-gray-0);
  --wf-input-background-hover: var(--wf-gray-300);
  --wf-input-default: var(--wf-gray-300);
  --wf-input-active: var(--wf-blue-300);

  /* Text, Highlight and Tag colors - Replace the #values with colour vars */
  --wf-tag-text: var(--wf-gray-800);
  --wf-tag-background: var(--wf-gray-300);
  --wf-tag-text-red: #e02424;
  --wf-tag-background-red: #fbd5d5;
  --wf-tag-text-orange: #d03801;
  --wf-tag-background-orange: #fcd9bd;
  --wf-tag-text-yellow: #9f580a;
  --wf-tag-background-yellow: #fce96a;
  --wf-tag-text-green: #057a55;
  --wf-tag-background-green: #bcf0da;
  --wf-tag-text-blue: #1c64f2;
  --wf-tag-background-blue: #c3ddfd;
  --wf-tag-text-purple: #7e3af2;
  --wf-tag-background-purple: #dcd7fe;
  --wf-tag-text-gray: #64748b;
  --wf-tag-background-gray: #e2e8f0;
  --wf-tag-text-teal: #108190;
  --wf-tag-background-teal: #bcf0f0;
  --wf-tag-text-sky: #007ab8;
  --wf-tag-background-sky: #bae6fd;
  --wf-tag-text-pink: #d60bc1;
  --wf-tag-background-pink: #fbd7fe;

  /* Misc */
  --wf-highlight: var(--wf-blue-200);
  --wf-search-highlight: var(--wf-yellow-100);
  --wf-icon-star: var(--wf-yellow-200);
  --wf-present-theme: default;
  --wf-payment-stripe-theme: stripe;

  --webkit-scrollbar-track: none; /* Scrollbar background color */
  --webkit-scrollbar-thumb: var(
    --wf-gray-300
  ); /* Scrollbar drag handle color */
  --webkit-scrollbar-thumb-hover: var(
    --wf-gray-400
  ); /* Scrollbar drag handle hover color */

  --text-annotation-icon-colors-mentioned: #38bdf8;
  --text-annotation-icon-colors-added: #31c48d;
  --text-annotation-icon-colors-moved: #ac94fa;
  --text-annotation-icon-colors-completed: #97a6ba;
  --text-annotation-icon-colors-edited: #e3a008;

  --text-annotation-background-colors-mentioned: #eefaff;
  --text-annotation-background-colors-added: #bcf0db;
  --text-annotation-background-colors-moved: #dcd7fe;
  --text-annotation-background-colors-completed: #e2e8f0;
  --text-annotation-background-colors-edited: #fef6bc;

  --root-thread-box-shadow: rgba(0, 0, 0, 0.2) 0px 7px 9px -4px,
    rgba(0, 0, 0, 0.14) 0px 14px 21px 2px, rgba(0, 0, 0, 0.12) 0px 5px 26px 4px;
  --comment-box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2),
    0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);

  --comment-box-shadow-stacked-2: 0px 3px 3px -2px rgba(0, 0, 0, 0.2),
    0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12),
    0 10px 0 -5px #ffffff, 0px 13px 3px -7px rgba(0, 0, 0, 0.2),
    0px 13px 4px -5px rgba(0, 0, 0, 0.14), 0px 11px 8px -5px rgba(0, 0, 0, 0.12),
    0 20px 0 -10px #ffffff, 0px 23px 3px -12px rgba(0, 0, 0, 0.2),
    0px 23px 4px -10px rgba(0, 0, 0, 0.14),
    0px 21px 8px -10px rgba(0, 0, 0, 0.12);
}

._theme-glass .page {
  border-radius: 20px !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: #ffffff !important;
  background-color: #ffffff85;
  box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.047);
}

._theme-glass .bg-default {
  backdrop-filter: blur(26px); /* blurs background behind element */
  -webkit-backdrop-filter: blur(26px); /* Safari */
  background: rgba(255 255 255 / 85%); /* translucent to see the blur */
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
}

._theme-glass .header {
  border-bottom: 1px solid rgb(255, 255, 255);
  backdrop-filter: blur(26px); /* blurs background behind element */
  -webkit-backdrop-filter: blur(26px); /* Safari */
  background: rgba(255 255 255 / 85%); /* translucent to see the blur */
}

._theme-glass .pageContainer {
  position: relative;
}

._theme-glass .image-viewer {
  border-radius: 12px !important;
}

._theme-glass .leftBar div {
  box-shadow: none !important;
}

._theme-glass .ai-chat-button {
  background-color: #ffffffd1;
}

._theme-glass .div.breadcrumbs {
  background-color: #ffffffd1;
}