/*
* Dark Mode Theme
* ======================================================================== */
.global-dark-mode {
  /* Primary Tokens (from static/css/variables.css) */
  --box-shadow-default: 0 3px 6px 0 rgba(0, 0, 0, 0.5);
  --color-action-bar-primary-background: var(--palette-gray-80);
  --color-action-bar-primary-border: var(--palette-gray-100);
  --color-action-bar-button-hover: var(--palette-gray-90);
  --color-activity-center-background: var(--palette-gray-70);
  --color-activity-center-background-alt: var(--palette-gray-80);
  --color-activity-center-border: var(--palette-gray-100);
  --color-activity-center-icon-background-active: var(--palette-gray-100);
  --color-activity-center-icon-alt: var(--dark-mode-white-grey);
  --color-activity-center-icon-alt-active: var(--dark-mode-blue);
  --color-activity-center-icon-alt-background-active: var(
    --dark-mode-grey-black
  );
  --color-activity-notification-border: var(--palette-gray-60);
  --color-assist-pill-background: var(--palette-gray-100);
  --color-background-primary: var(--palette-gray-100);
  --color-background-secondary: var(--palette-gray-80);
  --color-background-neutral: var(--palette-gray-100);
  --color-background-modal: var(--palette-gray-100);
  --color-background-badge: var(--palette-gray-60);
  --color-border-canvas-default: var(--palette-gray-70);
  --color-border-card-default: var(--palette-gray-60);
  --color-background-transluscent: rgba(10, 18, 18, 0.7);
  --color-banner-close-button: var(--color-white);
  --color-bold-body: var(--color-primary-300);
  --color-bold-header: var(--color-white);
  --color-default-avatar: var(--dark-mode-primary-grey);
  --color-card-border: var(--dark-mode-black-border);
  --color-card-divider: var(--palette-gray-60);
  --color-card-header-icon: var(--palette-violet-30);
  --color-checkbox-border: var(--dark-mode-white-grey);
  --color-checkbox-border-disabled: var(--dark-mode-black-border);
  --color-checkbox-border-hover: var(--palette-violet-30);
  --color-checkbox-checked: var(--palette-violet-30);
  --color-checkbox-checked-hover: var(--palette-violet-20);
  --color-checkbox-disabled: var(--dark-mode-black-border);
  --color-checkbox-excluded: var(--dark-mode-white-grey);
  --color-checkbox-fill: var(--dark-mode-black);
  --color-checkbox-fill-disabled: var(--dark-mode-dark-grey);
  --color-coach-mark-background: var(--palette-violet-80);
  --color-current-status: var(--color-white);
  --color-divider: var(--palette-gray-60);
  --color-dropdown-border: var(--palette-gray-40);
  --color-error-text: var(--palette-tangerine-40);
  --color-error-background: var(--palette-gray-100);
  --color-early-access-background: var(--palette-violet-10);
  --color-early-access-text: var(--palette-violet-90);
  --color-edit-campaign-icon: var(--color-primary-800);
  --color-email-editor-background: var(--palette-gray-80);
  --color-ghost-button-text: var(--palette-violet-30);
  --color-ghost-button-text-hover: var(--palette-violet-30);
  --color-ghost-button-background-hover: var(--palette-gray-80);
  --color-ghost-button-border-active: var(--palette-violet-30);
  --color-ghost-button-text-disabled: var(--palette-gray-60);
  --color-hightlight-circle: var(--palette-gray-60);
  --color-hightlight-line: var(--palette-gray-60);
  --color-history-table-header-background: var(--palette-gray-90);
  --color-history-table-frame-background: var(--palette-gray-70);
  --color-hover-gray: var(--palette-gray-70);
  --color-icon-neutral: var(--palette-violet-30);
  --color-icon-violet: var(--palette-violet-30);
  --color-info-icon: var(--palette-violet-10);
  --color-info-tooltip: var(--palette-gray-40);
  --color-info-tooltip-hover: var(--palette-violet-30);
  --color-input-background: var(--palette-gray-90);
  --color-input-border: var(--color-white);
  --color-input-border-active: var(--palette-violet-30);
  --color-input-border-alt: var(--palette-gray-50);
  --color-inverted-button-backgrond: var(--palette-gray-80);
  --color-inverted-button-text: var(--color-primary-300);
  --color-inverted-button-hover: var(--color-primary-700);
  --color-job-description-background: var(--dark-mode-black);
  --color-job-description-input: var(--dark-mode-grey-black);
  --color-job-description-input-alt-dark-mode: var(--palette-gray-70);
  --color-job-requirement-select-input-background: var(--palette-gray-100);
  --color-job-requirement-select-input-border: var(--dark-mode-white-grey);
  --color-link: var(--palette-violet-30);
  --color-link-alt-dark: var(--color-white);
  --color-link-hover: var(--palette-violet-40);
  --color-link-button-text: var(--palette-violet-30);
  --color-link-button-text-hover: var(--palette-violet-20);
  --color-link-button-text-disabled: var(--palette-gray-60);
  --color-link-on-gradient: var(--palette-violet-10);
  --color-link-on-gradient-hover: var(--palette-violet-20);
  --color-nav-element: var(--color-white);
  --color-nav-element-active: var(--palette-violet-30);
  --color-nav-element-small: var(--dark-mode-white-grey);
  --color-nav-element-active-small: var(--palette-violet-30);
  --color-nav-subheader: var(--palette-violet-30);
  --color-neutral-200: var(--palette-gray-70);
  --color-notification-background: var(--dark-mode-black);
  --color-notification-info-banner-recommendation: var(--palette-violet-50);
  --color-null-state-icon: var(--dark-mode-primary-grey);
  --color-option-label-count: var(--dark-mode-primary-grey);
  --color-primary-600: var(--palette-violet-20); /* used as hover links everywhere */
  --color-primary-button-background: var(--palette-violet-30);
  --color-primary-button-background-hover: var(--palette-violet-20);
  --color-primary-button-background-disabled: var(--palette-gray-70);
  --color-primary-button-text: var(--palette-violet-90);
  --color-primary-button-text-disabled: var(--palette-gray-50);
  --color-radio-button-border-selected: var(--palette-violet-30);
  --color-read-more-hover: var(--palette-violet-20);
  --color-read-more-text: var(--palette-violet-30);
  --color-robot-icon-fill: var(--dark-mode-primary-grey);
  --color-scheme: dark;
  --color-search-input-background: var(--palette-gray-100);
  --color-search-count-badge-background: var(--palette-gray-80);
  --color-search-count-badge-background-hover: var(--palette-gray-100);
  --color-secondary-button-border: var(--palette-violet-30);
  --color-secondary-button-border-hover: var(--palette-violet-20);
  --color-secondary-button-border-disabled: var(--palette-gray-60);
  --color-secondary-button-text: var(--palette-violet-30);
  --color-secondary-button-text-hover: var(--palette-violet-20);
  --color-secondary-button-text-disabled: var(--palette-gray-60);
  --color-sensitive-card-background: var(--palette-gray-70);
  --color-sensitive-card-header: var(--color-white);
  --color-sidebar-background: var(--palette-gray-80);
  --color-sidebar-link: var(--palette-gray-40);
  --color-sidebar-link-active-background: var(--palette-gray-70);
  --color-sidebar-link-active-text: var(--color-white);
  --color-simple-menu-toggle: var(--palette-violet-30);
  --color-simple-dropdown-label: var(--palette-gray-50);
  --color-simple-dropdown-option: var(--dark-mode-black-border);
  --color-step-card-selected: var(--palette-violet-30);
  --color-soft-header: var(--color-white);
  --color-star-unfilled: var(--palette-gray-50);
  --color-success-text: var(--color-success-400);
  --color-tab-border: var(--palette-gray-70);
  --color-table-border: var(--palette-gray-60);
  --color-table-column: var(--color-white);
  --color-table-header: var(--dark-mode-primary-grey);
  --color-table-header-background: var(--palette-gray-60);
  --color-table-header-text: var(--palette-violet-10);
  --color-tertiary-button-border: var(--palette-gray-40);
  --color-multi-step-progress-bar-violet: #7a6d8f;
  --color-multi-step-progress-bar-vanilla: #7e6f44;
  --color-multi-step-progress-bar-gray: #646464;
  --color-multi-step-progress-bar-mint: #577068;
  --color-multi-step-progress-bar-red: #855757;
  --color-tertiary-button-border-active: var(--palette-violet-30);
  --color-tertiary-button-border-disabled: var(--palette-gray-60);
  --color-tertiary-button-text: var(--palette-violet-30);
  --color-tertiary-button-text-hover: var(--palette-violet-20);
  --color-tertiary-button-text-active: var(--palette-violet-30);
  --color-tertiary-button-text-disabled: var(--palette-gray-60);
  --color-tertiary-2-button-border: var(--palette-gray-70);
  --color-text-disabled: var(--palette-gray-50);
  --color-text-inverted: var(--palette-gray-80);
  --color-text-neutral: var(--palette-gray-50);
  --color-text-placeholder: var(--palette-gray-50);
  --color-text-primary: var(--color-white);
  --color-text-primary-active: var(--palette-violet-30);
  --color-text-on-canvas-default: var(--color-white);
  --color-text-on-canvas-hover: var(--palette-violet-30);
  --color-text-violet: var(--palette-violet-30);
  --color-warning-text: var(--palette-tangerine-40);
  --color-website-link: var(--color-white);
  --hover-blue: var(--palette-violet-20);
  --color-search-toggle-background: var(--palette-gray-100);
  --color-search-toggle-background-active: var(--palette-gray-80);
  --color-search-toggle-text: var(--palette-gray-60);
  --color-search-toggle-text-active: var(--palette-gray-100);
  --color-search-bar: var(--palette-gray-100);
  --color-table-container-background: var(--palette-gray-90);
  --color-campaign-status-text: var(--palette-gray-50);
  --color-tag-vanilla: var(--palette-gray-100);
  --color-table-row-hover: var(--palette-gray-70);
  --color-table-expanded-row-background: var(--palette-gray-90);
  --color-step-status-card-border: var(--palette-gray-70);
  --color-step-status-card-background: var(--palette-gray-80);
  --color-step-status-card-text: var(--palette-gray-50);
  --color-email-status-card-background: var(--palette-gray-90);
  --color-email-status-card-background-replied: var(--palette-gray-70);

  --color-query-match-background: var(--palette-mint-10);
  --color-query-match-text: var(--palette-mint-70);
  --color-query-related-background: var(--palette-violet-10);
  --color-query-related-text: var(--palette-violet-70);
  --color-query-tooltip-background: var(--palette-gray-100);
  --color-query-tooltip-text: var(--color-white);

  /* Gradients */
  --fade-gradient: linear-gradient(
    180deg,
    rgba(46, 46, 46, 0) 0%,
    var(--color-neutral-700) 100%
  );

  /* These are not themed primary tokens, they are only available in dark mode. */
  --dark-mode-background: var(--palette-gray-100); /* was #121214 is #121212 */
  --dark-mode-black: var(--palette-gray-80); /* was #1e2124 is #1E1E1E */
  --dark-mode-black-border: var(--palette-gray-100);
  --dark-mode-blue: var(--palette-violet-30);
  --dark-mode-dark-grey: #7f818b;
  --dark-mode-green: #75e385;
  --dark-mode-grey-black: var(--palette-gray-90); /* was #2a2f34 is #181818 */
  --dark-mode-light-grey: #c7ced8;
  --dark-mode-pink: #ff6a6a;
  --dark-mode-primary-grey: var(--palette-gray-50);

  /* --dark-mode-white-grey: #b8bac4; <- Available, but defined in static/css/variables.css   */
}