/**
  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("/assets/iAWriterQuattroS-Regular.woff") format("woff"), url("/assets/iAWriterQuattroS-Regular.woff2") format("woff2"),
    url("/assets/iAWriterQuattroS-Regular.ttf") format("truetype");
    font-weight: 500;
  font-style: normal;
}

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

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

body {
  --body-color: #F5F2E4;
  --body-background: url(/assets/sorbet-background.png);
}

/* theme-specific styles */

body[data-theme='amber'] {
  --body-background: url(/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: #C06800;
  --canvas-cta: #C06800;
  --primary-cta-transparent: rgba(192, 104, 0, 0.15);
  --primary-cta-transparent-15: rgba(192, 104, 0, 0.15);
  --primary-cta-transparent-30: rgba(192, 104, 0, 0.3);
  --primary-cta-translucent: #C068001A;
  --primary-cta-light: rgba(192, 104, 0, 0.5);
  --primary-cta-hover: #975300;
  --primary-cta-active: #6e3d00;
  --primary-cta-high-contrast: #e29231;
  --primary-cta-transparent-overlay: var(--primary-cta);
  --particle-start: var(--primary-cta);
  --particle-end: var(--menu-color);
}

body[data-theme='forest'] {
  --body-background: url(/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(105, 172, 19, 0.15);
  --primary-cta-transparent-15: rgba(105, 172, 19, 0.15);
  --primary-cta-transparent-30: rgba(105, 172, 19, 0.3);
  --primary-cta-translucent: #69AC131a;
  --primary-cta-light: rgba(105, 172, 19, 0.5);
  --primary-cta-hover: #52850e;
  --primary-cta-active: #3c6507;
  --primary-cta-high-contrast: #95cf49;
  --primary-cta-transparent-overlay: var(--primary-cta);
}

body[data-theme='aurora-borealis'] {
  --body-background: url(/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: #07a297;
  --canvas-cta: #07a297;
  --primary-cta-transparent: rgba(7, 162, 151, 0.15);
  --primary-cta-transparent-15: rgba(7, 162, 151, 0.15);
  --primary-cta-transparent-30: rgba(7, 162, 151, 0.3);
  --primary-cta-translucent: #07a2971a;
  --primary-cta-light: rgba(7, 162, 151, 0.5);
  --primary-cta-hover: #077e76;
  --primary-cta-active: #025f58;
  --primary-cta-high-contrast: #5bd5cd;
  --primary-cta-transparent-overlay: var(--primary-cta);
}

body[data-theme='cauldron'] {
  --body-background: url(/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(109, 10, 187, 0.40);
  --primary-cta-transparent-15: rgba(109, 10, 187, 0.15);
  --primary-cta-transparent-30: rgba(109, 10, 187, 0.3);
  --primary-cta-translucent: #6D0ABB1a;
  --primary-cta-light: rgba(109, 10, 187, 0.5);
  --primary-cta-hover: #5c089c;
  --primary-cta-active: #420373;
  --primary-cta-high-contrast: #cf93fd;
  --primary-cta-transparent-overlay: #c57dfc7d;
}

body[data-theme='charcoal'] {
  --body-background: url(/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(87, 22, 227, 0.15);
  --primary-cta-transparent-15: rgba(87, 22, 227, 0.15);
  --primary-cta-transparent-30: rgba(87, 22, 227, 0.3);
  --primary-cta-translucent: #5716e31a;
  --primary-cta-light: rgba(87, 22, 227, 0.5);
  --primary-cta-hover: #7748de;
  --primary-cta-hover: #7752c8;
  --primary-cta-high-contrast: #b798f8;
  --primary-cta-transparent-overlay: var(--primary-cta);
}

/* light themes */

body[data-theme='sorbet'] {
  --body-background: url(/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-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);
}

body[data-theme='moonbeam'] {
  --body-background: url(/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-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);
}

body[data-theme='sepia'] {
  --body-background: url(/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-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);
}

/*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: .5;
  --shimmer-opacity: .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;

  --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.10), 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);
}

/* 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, .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, .05);
  --icon-button-fill: #fff;
  --icon-button-opacity: .7;
  --shimmer-opacity: 1;
  --shimmer-blend-mode: overlay;

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

  --warning: #2D2D2D;

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

  --container-color: rgba(255, 255, 255, .1);
  --container-color-2: rgba(255, 255, 255, .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);

  --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);

}

/*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,.3);
}