/**
  This file is provided to the user with a 10 minute cache control.
  If you'd like to force update the CSS for the user, please add a cachebuster to the HTML files that reference it.
  (ie. `/css/index.css?1`)
*/

@font-face {
  font-family: "Quattro";
  src:
    url("/https:/sudowrite.com/assets/iAWriterQuattroS-Regular.woff") format("woff"),
    url("/https:/sudowrite.com/assets/iAWriterQuattroS-Regular.woff2") format("woff2"),
    url("/https:/sudowrite.com/assets/iAWriterQuattroS-Regular.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "OpenDyslexic";
  src:
    url("/https:/sudowrite.com/assets/OpenDyslexic-Regular.woff") format("woff"),
    url("/https:/sudowrite.com/assets/OpenDyslexic-Regular.woff2") format("woff2"),
    url("/https:/sudowrite.com/assets/OpenDyslexic-Regular.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Chromium/Safari only */
body[data-theme],
body[data-theme] * {
  scrollbar-color: auto;
  scrollbar-width: auto;
}

body[data-theme]::-webkit-scrollbar,
body[data-theme] *::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

body[data-theme]::-webkit-scrollbar-track,
body[data-theme] *::-webkit-scrollbar-track {
  background: transparent;
}

body[data-theme]::-webkit-scrollbar-thumb,
body[data-theme] *::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 6px;
}

body[data-theme]:hover::-webkit-scrollbar-track,
body[data-theme] *:hover::-webkit-scrollbar-track,
body[data-theme][data-scrollbar-scrolling]::-webkit-scrollbar-track,
body[data-theme] [data-scrollbar-scrolling]::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

body[data-theme]:hover::-webkit-scrollbar-thumb,
body[data-theme] *:hover::-webkit-scrollbar-thumb,
body[data-theme][data-scrollbar-scrolling]::-webkit-scrollbar-thumb,
body[data-theme] [data-scrollbar-scrolling]::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
}

body[data-theme]::-webkit-scrollbar-thumb:vertical,
body[data-theme] *::-webkit-scrollbar-thumb:vertical {
  min-height: 75px;
}

body[data-theme]::-webkit-scrollbar-thumb:horizontal,
body[data-theme] *::-webkit-scrollbar-thumb:horizontal {
  min-width: 75px;
}

body[data-theme]::-webkit-scrollbar-thumb:hover,
body[data-theme] *::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* Global text selection highlight - ensures visibility on dark themes */
body[data-theme] ::selection {
  background: var(--text-highlight);
}
body[data-theme] ::-moz-selection {
  background: var(--text-highlight);
}

body {
  --body-color: #f5f2e4;
  --body-background: url("/https:/sudowrite.com/assets/sorbet-background.png");
}

/* theme-specific styles */

body[data-theme="amber"] {
  --body-background: url("/https:/sudowrite.com/assets/amber-background.png");
  --menu-color: #23140d;
  --menu-color-hover: #3e322d;
  --menu-color-active: #4f3d35;
  --menu-color-active-lightened: #73635e;
  --menu-color-transparent: #acacac3a;
  --menu-color-transparent-30: #acacac5e;
  --menu-color-primary-cta-overlay: rgba(59, 32, 0, 1);
  --menu-color-primary-cta-overlay-hover: rgb(85, 47, 0);
  --menu-color-primary-cta-overlay-active: rgb(106, 58, 1);
  --text-highlight: #623600;
  --primary-cta: #e37b00;
  --canvas-cta: #e37b00;
  --primary-cta-transparent: rgba(226, 146, 49, 0.15);
  --primary-cta-transparent-05: rgba(226, 146, 49, 0.05);
  --primary-cta-transparent-10: rgba(226, 146, 49, 0.1);
  --primary-cta-transparent-15: rgba(226, 146, 49, 0.15);
  --primary-cta-transparent-30: rgba(226, 146, 49, 0.3);
  --primary-cta-translucent: #e292311a;
  --primary-cta-light: rgba(226, 146, 49, 0.5);
  --primary-cta-hover: #975300;
  --primary-cta-active: #6e3d00;
  --primary-cta-high-contrast: #e29231;
  --primary-cta-transparent-overlay: var(--primary-cta);
  --primary-cta-50: #322313;
  --primary-cta-100: #412d16;
  --primary-cta-200: #593c1a;
  --primary-cta-300: #7c5220;
  --primary-cta-400: #ab7028;
  --primary-cta-500: #e29231;
  --primary-cta-600: #e9ad65;
  --primary-cta-700: #efc38e;
  --primary-cta-800: #f7e0c5;
  --primary-cta-900: #fcf4ea;
  --particle-start: var(--primary-cta);
  --particle-end: var(--menu-color);
}

body[data-theme="forest"] {
  --body-background: url("/https:/sudowrite.com/assets/forest-background.png");
  --menu-color: #0e180d;
  --menu-color-hover: #2e3e2e;
  --menu-color-active: #3a543a;
  --menu-color-active-lightened: #617661;
  --menu-color-transparent: #acacac3a;
  --menu-color-transparent-30: #acacac5e;
  --menu-color-primary-cta-overlay: rgba(32, 53, 0, 1);
  --menu-color-primary-cta-overlay-hover: rgb(45, 75, 0);
  --menu-color-primary-cta-overlay-active: rgb(56, 94, 0);
  --text-highlight: #3f680a;
  --primary-cta: #69ac13;
  --canvas-cta: #69ac13;
  --primary-cta-transparent: rgba(149, 207, 73, 0.15);
  --primary-cta-transparent-05: rgba(149, 207, 73, 0.05);
  --primary-cta-transparent-10: rgba(149, 207, 73, 0.1);
  --primary-cta-transparent-15: rgba(149, 207, 73, 0.15);
  --primary-cta-transparent-30: rgba(149, 207, 73, 0.3);
  --primary-cta-translucent: #95cf491a;
  --primary-cta-light: rgba(149, 207, 73, 0.5);
  --primary-cta-hover: #52850e;
  --primary-cta-active: #3c6507;
  --primary-cta-high-contrast: #95cf49;
  --primary-cta-transparent-overlay: var(--primary-cta);
  --primary-cta-50: #1b2c0e;
  --primary-cta-100: #253b13;
  --primary-cta-200: #36501b;
  --primary-cta-300: #4e7127;
  --primary-cta-400: #6f9c37;
  --primary-cta-500: #95cf49;
  --primary-cta-600: #b0db77;
  --primary-cta-700: #c5e59b;
  --primary-cta-800: #e1f2cc;
  --primary-cta-900: #f4faed;
}

body[data-theme="aurora-borealis"] {
  --body-background: url("/https:/sudowrite.com/assets/aurora-borealis-background.png");
  --menu-color: #0d2d35;
  --menu-color-hover: #134452;
  --menu-color-active: #15586a;
  --menu-color-active-lightened: #447988;
  --menu-color-transparent: #acacac3a;
  --menu-color-transparent-30: #acacac5e;
  --menu-color-primary-cta-overlay: rgba(2, 50, 46, 1);
  --menu-color-primary-cta-overlay-hover: rgb(3, 82, 75);
  --menu-color-primary-cta-overlay-active: rgb(4, 102, 94);
  --text-highlight: #056d66;
  --primary-cta: #07a89d;
  --canvas-cta: #07a89d;
  --primary-cta-transparent: rgba(91, 213, 205, 0.15);
  --primary-cta-transparent-05: rgba(91, 213, 205, 0.05);
  --primary-cta-transparent-10: rgba(91, 213, 205, 0.1);
  --primary-cta-transparent-15: rgba(91, 213, 205, 0.15);
  --primary-cta-transparent-30: rgba(91, 213, 205, 0.3);
  --primary-cta-translucent: #5bd5cd1a;
  --primary-cta-light: rgba(91, 213, 205, 0.5);
  --primary-cta-hover: #077e76;
  --primary-cta-active: #025f58;
  --primary-cta-high-contrast: #5bd5cd;
  --primary-cta-transparent-overlay: var(--primary-cta);
  --primary-cta-50: #153e44;
  --primary-cta-100: #1b4b50;
  --primary-cta-200: #245f63;
  --primary-cta-300: #327e7e;
  --primary-cta-400: #45a6a2;
  --primary-cta-500: #5bd5cd;
  --primary-cta-600: #84e0da;
  --primary-cta-700: #a5e8e4;
  --primary-cta-800: #d1f3f1;
  --primary-cta-900: #effbfa;
}

body[data-theme="cauldron"] {
  --body-background: url("/https:/sudowrite.com/assets/cauldron-background.png");
  --menu-color: #1f0b33;
  --menu-color-hover: #351558;
  --menu-color-active: #572291;
  --menu-color-active-lightened: #794ea7;
  --menu-color-transparent: #acacac3a;
  --menu-color-transparent-30: #acacac5e;
  --menu-color-primary-cta-overlay: rgba(68, 6, 117, 1);
  --menu-color-primary-cta-overlay-hover: rgb(88, 7, 149);
  --menu-color-primary-cta-overlay-active: rgb(98, 10, 166);
  --text-highlight: #572291;
  --primary-cta: #6d0abb;
  --canvas-cta: #6d0abb;
  --primary-cta-transparent: rgba(207, 147, 253, 0.15);
  --primary-cta-transparent-05: rgba(207, 147, 253, 0.05);
  --primary-cta-transparent-10: rgba(207, 147, 253, 0.1);
  --primary-cta-transparent-15: rgba(207, 147, 253, 0.15);
  --primary-cta-transparent-30: rgba(207, 147, 253, 0.3);
  --primary-cta-translucent: #cf93fd1a;
  --primary-cta-light: rgba(207, 147, 253, 0.5);
  --primary-cta-hover: #5c089c;
  --primary-cta-active: #420373;
  --primary-cta-high-contrast: #cf93fd;
  --primary-cta-transparent-overlay: #c57dfc7d;
  --primary-cta-50: #311947;
  --primary-cta-100: #3f2357;
  --primary-cta-200: #543470;
  --primary-cta-300: #734c94;
  --primary-cta-400: #9e6dc4;
  --primary-cta-500: #cf93fd;
  --primary-cta-600: #dbaefe;
  --primary-cta-700: #e5c4fe;
  --primary-cta-800: #f2e1fe;
  --primary-cta-900: #faf4ff;
}

body[data-theme="charcoal"] {
  --body-background: url("/https:/sudowrite.com/assets/charcoal-background.png");
  --menu-color: #161a1c;
  --menu-color-hover: #313739;
  --menu-color-active: #546369;
  --menu-color-active-lightened: #768287;
  --menu-color-transparent: #acacac3a;
  --menu-color-transparent-30: #acacac5e;
  --menu-color-primary-cta-overlay: rgba(27, 7, 69, 1);
  --menu-color-primary-cta-overlay-hover: rgb(37, 10, 95);
  --menu-color-primary-cta-overlay-active: rgb(46, 12, 117);
  --text-highlight: #4a2697;
  --primary-cta: #5716e3;
  --canvas-cta: #5716e3;
  --primary-cta-transparent: rgba(183, 152, 248, 0.15);
  --primary-cta-transparent-05: rgba(183, 152, 248, 0.05);
  --primary-cta-transparent-10: rgba(183, 152, 248, 0.1);
  --primary-cta-transparent-15: rgba(183, 152, 248, 0.15);
  --primary-cta-transparent-30: rgba(183, 152, 248, 0.3);
  --primary-cta-translucent: #b798f81a;
  --primary-cta-light: rgba(183, 152, 248, 0.5);
  --primary-cta-hover: #6445a8;
  --primary-cta-active: #3a1191;
  --primary-cta-high-contrast: #b798f8;
  --primary-cta-transparent-overlay: var(--primary-cta);
  --primary-cta-50: #262732;
  --primary-cta-100: #333144;
  --primary-cta-200: #46405e;
  --primary-cta-300: #635686;
  --primary-cta-400: #8a75ba;
  --primary-cta-500: #b798f8;
  --primary-cta-600: #c9b2fa;
  --primary-cta-700: #d7c6fb;
  --primary-cta-800: #ebe2fd;
  --primary-cta-900: #f8f5fe;
}

/* light themes */

body[data-theme="sorbet"] {
  --body-background: url("/https:/sudowrite.com/assets/sorbet-background.png");
  --menu-color-background: #fff;
  --menu-color: #fff;
  --menu-color-hover: #efefef;
  --menu-color-active: #dddddd;
  --menu-color-transparent: #acacac38;
  --menu-color-transparent-30: #acacac5e;
  --menu-color-primary-cta-overlay: #f2eefc;
  --menu-color-primary-cta-overlay-hover: #e4dbfa;
  --menu-color-primary-cta-overlay-active: #e0d4ff;
  --text-highlight: #e4d9fb;
  --canvas-cta: #9747ff;
  --primary-cta: #4808d1;
  --primary-cta-translucent: #4808d11a;
  --primary-cta-hover: #6530d8;
  --primary-cta-active: #7240dd;
  --primary-cta-high-contrast: var(--primary-cta);
  --primary-cta-light: #9b7ae1;
  --primary-cta-transparent: rgba(72, 8, 209, 0.07);
  --primary-cta-transparent-05: rgba(72, 8, 209, 0.05);
  --primary-cta-transparent-10: rgba(72, 8, 209, 0.1);
  --primary-cta-transparent-15: rgba(72, 8, 209, 0.15);
  --primary-cta-transparent-30: rgba(72, 8, 209, 0.3);
  --primary-cta-transparent-overlay: var(--primary-cta-transparent-15);
  --focus-overlay-background: rgba(255, 255, 255, 0.8);
  --particle-start: var(--primary-cta);
  --particle-end: var(--menu-color);
  --floating-menu-background: rgba(255, 255, 255, 0.8);
  --primary-cta-50: #f6f3fd;
  --primary-cta-100: #e9e1fa;
  --primary-cta-200: #d4c4f5;
  --primary-cta-300: #bfa7f0;
  --primary-cta-400: #9b7ae1;
  --primary-cta-500: #7752c8;
  --primary-cta-600: #6530d8;
  --primary-cta-700: #4808d1;
  --primary-cta-800: #3a06a8;
  --primary-cta-900: #2c0480;
}

body[data-theme="moonbeam"] {
  --body-background: url("/https:/sudowrite.com/assets/moonbeam-background.png");
  --menu-color-background: #fff;
  --menu-color: #fff;
  --menu-color-hover: #efefef;
  --menu-color-active: #dddddd;
  --menu-color-transparent: #acacac3a;
  --menu-color-transparent-30: #acacac5e;
  --menu-color-primary-cta-overlay: #f2eefc;
  --menu-color-primary-cta-overlay-hover: #e4dbfa;
  --menu-color-primary-cta-overlay-active: #d6c9f8;
  --text-highlight: #e4d9fb;
  --canvas-cta: #9747ff;
  --primary-cta: #4808d1;
  --primary-cta-translucent: #4808d11a;
  --primary-cta-hover: #6530d8;
  --primary-cta-active: #7240dd;
  --primary-cta-high-contrast: var(--primary-cta);
  --primary-cta-light: #9b7ae1;
  --primary-cta-transparent: rgba(72, 8, 209, 0.07);
  --primary-cta-transparent-05: rgba(72, 8, 209, 0.05);
  --primary-cta-transparent-10: rgba(72, 8, 209, 0.1);
  --primary-cta-transparent-15: rgba(72, 8, 209, 0.15);
  --primary-cta-transparent-30: rgba(72, 8, 209, 0.3);
  --primary-cta-transparent-overlay: var(--primary-cta-transparent-15);
  --focus-overlay-background: rgba(255, 255, 255, 0.8);
  --particle-start: var(--primary-cta);
  --particle-end: var(--menu-color);
  --floating-menu-background: rgba(255, 255, 255, 0.8);
  --primary-cta-50: #f6f3fd;
  --primary-cta-100: #e9e1fa;
  --primary-cta-200: #d4c4f5;
  --primary-cta-300: #bfa7f0;
  --primary-cta-400: #9b7ae1;
  --primary-cta-500: #7752c8;
  --primary-cta-600: #6530d8;
  --primary-cta-700: #4808d1;
  --primary-cta-800: #3a06a8;
  --primary-cta-900: #2c0480;
}

body[data-theme="sepia"] {
  --body-background: url("/https:/sudowrite.com/assets/sepia-background.png");
  --menu-color-background: #fff;
  --menu-color: #fff;
  --menu-color-hover: #efefef;
  --menu-color-active: #dddddd;
  --menu-color-transparent: #acacac3a;
  --menu-color-transparent-30: #acacac5e;
  --menu-color-primary-cta-overlay: #fbf4ed;
  --menu-color-primary-cta-overlay-hover: #f8e6d3;
  --menu-color-primary-cta-overlay-active: #fae1c6;
  --text-highlight: #e4d9fb;
  --primary-cta: #c06800;
  --canvas-cta: #c06800;
  --primary-cta-translucent: #c068001a;
  --primary-cta-transparent: rgba(192, 104, 0, 0.07);
  --primary-cta-transparent-05: rgba(192, 104, 0, 0.05);
  --primary-cta-transparent-10: rgba(192, 104, 0, 0.1);
  --primary-cta-transparent-15: rgba(192, 104, 0, 0.15);
  --primary-cta-transparent-30: rgba(192, 104, 0, 0.3);
  --primary-cta-light: rgba(192, 104, 0, 0.5);
  --primary-cta-hover: #975300;
  --primary-cta-active: #6e3d00;
  --primary-cta-high-contrast: var(--primary-cta);
  --primary-cta-transparent-overlay: var(--primary-cta-transparent-15);
  --focus-overlay-background: rgba(255, 255, 255, 0.8);
  --particle-start: var(--primary-cta);
  --particle-end: var(--menu-color);
  --floating-menu-background: rgba(255, 255, 255, 0.8);
  --primary-cta-50: #fdf8f3;
  --primary-cta-100: #fae9d6;
  --primary-cta-200: #f5d4ad;
  --primary-cta-300: #efbe84;
  --primary-cta-400: #d98a20;
  --primary-cta-500: #d07800;
  --primary-cta-600: #975300;
  --primary-cta-700: #c06800;
  --primary-cta-800: #6e3d00;
  --primary-cta-900: #4a2900;
}

/*light themes*/
body[data-theme="sorbet"],
body[data-theme="moonbeam"],
body[data-theme="sepia"] {
  --document-background: #fff;
  --document-background-hover: #efefef;
  --document-background-active: #e4e3e3;
  --document-background-focus: #fff;

  --text-field-background: #f7f7f7;
  --icon-button-fill: #000;
  --icon-button-opacity: 0.5;
  --shimmer-opacity: 0.7;
  --shimmer-blend-mode: normal;

  --canvas-background: #fff;
  --canvas-dots-color: #000;

  --container-color: rgba(0, 0, 0, 0.05);
  --container-color-2: rgba(0, 0, 0, 0.1);

  --divider: #efefef;
  --cta-overlay: #56ccf2;
  --context-menu-text: #fff;
  --context-menu-hover: #515151;

  --warning: #fbe750;
  --warning-icon: #fbe750;

  --grey-0: #383838;
  --grey-1: #686868;
  --grey-2: #acacac;
  --grey-3: #e5e5e5;
  --grey-4: #f3f3f3;

  --tooltip-background: #383838;

  --primary-cta-super-high-contrast: var(--primary-cta);
  --menu-color-fullscreen: var(--menu-color);
  --menu-color-fullscreen-outline: var(--grey-3);
  --menu-color-fullscreen-hover: var(--menu-color-hover);
  --menu-color-fullscreen-hover-dark: var(--menu-color-fullscreen);
  --menu-color-hover-2: var(--menu-color-hover);
  --menu-color-tinted: rgba(0, 0, 0, 3%);
  --menu-color-tinted2: rgba(0, 0, 0, 7%);
  --menu-color-tinted3: rgba(0, 0, 0, 14%);

  --tiny-drop-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.08);
  --tiny-drop-shadow-head-on: 0px 0px 3px 0px rgba(0, 0, 0, 0.25);
  --default-drop-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  --light-drop-shadow: 0px 4px 10px rgba(0, 0, 0, 0.13);
  --slider-handle-drop-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
  --chip-drop-shadow: var(--light-drop-shadow);
  --chip-drop-shadow-filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.13));

  --high-contrast-drop-shadow: 0px 0px 1.5px rgb(0 0 0 / 25%), 0px 0px 9.5px rgb(0 0 0 / 15%);
  /* We may be able to replace above var with the following value: */
  --drop-shadow-15-25: 0px 0px 15px 0px rgba(0, 0, 0, 0.15), 0px 0px 2px 0px rgba(0, 0, 0, 0.25);
  --card-drop-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.15), 0px 0px 1px 0px rgba(0, 0, 0, 0.25);
  --card-drop-shadow-medium: 0px 0px 15px 0px rgba(0, 0, 0, 0.15), 0px 0px 2px 0px rgba(0, 0, 0, 0.15);
  --card-drop-shadow-filter: drop-shadow(0px 2px 6px rgba(0, 0, 0, 0.05)) drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.25));
  --reorderable-list-drop-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1), 0px 0px 2px 0px rgba(0, 0, 0, 0.15);

  --card-drop-shadow-active: 0px 4px 10px 0px rgba(0, 0, 0, 0.15), 0px 0px 1px 0px rgba(0, 0, 0, 0.25);
  --related-words-invert: none;
  --related-words-webkit-invert: none;

  --slider-dot: var(--menu-color);
  --slider-dot-active: var(--primary-cta-light);
  --slider-rail: var(--menu-color-active);
  --slider-track: var(--primary-cta);

  --button-disabled: var(--menu-color-active);
  --button-disabled-color: rgba(255, 255, 255, 0.7);

  --primary-cta-background: var(--primary-cta-transparent-15);
  --toggle-background: var(--container-color);
  --toggle-background-hover: var(--menu-color-active);
  --toggle-click-target: var(--menu-color-fullscreen);

  --icon-border: rgba(255, 255, 255, 0.4);
  --list-element-hover: var(--primary-cta-transparent);
  --selected-element-background: var(--primary-cta-transparent);
  --selected-element-text: var(--primary-cta);
  --selected-card-background: var(--primary-cta-transparent-05);
  --simplified-sb-background: var(--menu-color);
  --surface-inverse: var(--grey-3);
  --surface-inverse-hover: var(--grey-4);
  --surface-inverse-active: var(--grey-2);
  --surface-inverse-text: var(--grey-0);

  --icon-inverted-background: var(--grey-3);
  --icon-inverted-background-hover: var(--grey-4);
  --icon-inverted-background-active: var(--grey-2);
  --icon-inverted-color: var(--menu-color);
  --icon-inverted-text-on-hover: var(--surface-inverse-text);

  /* Spellcheck - light themes */
  --spellcheck-underline-color: #ff5862;

  /* Scrollbar - light themes */
  --scrollbar-thumb: rgba(0, 0, 0, 0.25);
  --scrollbar-thumb-hover: rgba(0, 0, 0, 0.4);
  --scrollbar-track: rgba(0, 0, 0, 0.03);
}

/* dark themes */
body[data-theme="amber"],
body[data-theme="forest"],
body[data-theme="aurora-borealis"],
body[data-theme="cauldron"],
body[data-theme="charcoal"] {
  --document-background: rgba(0, 0, 0, 0.4);
  --document-background-hover: rgba(67, 67, 67, 0.4);
  --document-background-active: rgba(100, 100, 100, 0.4);
  --document-background-focus: rgba(0, 0, 0, 1);
  --focus-overlay-background: rgba(0, 0, 0, 0.8);

  --text-field-background: rgba(255, 255, 255, 0.05);
  --icon-button-fill: #fff;
  --icon-button-opacity: 0.7;
  --shimmer-opacity: 1;
  --shimmer-blend-mode: overlay;

  --floating-menu-background: rgba(255, 255, 255, 0.15);

  --warning: #2d2d2d;
  --warning-icon: #fbe750;

  --canvas-background: var(--body-background);
  --canvas-dots-color: #d9d9d9;

  --container-color: rgba(255, 255, 255, 0.1);
  --container-color-2: rgba(255, 255, 255, 0.2);

  --divider: rgba(255, 255, 255, 0.1);
  --cta-overlay: #e8e8e8;
  --context-menu-text: #383838;
  --context-menu-hover: #d8d8d8;

  --grey-0: rgba(255, 255, 255, 0.95);
  --grey-1: rgba(255, 255, 255, 0.65);
  --grey-2: rgba(255, 255, 255, 0.3);
  --grey-3: rgba(255, 255, 255, 0.1);
  --grey-4: rgba(255, 255, 255, 0.06);

  --tooltip-background: #ffffff;

  --primary-cta-super-high-contrast: var(--grey-0);
  --menu-color-fullscreen: var(--menu-color-hover);
  --menu-color-fullscreen-outline: var(--grey-2);
  --menu-color-fullscreen-hover: var(--menu-color-active);
  --menu-color-fullscreen-hover-dark: var(--menu-color-active);
  --menu-color-hover-2: var(--menu-color-active);
  --menu-color-tinted: rgba(255, 255, 255, 3%);

  --default-drop-shadow: 0px 3px 7px rgba(0, 0, 0, 0.75);
  --tiny-drop-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.48);
  --tiny-drop-shadow-head-on: 0px 0px 3px 1px rgba(0, 0, 0, 0.48);
  --light-drop-shadow: 0px 3px 7px rgba(0, 0, 0, 0.35);
  --chip-drop-shadow: 0px 3px 8px rgba(0, 0, 0, 0.15);
  --chip-drop-shadow-filter: drop-shadow(0px 6px 12px rgba(0, 0, 0, 0.13));
  --high-contrast-drop-shadow: 0px 0px 1.5px rgb(0 0 0 / 75%), 0px 0px 9.5px rgb(0 0 0 / 35%);
  /* We may be able to replace above var with the following value: */
  --drop-shadow-15-25: 0px 0px 15px 0px rgba(0, 0, 0, 0.85), 0px 0px 2px 0px rgba(0, 0, 0, 0.75);
  --card-drop-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.45), 0px 0px 1px 0px rgba(0, 0, 0, 0.35);
  --card-drop-shadow-filter: drop-shadow(0px 2px 6px rgba(0, 0, 0, 0.25)) drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.65));
  --card-drop-shadow-medium: 0px 0px 15px 0px rgba(0, 0, 0, 0.45), 0px 0px 2px 0px rgba(0, 0, 0, 0.45);
  --reorderable-list-drop-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.7), 0px 0px 2px 0px rgba(0, 0, 0, 1);

  --card-drop-shadow-active: 0px 4px 10px 0px rgba(0, 0, 0, 0.45), 0px 0px 1px 0px rgba(0, 0, 0, 0.35);

  --related-words-invert: invert(100%);
  --related-words-webkit-invert: invert(100%);

  --slider-dot: var(--grey-1);
  --slider-dot-active: var(--primary-cta-hover);
  --slider-rail: var(--menu-color-active);
  --slider-track: var(--primary-cta);

  --particle-start: var(--primary-cta-high-contrast);
  --particle-end: var(--menu-color);

  --button-disabled: var(--menu-color-hover);
  --button-disabled-color: rgba(255, 255, 255, 0.3);

  --primary-cta-background: var(--primary-cta-light);
  --toggle-background: var(--document-background);
  --toggle-background-hover: var(--menu-color-hover);
  --toggle-click-target: var(--menu-color-active);

  --icon-border: rgba(56, 56, 56, 0.4);
  --list-element-hover: var(--primary-cta-light);
  --selected-element-background: var(--primary-cta);
  --selected-element-text: var(--grey-0);
  --selected-card-background: var(--menu-color-active);

  --surface-inverse: color-mix(in srgb, var(--menu-color-hover) 40%, black);
  --surface-inverse-hover: color-mix(in srgb, var(--menu-color-hover) 65%, black);
  --surface-inverse-active: color-mix(in srgb, var(--menu-color-active) 65%, black);
  --surface-inverse-text: var(--grey-0);

  --icon-inverted-background: color-mix(in srgb, var(--menu-color-hover) 40%, black);
  --icon-inverted-background-hover: color-mix(in srgb, var(--menu-color-hover) 65%, black);
  --icon-inverted-background-active: color-mix(in srgb, var(--menu-color-active) 65%, black);
  --icon-inverted-color: var(--menu-color);
  --icon-inverted-text-on-hover: var(--surface-inverse-text);
  --simplified-sb-background: var(--menu-color-fullscreen);

  /* Spellcheck - dark themes */
  --spellcheck-underline-color: #ff6b73;

  /* Scrollbar - dark themes */
  --scrollbar-thumb: rgba(255, 255, 255, 0.35);
  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.5);
  --scrollbar-track: rgba(255, 255, 255, 0.03);
}

/*all themes*/
body[data-theme="amber"],
body[data-theme="forest"],
body[data-theme="aurora-borealis"],
body[data-theme="cauldron"],
body[data-theme="charcoal"],
body[data-theme="sorbet"],
body[data-theme="sepia"],
body[data-theme="moonbeam"] {
  --cta-text-color: #f6f6f6;
  --danger-color: #ff5862;
  --danger-color-hover: #ff58631c;
  --danger-color-active: #ff58632d;
  --warning-color: #ffc300;
  --success-color: #10bc5f;
  --success-color-hover: #e7f5f5;
  --success-color-active: #cfeaea;
  --primary-cta-divider: rgba(255, 255, 255, 0.3);
}

[data-theme="cauldron"] {
  --document-background-no-opacity: #090719;
}

[data-theme="charcoal"] {
  --document-background-no-opacity: #1a1a1a;
}

[data-theme="aurora-borealis"] {
  --document-background-no-opacity: #061419;
}

[data-theme="forest"] {
  --document-background-no-opacity: #0e1b0d;
}

[data-theme="amber"] {
  --document-background-no-opacity: #0f0706;
}

[data-theme="sorbet"],
[data-theme="moonbeam"],
[data-theme="sepia"] {
  --document-background-no-opacity: #fff;
}

/**
 * Highlight mark theme-aware colors
 *
 * Documents store light-mode colors for consistency and export.
 * Dark themes swap to darker variants for legibility.
 *
 * Color pairs (light -> dark):
 * - Yellow: #FFF3BF -> #5A4B1A
 * - Green:  #E2F6DA -> #1F3D2B
 * - Blue:   #E3EEFF -> #1E2F4D
 * - Peach:  #FFE5D6 -> #4A2E24
 * - Teal:   #DDF5F1 -> #1F3A3A
 * - Pink:   #FFE1EC -> #4A2434
 */

/* Light mode: ensure multicolor marks paint a background (agent + toolbar highlights) */
body[data-theme-type="light"] mark[data-color="#FFF3BF"] {
  background-color: #fff3bf;
}

body[data-theme-type="light"] mark[data-color="#E2F6DA"] {
  background-color: #e2f6da;
}

body[data-theme-type="light"] mark[data-color="#E3EEFF"] {
  background-color: #e3eeff;
}

body[data-theme-type="light"] mark[data-color="#FFE5D6"] {
  background-color: #ffe5d6;
}

body[data-theme-type="light"] mark[data-color="#DDF5F1"] {
  background-color: #ddf5f1;
}

body[data-theme-type="light"] mark[data-color="#FFE1EC"] {
  background-color: #ffe1ec;
}

/* Dark mode highlight color overrides - use !important to override inline light hex styles */
body[data-theme-type="dark"] mark[data-color="#FFF3BF"],
body[data-theme="amber"] mark[data-color="#FFF3BF"],
body[data-theme="forest"] mark[data-color="#FFF3BF"],
body[data-theme="aurora-borealis"] mark[data-color="#FFF3BF"],
body[data-theme="cauldron"] mark[data-color="#FFF3BF"],
body[data-theme="charcoal"] mark[data-color="#FFF3BF"] {
  background-color: #5a4b1a !important;
}

body[data-theme-type="dark"] mark[data-color="#E2F6DA"],
body[data-theme="amber"] mark[data-color="#E2F6DA"],
body[data-theme="forest"] mark[data-color="#E2F6DA"],
body[data-theme="aurora-borealis"] mark[data-color="#E2F6DA"],
body[data-theme="cauldron"] mark[data-color="#E2F6DA"],
body[data-theme="charcoal"] mark[data-color="#E2F6DA"] {
  background-color: #1f3d2b !important;
}

body[data-theme-type="dark"] mark[data-color="#E3EEFF"],
body[data-theme="amber"] mark[data-color="#E3EEFF"],
body[data-theme="forest"] mark[data-color="#E3EEFF"],
body[data-theme="aurora-borealis"] mark[data-color="#E3EEFF"],
body[data-theme="cauldron"] mark[data-color="#E3EEFF"],
body[data-theme="charcoal"] mark[data-color="#E3EEFF"] {
  background-color: #1e2f4d !important;
}

body[data-theme-type="dark"] mark[data-color="#FFE5D6"],
body[data-theme="amber"] mark[data-color="#FFE5D6"],
body[data-theme="forest"] mark[data-color="#FFE5D6"],
body[data-theme="aurora-borealis"] mark[data-color="#FFE5D6"],
body[data-theme="cauldron"] mark[data-color="#FFE5D6"],
body[data-theme="charcoal"] mark[data-color="#FFE5D6"] {
  background-color: #4a2e24 !important;
}

body[data-theme-type="dark"] mark[data-color="#DDF5F1"],
body[data-theme="amber"] mark[data-color="#DDF5F1"],
body[data-theme="forest"] mark[data-color="#DDF5F1"],
body[data-theme="aurora-borealis"] mark[data-color="#DDF5F1"],
body[data-theme="cauldron"] mark[data-color="#DDF5F1"],
body[data-theme="charcoal"] mark[data-color="#DDF5F1"] {
  background-color: #1f3a3a !important;
}

body[data-theme-type="dark"] mark[data-color="#FFE1EC"],
body[data-theme="amber"] mark[data-color="#FFE1EC"],
body[data-theme="forest"] mark[data-color="#FFE1EC"],
body[data-theme="aurora-borealis"] mark[data-color="#FFE1EC"],
body[data-theme="cauldron"] mark[data-color="#FFE1EC"],
body[data-theme="charcoal"] mark[data-color="#FFE1EC"] {
  background-color: #4a2434 !important;
}

/* Windows High Contrast Mode support */
@media (forced-colors: active) {
  body[data-theme] *,
  body[data-theme] {
    scrollbar-color: ButtonText Canvas;
  }

  body[data-theme] ::-webkit-scrollbar-track {
    background: Canvas;
  }

  body[data-theme] ::-webkit-scrollbar-thumb {
    background-color: ButtonText;
  }

  body[data-theme] ::-webkit-scrollbar-thumb:hover {
    background-color: Highlight;
  }
}