:root {
  /* Never use color values defined here directly in CSS. Add color variables to "Color Theme" below

     The reason we never use color values defined here directly in CSS is

      1. It makes changing themes from light / dark / user generated impossible.
      2. Gives the programmer context into the color being used.
      3. If our color system changes it's much easier to change color values in one place.

     Add a color value to the theme below, and then use it in your CSS.
     naming convention:
     - bg: background.
     - fg: foreground.
     - color: text-color
   */
  --shades-white-100: #ffffff;
  --shades-white-90: #f5f5f5;
  --shades-white-80: #ebebeb;
  --shades-white-70: #e0e0e0;
  --shades-white-60: #cccccc;

  --shades-black-95: #0a0a0a;
  --shades-black-90: #191919;
  --shades-black-85: #1f1f1f;
  --shades-black-75: #404040;
  --shades-black-60: #666666;
  --shades-black-50: #808080;

  --violet-dark-100: #7e57c2;
  --violet-dark-80: #6d49ab;
  --violet-dark-60: #563894;
  --violet-dark-40: #44297a;
  --violet-dark-20: #331f5c;

  --violet-light-100: #ae94db;
  --violet-light-80: #b9a4df;
  --violet-light-60: #d3c6ec;
  --violet-light-40: #e8e0f5;
  --violet-light-20: #f3f0fa;

  --success-light-10: #d5f6e3;
  --success-light-50: #6cdf9c;
  --success-primary: #00c853;
  --success-dark-50: #029841;
  --success-dark-90: #034920;

  --error-light-10: #feebe6;
  --error-light-50: #f9947b;
  --error-primary: #f53100;
  --error-dark-50: #b62602;
  --error-dark-90: #4f1203;

  --shadow-dark-35: #00000059;
  --shadow-dark-25: #00000040;
  --shadow-light-35: #ffffff59;
  --shadow-light-25: #ffffff40;

  --logo-bg: #111827;
  --spoiler-color: #33332c;
  --loading-foreground: #1b0e38;

  --bg: var(--shades-black-95);
  --fg: var(--shades-white-100);
  --color-disabled: var(--shades-black-50);
  --text-input-bg: var(--shades-black-75);
  --text-input-color: var(--shades-white-60);
  --text-input-placeholder: var(--shades-white-60);
  --border: var(--shades-black-75);
  --error: var(--error-primary);
  --success: var(--success-dark-50);

  /* Color Theme */

  --btn-bg-filled: var(--violet-dark-100);
  --btn-bg-outline: var(--shades-black-85);
  --btn-bg-success: var(--success-dark-50);
  --btn-bg-danger: var(--error-primary);
  --btn-bg-disabled: var(--shades-black-75);
  --btn-disabled-color: var(--shades-black-50);
  --chat-bg: var(--violet-dark-80);
  --chat-confirmation-icon: var(--violet-dark-100);
  --keyserver-selection: var(--violet-dark-60);
  --thread-selection: var(--violet-light-80);
  --thread-hover-bg: var(--shades-black-75);
  --thread-active-bg: var(--shades-black-75);
  --chat-timestamp-color: var(--shades-black-50);
  --tool-tip-bg: var(--shades-black-75);
  --tool-tip-color: var(--shades-white-60);
  --border-color: var(--shades-black-75);
  --calendar-chevron: var(--shades-black-50);
  --calendar-day-bg: var(--shades-black-50);
  --calendar-day-selected-color: var(--violet-dark-80);
  --community-bg: var(--shades-black-85);
  --community-settings-selected: var(--violet-dark-60);
  --unread-bg: var(--error-primary);
  --settings-btn-bg: var(--violet-dark-100);
  --community-creation-btn-bg: var(--shades-black-75);
  --community-creation-ancestry-bg: var(--shades-black-75);
  --community-creation-ancestry-text: var(--shades-black-50);
  --community-creation-keyserver-container: var(--shades-black-95);
  --modal-bg: var(--shades-black-85);
  --modal-fg: var(--shades-white-60);
  --join-bg: var(--shades-black-85);
  --help-color: var(--shades-black-50);
  --breadcrumb-color: var(--shades-white-60);
  --breadcrumb-color-unread: var(--shades-white-60);
  --btn-outline-border: var(--shades-black-50);
  --thread-color-read: var(--shades-black-50);
  --thread-preview-secondary: var(--shades-black-60);
  --relationship-button-green: var(--success-dark-50);
  --relationship-button-red: var(--error-primary);
  --relationship-button-text: var(--fg);
  --disconnected-bar-alert-bg: var(--error-dark-50);
  --disconnected-bar-alert-color: var(--shades-white-100);
  --disconnected-bar-connecting-bg: var(--shades-white-70);
  --disconnected-bar-connecting-color: var(--shades-black-95);
  --permission-color: var(--shades-white-60);
  --thread-top-bar-color: var(--shades-white-100);
  --thread-top-bar-search-button-color: var(--shades-black-50);
  --thread-ancestor-keyserver-border: var(--shades-black-60);
  --thread-ancestor-color: var(--shades-white-100);
  --thread-ancestor-separator-color: var(--shades-white-60);
  --text-message-default-background: var(--shades-black-75);
  --message-action-tooltip-bg: var(--shades-black-85);
  --message-action-tooltip-bg-light: var(--shades-black-75);
  --menu-bg: var(--shades-black-85);
  --menu-bg-light: var(--shades-black-75);
  --menu-separator-color: var(--shades-black-75);
  --menu-color: var(--shades-black-50);
  --menu-color-light: var(--shades-white-60);
  --menu-color-hover: var(--shades-white-100);
  --menu-color-dangerous: var(--error-primary);
  --menu-color-dangerous-hover: var(--error-light-50);
  --app-list-icon-disabled-color: var(--shades-white-80);
  --chat-thread-list-color-active: var(--shades-white-60);
  --chat-thread-list-menu-color: var(--shades-white-60);
  --chat-thread-list-menu-bg: var(--shades-black-75);
  --chat-thread-list-menu-active-color: var(--shades-white-60);
  --chat-thread-list-menu-active-bg: var(--shades-black-85);
  --tabs-header-active-color: var(--shades-white-100);
  --tabs-header-active-border: var(--violet-light-100);
  --tabs-header-active-background: var(--violet-dark-100);
  --tabs-header-background-color: var(--shades-black-50);
  --tabs-header-background-color-pill: var(--shades-white-60);
  --tabs-header-background-border: var(--shades-black-75);
  --tabs-header-background-color-hover: var(--shades-white-80);
  --tabs-header-background-border-hover: var(--shades-black-60);
  --members-modal-member-text: var(--shades-black-50);
  --members-modal-member-text-hover: var(--shades-white-100);
  --label-default-bg: var(--violet-dark-80);
  --label-default-color: var(--shades-white-80);
  --label-grey-bg: var(--shades-black-75);
  --label-grey-color: var(--shades-white-80);
  --subchannels-modal-color: var(--shades-black-50);
  --subchannels-modal-color-hover: var(--shades-white-100);
  --color-selector-active-bg: var(--shades-black-75);
  --relationship-modal-color: var(--shades-black-50);
  --arrow-extension-color: var(--shades-black-50);
  --modal-close-color: var(--shades-black-50);
  --modal-close-color-hover: var(--shades-white-100);
  --add-members-group-header-color: var(--shades-black-50);
  --add-members-item-color: var(--shades-black-50);
  --add-members-item-color-hover: var(--shades-white-100);
  --add-members-item-disabled-color: var(--shades-black-75);
  --add-members-item-disabled-color-hover: var(--shades-black-50);
  --add-members-remove-pending-color: var(--error-primary);
  --add-members-remove-pending-color-hover: var(--error-light-50);
  --radio-border: var(--shades-black-60);
  --radio-color: var(--shades-white-60);
  --notification-settings-option-selected-bg: var(--shades-black-75);
  --notification-settings-option-title-color: var(--shades-white-90);
  --notification-settings-option-color: var(--shades-white-60);
  --notification-settings-option-invalid-color: var(--shades-black-75);
  --notification-settings-option-invalid-selected-color: var(--shades-black-50);
  --thread-creation-search-container-bg: var(--shades-black-85);
  --thread-creation-close-search-color: var(--shades-black-50);
  --thread-creation-search-item-bg-hover: var(--shades-black-75);
  --thread-creation-search-item-info-color: var(--shades-black-50);
  --chat-message-list-active-border: #5989d6;
  --sidebars-modal-color: var(--shades-black-50);
  --sidebars-modal-color-hover: var(--shades-white-100);
  --inline-engagement-bg: var(--shades-black-60);
  --inline-engagement-bg-hover: var(--shades-black-75);
  --inline-engagement-color: var(--fg);
  --enum-option-icon-color: var(--violet-dark-100);
  --show-password-bg-hover: var(--shades-black-60);
  --typeahead-overlay-light: var(--shades-black-75);
  --typeahead-overlay-dark: var(--shades-black-85);
  --typeahead-overlay-text: var(--shades-white-100);
  --typeahead-overlay-shadow-primary: rgba(0, 0, 0, 0.25);
  --typeahead-overlay-shadow-secondary: rgba(0, 0, 0, 0.4);
  --spoiler-text-color: var(--spoiler-color);
  --spoiler-background-color: var(--spoiler-color);
  --purple-link: var(--violet-light-100);
  --drawer-expand-button: var(--shades-black-50);
  --drawer-expand-button-disabled: var(--shades-black-75);
  --drawer-item-color: var(--shades-white-60);
  --drawer-active-item-color: var(--shades-white-100);
  --drawer-open-community-bg: var(--shades-black-90);
  --active-drawer-item-bg: rgba(0, 0, 0, 0.5);
  --community-drawer-lines: rgba(255, 255, 255, 0.08);
  --topbar-button-bg: var(--shades-black-85);
  --filters-button-bg: var(--shades-black-95);
  --filters-button-border: var(--shades-black-75);
  --filters-button-hover-bg: var(--shades-black-85);
  --filter-panel-fg: var(--shades-black-50);
  --filter-panel-bg: #0d0d0d;
  --topbar-button-bg-hover: var(--shades-black-75);
  --topbar-button-fg: var(--shades-white-60);
  --message-label-color: var(--shades-black-50);
  --topbar-lines: rgba(255, 255, 255, 0.08);
  --pin-message-information-text-color: var(--shades-white-60);
  --pin-message-modal-border-color: var(--shades-black-75);
  --pinned-count-banner-color: var(--shades-black-85);
  --pinned-count-text-color: var(--shades-white-90);
  --modal-overlay-background-90: rgba(0, 0, 0, 0.9);
  --modal-overlay-background-80: rgba(0, 0, 0, 0.8);
  --dropdown-text: var(--shades-white-100);
  --dropdown-select-bg: var(--shades-black-85);
  --dropdown-select-border: var(--shades-white-60);
  --dropdown-option-bg: var(--shades-black-75);
  --dropdown-option-hover-bg: var(--shades-black-60);
  --dropdown-selected-option-check-color: var(--violet-dark-100);
  --dropdown-chevron-color: var(--shades-white-100);
  --dropdown-disabled-color: var(--shades-black-50);
  --change-member-role-modal-description-text: var(--shades-white-60);
  --change-member-role-modal-generic-text: var(--shades-white-100);
  --change-member-role-modal-disabled-background: var(--shades-black-75);
  --unsaved-changes-modal-text-color: var(--shades-white-60);
  --modal-secondary-label: var(--shades-black-50);
  --modal-separator: var(--shades-black-75);
  --auth-modal-border-color: #272537;
  --auth-modal-bg: #191723;
  --auth-step-icon-pending-bg: #3a3a3a;
  --auth-step-icon-active-bg: #6a20e3;
  --auth-step-icon-success-bg: #4caf50;
  --auth-step-icon-error-bg: #f44336;
  --auth-secondary-text-color: #8c889a;
}

/* 
  Hey Comm Devs! Below is the in progress work for introducing a new
  color design system/light mode for our web app! We will be slowly 
  migrating over to this new system over the next few months. At
  this moment, if you are working on a new feature, please use the
  new color system. 

  If there is not a good color for your use case, please message
  Ginsu and/or Ted and we can help you figure out what the best 
  to do is.
  
  Also until this project is fully done, please add Ginsu as a reviewer
  to any diff where we use the colors.

  If you have any questions please message Ginsu or Ted.

  Thanks :)
*/

/* Dark theme (default CSS theme) */
:root {
  /* Frame */
  --frame-background-primary-default: var(--shades-black-95);
  --frame-background-secondary-default: var(--shades-black-85);
  --frame-background-tertiary-default: var(--shades-black-75);

  /* Text */
  --text-background-primary-default: var(--shades-white-100);
  --text-background-secondary-default: var(--shades-white-60);
  --text-background-tertiary-default: var(--shades-black-50);
  --text-background-danger-default: var(--error-primary);

  /* Panel */
  --panel-background-primary-default: var(--shades-black-85);
  --panel-background-secondary-default: var(--shades-black-90);
  --panel-headerShadow-primary-default: var(--shadow-dark-35);
  --panel-headerShadow-secondary-default: var(--shadow-dark-25);

  /* Button */
  --button-background-primary-default: var(--violet-dark-100);
  --button-background-secondary-default: var(--shades-black-75);
  --button-background-tertiary-default: var(--shades-black-85);
  --button-background-success-default: var(--success-primary);
  --button-background-primary-hover: var(--violet-dark-80);
  --button-background-secondary-hover: var(--shades-black-60);
  --button-background-tertiary-hover: var(--shades-black-75);
  --button-background-primary-disabled: var(--shades-black-75);
  --button-border-outline-default: var(--shades-black-50);
  --button-label-primary-default: var(--shades-white-100);
  --button-label-secondary-default: var(--shades-white-60);
  --button-label-tertiary-default: var(--shades-black-50);
  --button-label-primary-hover: var(--shades-white-90);
  --button-label-primary-disabled: var(--shades-black-50);
  --button-label-tertiary-hover: var(--shades-white-80);

  /* Link */
  --link-background-primary-default: var(--violet-dark-100);
  --link-background-primary-disabled: var(--shades-black-50);
  --link-background-secondary-default: var(--violet-light-100);
  --link-background-secondary-disabled: var(--shades-black-75);

  /* Separator */
  --separator-background-primary-default: var(--shades-black-75);

  /* Modal */
  --modal-background-primary-default: var(--shades-black-85);
  --modal-background-secondary-default: var(--shades-black-90);
  --modal-header-primary-default: var(--shades-white-100);
  --modal-close-primary-default: var(--shades-black-50);
  --modal-close-primary-hover: var(--shades-white-100);
  --modal-listItem-primary-hover: var(--shades-black-90);

  /* Input Field */
  --inputField-background-primary-default: var(--shades-black-85);
  --inputField-background-secondary-default: var(--shades-black-75);
  --inputField-label-primary-default: var(--shades-white-100);
  --inputField-label-secondary-default: var(--shades-black-50);
  --inputField-border-primary-default: var(--shades-black-75);
  --inputField-clearBackground-primary-default: var(--shades-black-60);
  --inputField-clearIcon-primary-default: var(--shades-white-100);

  /* Status Indicator */
  --statusIndicator-background-outer-active: var(--success-dark-90);
  --statusIndicator-background-outer-inactive: var(--error-dark-90);
  --statusIndicator-background-inner-active: var(--success-primary);
  --statusIndicator-background-inner-inactive: var(--error-primary);

  /* Enum Option */
  --enumOption-background-primary-selected: var(--shades-black-75);
  --enumOption-icon-primary-default: var(--violet-dark-100);
  --enumOption-title-primary-default: var(--shades-white-90);
  --enumOption-description-primary-default: var(--shades-white-60);
  --enumOption-input-primary-default: var(--shades-black-60);
  --enumOption-input-primary-selected: var(--shades-white-60);
  --enumOption-input-secondary-default: var(--shades-white-80);
  --enumOption-input-secondary-selected: var(--success-primary);
  --enumOption-input-secondary-disabled: var(--shades-black-50);

  /* Tooltip */
  --tooltip-background-primary-default: var(--shades-black-75);
  --tooltip-label-primary-default: var(--shades-white-100);

  /* Unread Indicator */
  --unreadIndicator-background-primary-default: var(--error-primary);
  --unreadIndicator-label-primary-default: var(--shades-white-100);
  --unreadIndicator-border-primary-default: var(--shades-black-85);

  /* Tab */
  --tab-indicator-primary-default: var(--shades-black-85);
  --tab-indicator-primary-active: var(--violet-dark-100);
  --tab-label-primary-default: var(--shades-white-60);
  --tab-label-primary-active: var(--shades-white-100);
  --tab-label-primary-hover: var(--shades-white-80);
  --tab-indicator-secondary-default: var(--shades-black-75);
  --tab-indicator-secondary-active: var(--violet-light-100);
  --tab-indicator-secondary-hover: var(--shades-black-60);
  --tab-label-secondary-default: var(--shades-black-50);
  --tab-label-secondary-active: var(--shades-white-100);
  --tab-label-secondary-hover: var(--shades-white-80);

  /* List Item */
  --listItem-background-primary-hover: var(--shades-black-90);

  /* Chat */
  --deleted-message-background: var(--shades-black-85);
  --deleted-message-color: var(--shades-white-60);
}

/* Light theme */
[data-theme='light'] {
  /* Frame */
  --frame-background-primary-default: var(--shades-white-100);
  --frame-background-secondary-default: var(--shades-white-80);
  --frame-background-tertiary-default: var(--shades-white-60);

  /* Text */
  --text-background-primary-default: var(--shades-black-95);
  --text-background-secondary-default: var(--shades-black-60);
  --text-background-tertiary-default: var(--shades-black-50);
  --text-background-danger-default: var(--error-primary);

  /* Panel */
  /* @GINSU: TODO double check these values after redesign is finished */
  --panel-background-primary-default: var(--shades-white-80);
  --panel-background-secondary-default: var(--shades-white-90);
  --panel-headerShadow-primary-default: var(--shadow-light-35);
  --panel-headerShadow-secondary-default: var(--shadow-light-25);

  /* Button */
  --button-background-primary-default: var(--violet-dark-100);
  --button-background-secondary-default: var(--shades-black-50);
  /* @GINSU: TODO double check the tertiary values after redesign is finished */
  --button-background-tertiary-default: var(--shades-black-60);
  --button-background-success-default: var(--success-primary);
  --button-background-primary-hover: var(--violet-dark-80);
  --button-background-secondary-hover: var(--shades-black-60);
  --button-background-tertiary-hover: var(--shades-black-50);
  --button-background-primary-disabled: var(--shades-white-60);
  --button-border-outline-default: var(--shades-black-50);
  --button-label-primary-default: var(--shades-white-100);
  --button-label-secondary-default: var(--shades-white-90);
  --button-label-tertiary-default: var(--shades-black-60);
  --button-label-primary-hover: var(--shades-white-90);
  --button-label-primary-disabled: var(--shades-black-50);
  --button-label-tertiary-hover: var(--shades-white-80);

  /* Link */
  --link-background-primary-default: var(--violet-dark-100);
  --link-background-primary-disabled: var(--shades-black-50);
  /* @GINSU: TODO double check the secondary values after redesign is finished */
  --link-background-secondary-default: var(--violet-dark-100);
  --link-background-secondary-disabled: var(--shades-white-60);

  /* Separator */
  --separator-background-primary-default: var(--shades-white-60);

  /* Modal */
  --modal-background-primary-default: var(--shades-white-100);
  --modal-background-secondary-default: var(--shades-white-80);
  --modal-header-primary-default: var(--shades-black-95);
  --modal-close-primary-default: var(--shades-black-50);
  --modal-close-primary-hover: var(--shades-black-95);
  --modal-listItem-primary-hover: var(--shades-white-70);

  /* Input Field */
  --inputField-background-primary-default: var(--shades-white-100);
  --inputField-background-secondary-default: var(--shades-white-60);
  --inputField-label-primary-default: var(--shades-black-95);
  --inputField-label-secondary-default: var(--shades-black-60);
  --inputField-border-primary-default: var(--shades-white-60);
  --inputField-clearBackground-primary-default: var(--shades-black-50);
  --inputField-clearIcon-primary-default: var(--shades-white-100);

  /* Status Indicator */
  --statusIndicator-background-outer-active: var(--success-dark-50);
  --statusIndicator-background-outer-inactive: var(--error-dark-50);
  --statusIndicator-background-inner-active: var(--success-primary);
  --statusIndicator-background-inner-inactive: var(--error-primary);

  /* Enum Option */
  --enumOption-background-primary-selected: var(--shades-white-70);
  --enumOption-icon-primary-default: var(--violet-dark-100);
  --enumOption-title-primary-default: var(--shades-black-85);
  --enumOption-description-primary-default: var(--shades-black-60);
  --enumOption-input-primary-default: var(--shades-black-50);
  --enumOption-input-primary-selected: var(--shades-black-60);
  --enumOption-input-secondary-default: var(--shades-black-75);
  --enumOption-input-secondary-selected: var(--success-primary);
  --enumOption-input-secondary-disabled: var(--shades-black-50);

  /* Tooltip */
  /* @GINSU: TODO double check these values after redesign is finished */
  --tooltip-background-primary-default: var(--shades-white-80);
  --tooltip-label-primary-default: var(--shades-black-85);

  /* Unread Indicator */
  --unreadIndicator-background-primary-default: var(--error-primary);
  --unreadIndicator-label-primary-default: var(--shades-white-100);
  --unreadIndicator-border-primary-default: var(--shades-white-80);

  /* Tab */
  /* @GINSU: TODO double check these values after redesign is finished */
  --tab-indicator-primary-default: var(--shades-white-60);
  --tab-indicator-primary-active: var(--violet-dark-100);
  --tab-label-primary-default: var(--shades-black-75);
  --tab-label-primary-active: var(--shades-white-100);
  --tab-label-primary-hover: var(--shades-black-95);
  --tab-indicator-secondary-default: var(--shades-black-50);
  --tab-indicator-secondary-active: var(--violet-dark-100);
  --tab-indicator-secondary-hover: var(--shades-black-60);
  --tab-label-secondary-default: var(--shades-black-60);
  --tab-label-secondary-active: var(--shades-black-95);
  --tab-label-secondary-hover: var(--shades-black-85);

  /* List Item */
  /* @GINSU: TODO double check these values after redesign is finished */
  --listItem-background-primary-hover: var(--shades-white-70);

  /* Chat */
  --deleted-message-background: var(--shades-black-85);
  --deleted-message-color: var(--shades-white-60);
}
