/*
* 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);
  --box-shadow-default-top: 0 -3px 6px 0 rgba(0, 0, 0, 0.5);
  --box-shadow-default-subtle: 0px 3px 6px 0px rgba(0, 0, 0, 0.5);
  --box-shadow-raised-subtle: 0px 3px 16px 0px rgba(0, 0, 0, 0.8);
  --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-background-surface-primary-hovered: var(--palette-gray-70);
  --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(--palette-gray-50);
  --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-coach-mark-active-text: var(--palette-violet-10);
  --color-current-status: var(--color-white);
  --color-dashboard-button-background: var(--palette-gray-80);
  --color-dashboard-button-background-hover: var(--palette-gray-70);
  --color-divider: var(--palette-gray-60);
  --color-divider-vanilla: var(--palette-gray-60);
  --color-dropdown-border: var(--palette-gray-40);
  --color-error-text: var(--palette-tangerine-40);
  --color-error-text-primary: var(--palette-red-100);
  --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-theme-violet: var(--color-white);
  --color-icon-theme-violet-hover: var(--dark-mode-white-grey);
  --color-icon-neutral: var(--palette-violet-30);
  --color-icon-violet: var(--palette-violet-30);
  --color-email-icon-fill: var(--palette-violet-30);
  --color-icon-primary: var(--dark-mode-white-grey);
  --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-background2: var(--palette-gray-90);
  --color-input-border: var(--color-white);
  --color-input-border2: 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-20);
  --color-link-on-gradient-hover: var(--palette-violet-10);
  --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-pill-background-active: var(--palette-violet-50);
  --color-pill-text-default: var(--palette-gray-40);
  --color-primary-600-alt: 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-violet-10);
  --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);

  --color-sequence-list-button: 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   */

  /* jcw tokens */
  --color-border-outreach-accordion: var(--palette-gray-70);
  --color-text-workspace-pill: var(--palette-violet-90);
  --color-background-workspace-send-pill: var(--palette-violet-10);
  --color-background-workspace-discussion-pill: var(--palette-mint-10);

  --color-icon-template: var(--palette-gray-10);
  --color-icon-filter-template: var(--palette-violet-30);
  --color-text-addEmail: var(--palette-gray-10);

  /* Tokens below here are aligned in naming with what design uses in Figma */
  --color-background-default: var(--palette-gray-100);
  --color-background-fill-accent-purple-subtle: var(--palette-accent-purple-100);
  --color-background-fill-brand-default: var(--palette-violet-30);
  --color-background-fill-info-subtle: var(--palette-gray-70);
  --color-background-strong: var(--palette-gray-100);
  --color-background-stronger: var(--palette-gray-70);
  --color-background-surface-critical-default: var(--palette-gray-70);
  --color-background-surface-info-default: var(--palette-gray-70);
  --color-background-surface-primary-default: var(--palette-gray-80);
  --color-background-surface-primary-pressed: var(--palette-gray-70);
  --color-background-surface-primary-secondary: var(--palette-gray-90);
  --color-background-surface-success-default: var(--palette-gray-70);
  --color-background-surface-success-subtle: var(--palette-mint-20);
  --color-background-surface-secondary-default: var(--palette-gray-90);
  --color-background-surface-tertiary-default: var(--palette-gray-90);
  --color-background-surface-tertiary-selected: var(--palette-gray-80);
  --color-background-surface-warning-default: var(--palette-gray-70);
  --color-border-default: var(--palette-gray-70);
  --color-border-pressed: var(--palette-violet-30);
  --color-border-selected: var(--palette-violet-30);
  --color-border-tertiary-default: var(--palette-gray-70);
  --color-button-ai-border-default: var(--palette-violet-30);
  --color-button-ai-border-disabled: var(--palette-gray-60);
  --color-button-ai-border-hovered: var(--palette-violet-20);
  --color-button-ai-text-default: var(--color-white);
  --color-button-ai-text-disabled: var(--palette-gray-60);
  --color-button-ai-text-hovered: var(--color-white);
  --color-button-primary-background-default: var(--palette-violet-30);
  --color-button-primary-background-disabled: var(--palette-gray-70);
  --color-button-primary-text-default: var(--palette-violet-90);
  --color-button-secondary-text-default: var(--palette-violet-30);
  --color-button-secondary-text-disabled: var(--palette-gray-60);
  --color-button-secondary-text-hovered: var(--palette-violet-20);
  --color-button-secondary-border-disabled: var(--palette-gray-60);
  --color-button-secondary-border-hovered: var(--palette-violet-20);
  --color-button-tertiary-text-default: var(--palette-violet-30);
  --color-button-tertiary-text-active: var(--palette-violet-20);
  --color-button-tertiary-2-border-default: var(--palette-gray-70);
  --color-button-tertiary-2-border-pressed: var(--palette-violet-30);
  --color-button-tertiary-2-text-default: var(--palette-violet-30);
  --color-button-tertiary-2-text-disabled: var(--palette-gray-60);
  --color-button-tertiary-2-text-hovered: var(--palette-violet-20);
  --color-icon-subtle: var(--palette-gray-50);
  --color-input-primary-background-default: var(--palette-gray-100);
  --color-input-primary-background-pressed: var(--palette-gray-80);
  --color-input-primary-border-default: var(--palette-gray-60);
  --color-input-primary-border-pressed: var(--palette-violet-30);
  --color-input-primary-text-active: var(--palette-gray-40);
  --color-input-tertiary-background-active: var(--palette-gray-80);
  --color-input-tertiary-background-default: var(--palette-gray-100);
  --color-input-tertiary-text-active: var(--palette-gray-40);
  --color-input-tertiary-text-pressed: var(--palette-gray-80);
  --color-link-default: var(--palette-violet-30);
  --color-link-hovered: var(--palette-violet-20);
  --color-navigation-background: var(--palette-gray-80);
  --color-text-accent-pink-default: var(--palette-accent-pink-30);
  --color-text-accent-purple-default: var(--palette-accent-purple-30);
  --color-text-accent-teal-default: var(--palette-accent-teal-30);
  --color-text-default: var(--palette-gray-40);
  --color-text-hint-default: var(--palette-black);
  --color-text-hint-subtle: var(--palette-gray-60);
  --color-text-info-default: var(--palette-gray-40);
  --color-text-strong: var(--color-white);
  --color-text-subtle: var(--palette-gray-50);

  /* recruiter colors */
  --color-background-fill-accent-blue-subtle: var(--palette-accent-blue-100);
  --color-text-accent-blue-default: var(--palette-accent-blue-30);
  --color-background-fill-accent-green-subtle: var(--palette-accent-green-100);
  --color-text-accent-green-default: var(--palette-accent-green-20);
  --color-background-fill-accent-lime-subtle: var(--palette-accent-lime-100);
  --color-text-accent-lime-default: var(--palette-accent-lime-30);
  --color-background-fill-accent-orange-subtle: var(--palette-accent-orange-100);
  --color-text-accent-orange-default: var(--palette-accent-orange-30);
  --color-background-fill-accent-pink-subtle: var(--palette-accent-pink-100);
  --color-text-accent-pink-default: var(--palette-accent-pink-30);
  --color-background-fill-accent-purple-subtle: var(--palette-accent-purple-100);
  --color-text-accent-purple-default: var(--palette-accent-purple-30);
  --color-background-fill-accent-red-subtle: var(--palette-accent-red-100);
  --color-text-accent-red-default: var(--palette-accent-red-30);
  --color-background-fill-accent-teal-subtle: var(--palette-accent-teal-100);
  --color-text-accent-teal-default: var(--palette-accent-teal-30);
  --color-background-fill-accent-yellow-subtle: var(--palette-accent-yellow-100);
  --color-text-accent-yellow-default: var(--palette-accent-yellow-30);
}