:root {
  /*
  * Layout
  * ======================================================================== */
  --max-content-width: 1000px;

  /*
  * Border Radius
  * ======================================================================== */
  --border-radius-small: 2px;
  --border-radius-default: 4px;
  --border-radius-medium: 6px;
  --border-radius-large: 8px;
  --border-radius-extra-large: 12px;
  --border-radius-xxl: 16px;
  --border-radius-left-default: 4px 0 0 4px;
  --border-radius-left-flat: 0 inherit inherit 0;
  --border-radius-top-default: 4px 4px 0 0;
  --border-radius-top-flat: 0 0 inherit inherit;
  --border-radius-right-default: 0 4px 4px 0;
  --border-radius-right-flat: inherit 0 0 inherit;
  --border-radius-bottom-default: 0 0 4px 4px;
  --border-radius-bottom-flat: inherit inherit 0 0;
  --border-radius-flat: 0;
  --border-radius-pill: 999px;
  --border-radius-circle: 50%;

  /*
  * Dropshadow
  * ======================================================================== */
  --box-shadow-none: none;

  /*
  * Padding
  * ======================================================================== */
  --content-padding: 15px;
  --content-padding-override: -15px;
  --modern-content-padding: 20px;
  --modern-content-padding-small: 10px;
  --modern-content-full-width: full;
  --modern-content-navbar-height: 0;
  --modern-content-appbar-height: 50px;

  /*
  * Typography
  * ======================================================================== */
  --font-family-base: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --font-family-brand: 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-family-brand-secondary: 'SF Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-family-brand-tertiary: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-family-old-base: 'Rubik', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-family-primary: var(--font-family-brand);
  --font-family-secondary: var(--font-family-base);

  /*
    * Colors
    * ========================================================================
    * Color palette primitives. These should not be used directly
  */
  /* The new palette. Gray intentially spelled with a not to conflict with old Grey */
  --palette-backdrop: rgba(23, 24, 31, 0.65);
  --palette-gray-10: #f9f9f9;
  --palette-gray-20: #f5f5f5;
  --palette-gray-30: #ececeb;
  --palette-gray-40: #e2e2e2;
  --palette-gray-50: #8a8a8a;
  --palette-gray-60: #666;
  --palette-gray-70: #2e2e2e;
  --palette-gray-80: #1e1e1e;
  --palette-gray-90: #181818;
  --palette-gray-100: #121212;
  --palette-mint-10: #bafae8; /* Flourite */
  --palette-mint-20: #9bebd3; /* Seafoam */
  --palette-mint-30: #5fe4c4; /* Aqua */
  --palette-mint-40: #00e2ab; /* Mint */
  --palette-mint-50: #00c49c; /* Dark Mint */
  --palette-mint-60: #00b58f; /* Emerald */
  --palette-mint-70: #007a5f; /* Pine */
  --palette-tangerine-10: #ffcdaf;
  --palette-tangerine-20: #ffae7b;
  --palette-tangerine-40: #ff7d00; /* Tangerine */
  --palette-tangerine-60: #fd3f00;
  --palette-tangerine-70: #bf2300;
  --palette-vanilla-20: #faf8f6;
  --palette-vanilla-30: #f6f1eb;
  --palette-vanilla-40: #ebe4db;
  --palette-violet-10: #ebdeff; /* Lilac */
  --palette-violet-20: #d8b3ff; /* Lavendar */
  --palette-violet-30: #ac65f2; /* Iris */
  --palette-violet-40: #9e00f0; /* Violet */
  --palette-violet-50: #781fb3; /* Amethyst */
  --palette-violet-60: #4f0064; /* Aubergine */
  --palette-violet-70: #410a5a; /* Narith2 active plate */
  --palette-violet-80: #291242; /* Narith1 sidebar background */
  --palette-violet-90: #201639; /* Indigo */

  /* Expanded (and some legacy...) Palette Colors */
  --palette-black: #000;
  --palette-blue-600: #0050ad;
  --palette-green-500: #108621;
  --palette-grey-100: #dfe3e9;
  --palette-grey-300: #aeb9c8;
  --palette-red-10: #fbd5d5;
  --palette-red-50: #fef3f3;
  --palette-red-100: #f7a1a1;
  --palette-red-500: #eb1414;
  --palette-white: #fff;
  --palette-yellow-50: #fef8e3;
  --palette-yellow-100: #ffd6a5;
  --palette-yellow-500: #eac448;
  --palette-blue-10: #b1ecff; /* Chart */
  --palette-blue-20: #87e2ff; /* Chart */
  --palette-blue-30: #67dbff; /* Chart */
  --palette-blue-40: #05c3ff; /* Chart */
  --palette-blue-50: #0596ff; /* Chart */
  --palette-yellow-10: #ffeca7; /* Chart */
  --palette-yellow-20: #fadd79; /* Chart */
  --palette-yellow-30: #ffd12f; /* Chart */

  /* Extended accent colors */
  --palette-accent-blue-10: #e9f2ff;
  --palette-accent-blue-100: #1c2b41;
  --palette-accent-blue-20: #cce0ff;
  --palette-accent-blue-30: #85b8ff;
  --palette-accent-blue-40: #579dff;
  --palette-accent-blue-50: #388bff;
  --palette-accent-blue-60: #1d7afc;
  --palette-accent-blue-70: #0c66e4;
  --palette-accent-blue-80: #0055cc;
  --palette-accent-blue-90: #09326c;
  --palette-accent-green-10: #dcfff1;
  --palette-accent-green-100: #1c3329;
  --palette-accent-green-20: #baf3db;
  --palette-accent-green-30: #7ee2b8;
  --palette-accent-green-40: #4bce97;
  --palette-accent-green-50: #2abb7f;
  --palette-accent-green-60: #22a06b;
  --palette-accent-green-70: #1f845a;
  --palette-accent-green-80: #216e4e;
  --palette-accent-green-90: #164b35;
  --palette-accent-lime-10: #efffd6;
  --palette-accent-lime-100: #28311b;
  --palette-accent-lime-20: #d3f1a7;
  --palette-accent-lime-30: #b3df72;
  --palette-accent-lime-40: #94c748;
  --palette-accent-lime-50: #82b536;
  --palette-accent-lime-60: #6a9a23;
  --palette-accent-lime-70: #5b7f24;
  --palette-accent-lime-80: #4c6b1f;
  --palette-accent-lime-90: #37471f;
  --palette-accent-orange-10: #fff3eb;
  --palette-accent-orange-100: #38291e;
  --palette-accent-orange-20: #fedec8;
  --palette-accent-orange-30: #fec195;
  --palette-accent-orange-40: #fea362;
  --palette-accent-orange-50: #f38a3f;
  --palette-accent-orange-60: #e56910;
  --palette-accent-orange-70: #c25100;
  --palette-accent-orange-80: #a54800;
  --palette-accent-orange-90: #702e00;
  --palette-accent-pink-10: #ffecf8;
  --palette-accent-pink-100: #3d2232;
  --palette-accent-pink-20: #fdd0ec;
  --palette-accent-pink-30: #f797d2;
  --palette-accent-pink-40: #e774bb;
  --palette-accent-pink-50: #da62ac;
  --palette-accent-pink-60: #cd519d;
  --palette-accent-pink-70: #ae4787;
  --palette-accent-pink-80: #943d73;
  --palette-accent-pink-90: #50253f;
  --palette-accent-purple-10: #f3f0ff;
  --palette-accent-purple-100: #2b273f;
  --palette-accent-purple-20: #dfd8fd;
  --palette-accent-purple-30: #b8acf6;
  --palette-accent-purple-40: #9f8fef;
  --palette-accent-purple-50: #8f7ee7;
  --palette-accent-purple-60: #8270db;
  --palette-accent-purple-70: #6e5dc6;
  --palette-accent-purple-80: #5e4db2;
  --palette-accent-purple-90: #352c63;
  --palette-accent-red-10: #ffeceb;
  --palette-accent-red-100: #42221f;
  --palette-accent-red-20: #ffd5d2;
  --palette-accent-red-30: #fd9891;
  --palette-accent-red-40: #f87168;
  --palette-accent-red-50: #f15b50;
  --palette-accent-red-60: #e2483d;
  --palette-accent-red-70: #c9372c;
  --palette-accent-red-80: #ae2e24;
  --palette-accent-red-90: #5d1f1a;
  --palette-accent-teal-10: #e7f9ff;
  --palette-accent-teal-100: #1e3137;
  --palette-accent-teal-20: #c6edfb;
  --palette-accent-teal-30: #9dd9ee;
  --palette-accent-teal-40: #6cc3e0;
  --palette-accent-teal-50: #42b2d7;
  --palette-accent-teal-60: #2898bd;
  --palette-accent-teal-70: #227d9b;
  --palette-accent-teal-80: #206a83;
  --palette-accent-teal-90: #164555;
  --palette-accent-yellow-10: #fff7d6;
  --palette-accent-yellow-100: #332e1b;
  --palette-accent-yellow-20: #f8e6a0;
  --palette-accent-yellow-30: #f5cd47;
  --palette-accent-yellow-40: #e2b203;
  --palette-accent-yellow-50: #cf9f02;
  --palette-accent-yellow-60: #b38600;
  --palette-accent-yellow-70: #946f00;
  --palette-accent-yellow-80: #7f5f01;
  --palette-accent-yellow-90: #533f04;

  /* Chart — for data visualisation only */
  --color-chart-categorical-1: var(--palette-tangerine-50);
  --color-chart-categorical-2: var(--palette-tangerine-40);
  --color-chart-categorical-3: var(--palette-yellow-30);
  --color-chart-categorical-4: var(--palette-mint-40);
  --color-chart-categorical-5: var(--palette-blue-40);
  --color-chart-categorical-6: var(--palette-blue-50);
  --color-chart-categorical-7: var(--palette-violet-30);
  --color-chart-categorical-8: var(--palette-violet-40);
  --color-chart-categorical-9: var(--palette-tangerine-30);
  --color-chart-categorical-10: var(--palette-tangerine-20);
  --color-chart-categorical-11: var(--palette-yellow-20);
  --color-chart-categorical-12: var(--palette-yellow-10);
  --color-chart-categorical-13: var(--palette-mint-20);
  --color-chart-categorical-14: var(--palette-blue-10);
  --color-chart-categorical-15: var(--palette-blue-20);
  --color-chart-categorical-16: var(--palette-blue-30);
  --color-chart-categorical-17: var(--palette-violet-10);
  --color-chart-categorical-18: var(--palette-violet-20);

  /* Color Tokens - These tokens controls most colors in the app */
  --color-background-gradient: linear-gradient(
      64deg,
      rgba(255, 205, 175, 0.5) 22.15%,
      rgba(216, 179, 255, 0.5) 89.13%
    ),
    #fff;
  --color-background-primary: var(--palette-vanilla-20);
  --color-background-secondary: var(--color-white);
  --color-background-neutral: var(--palette-gray-10);
  --color-background-modal: var(--color-white);
  --color-background-badge: var(--palette-vanilla-40);
  --color-background-user-blip: var(--palette-violet-20);
  --color-border-canvas-default: var(--palette-vanilla-40);
  --color-border-card-default: var(--palette-gray-40);
  --color-success-background: var(--palette-mint-50);
  --color-bg-backdrop: var(--palette-backdrop);
  --color-error-50: var(--palette-red-50);
  --color-error-500: var(--palette-red-500);
  --color-error-text: var(--palette-tangerine-70);
  --color-error-text-primary: var(--palette-red-500);
  --color-error-background: var(--palette-red-50);
  --color-neutral-50: var(--palette-gray-10);
  --color-neutral-100: var(--palette-gray-10);
  --color-neutral-200: var(--palette-gray-30); /* NEED CHANGE. Commonly used for border/dividers */
  --color-neutral-300: var(--palette-gray-40); /* NEED CHANGE. Commonly used for border/dividers */
  --color-neutral-400: var(--palette-gray-50);
  --color-neutral-500: var(--palette-gray-60);
  --color-neutral-700: var(--palette-gray-70);
  --color-neutral-800: var(--palette-gray-80);
  --color-neutral-900: var(--palette-gray-90);
  --color-neutral-1000: var(--palette-gray-100);
  --color-primary-100: var(--palette-violet-10);
  --color-primary-200: var(--palette-violet-20);
  --color-primary-300: var(--palette-violet-30);
  --color-primary-400: var(--palette-violet-40);
  --color-primary-500: var(--palette-violet-50);
  --color-primary-600: var(--palette-violet-60); /* this should not be changed in dark mode */
  --color-primary-600-alt: var(
    --palette-violet-60
  ); /* Hover color for links. Changed from: --color-blue-600 */
  --color-primary-700: var(
    --palette-violet-70
  ); /* CHECK CHANGE. Dark blue only used for the Query highlights */
  --color-primary-800: var(--palette-violet-90);
  --color-success-100: var(--palette-mint-10);
  --color-success-200: var(--palette-mint-20);
  --color-success-400: var(--palette-mint-40);
  --color-success-500: var(--palette-green-500); /* TODO: This still uses a green palette color. */
  --color-success-600: var(--palette-mint-60);
  --color-success-700: var(--palette-mint-70);
  --color-success-text: var(--palette-mint-70);
  --color-text-disabled: var(--palette-gray-50);
  --color-text-neutral: var(--palette-gray-60);
  --color-text-on-canvas-default: var(--palette-gray-70);
  --color-text-on-canvas-hover: var(--palette-violet-50);
  --color-text-placeholder: var(--palette-gray-60);
  --color-text-primary: var(--palette-violet-90);
  --color-text-primary-active: var(--palette-violet-50);
  --color-text-violet: var(--palette-violet-50);
  --color-warning-50: var(--palette-yellow-50);
  --color-warning-100: var(--palette-yellow-100);
  --color-warning-500: var(--palette-yellow-500);
  --color-warning-text: var(--palette-tangerine-70);
  --color-white: var(--palette-white);
  --color-black: var(--palette-black);
  --color-stealth-button: var(--palette-black);
  --color-background-300: var(--palette-vanilla-30);
  --color-background-400: var(--palette-vanilla-40);

  /* Dropshadow */
  --box-shadow-default: 0 3px 6px 0 rgba(246, 241, 235, 0.5);
  --box-shadow-default-top: 0 -3px 6px 0 rgba(246, 241, 235, 0.5);
  --box-shadow-default-subtle: 0px 3px 6px 0px rgba(0, 0, 0, 0.02);
  --box-shadow-subtle: 0px 0px 2px 0px rgba(0, 0, 0, 0.08);
  --box-shadow-on-dark: 0 3px 6px 0 rgba(0, 0, 0, 0.07);
  --box-shadow-overlay-top: 0px -24px 6px -28px rgba(0, 0, 0, 0.7);
  --box-shadow-raised-subtle: 0px 1px 16px 0px rgba(0, 0, 0, 0.07);
  --box-shadow-quick-message-popover: 0 -1px 4px 0 rgba(0, 0, 0, 0.11);

  /* Gradient... */
  --assist-gradient: linear-gradient(#902be7, #ff7d00);
  --brand-gradient: linear-gradient(70deg, #00a9e0 6%, #008ab8 100%);
  --fade-gradient: linear-gradient(
    180deg,
    rgba(249, 249, 249, 0) 0%,
    var(--color-neutral-100) 100%
  );
  --hover-blue: #2a7ee325;

  /* Used in one place. .preview components/widgets/NewTag/NewTag.css */
  --brand-orange: #ec7a08;

  /* Dark mode colors that need to be available in light mode. */
  --dark-mode-white-grey: #b8bac4; /* NOTE: Usage in RejectModal requires this to be here. */

  /* Direct component translations */
  --color-action-bar-primary-background: var(--color-white);
  --color-action-bar-primary-border: var(--color-neutral-300);
  --color-action-bar-button-hover: var(--palette-gray-10);
  --color-action-button-border: var(--palette-gray-40);
  --color-activity-center-background: var(--color-white);
  --color-activity-center-background-alt: var(--palette-gray-10);
  --color-activity-center-border: var(--palette-gray-30);
  --color-activity-center-icon: var(--palette-violet-10);
  --color-activity-center-icon-background-active: var(--palette-violet-70);
  --color-activity-center-icon-alt: var(--palette-violet-10);
  --color-activity-center-icon-alt-active: var(--palette-violet-50);
  --color-activity-center-icon-alt-background-active: var(--color-neutral-50);
  --color-activity-notification-border: var(--palette-gray-40);
  --color-attachment-modal-stage-option: var(--palette-gray-70);
  --color-assist-pill-background: var(--color-white);
  --color-background-flash: rgba(186, 250, 232, 0.2);
  --color-background-transluscent: rgba(255, 255, 255, 0.4);
  --color-background-surface-primary-hovered: var(--palette-violet-10);
  --color-banner-close-button: var(--palette-violet-60);
  --color-bold-body: var(--color-primary-800);
  --color-bold-header: var(--color-primary-800);
  --color-candidate-detail-match-background: var(--palette-vanilla-30);
  --color-card-header-icon: var(--palette-gray-50);
  --color-card-border: var(--palette-gray-40);
  --color-card-divider: var(--palette-gray-30);
  --color-checkbox-border: var(--palette-gray-60);
  --color-checkbox-border-disabled: var(--palette-gray-40);
  --color-checkbox-border-hover: var(--palette-violet-50);
  --color-checkbox-checked: var(--palette-violet-50);
  --color-checkbox-checked-hover: var(--palette-violet-60);
  --color-checkbox-disabled: var(--palette-gray-50);
  --color-checkbox-excluded: var(--palette-gray-60);
  --color-checkbox-fill: var(--color-white);
  --color-checkbox-fill-disabled: var(--palette-gray-10);
  --color-coach-mark-background: var(--palette-violet-10);
  --color-coach-mark-active-text: var(--palette-violet-50);
  --color-coach-mark-border: var(--palette-violet-50);
  --color-current-status: var(--color-primary-800);
  --color-dashboard-button-background: var(--palette-vanilla-40);
  --color-dashboard-button-background-hover: var(--color-white);
  --color-default-avatar: var(--palette-gray-60);
  --color-disabled: var(--palette-grey-300);
  --color-divider: var(--palette-gray-30);
  --color-divider-vanilla: var(--palette-vanilla-40);
  --color-dropdown-border: var(--palette-gray-50);
  --color-early-access-background: var(--palette-violet-10);
  --color-early-access-text: var(--palette-violet-90);
  --color-edit-campaign-icon: var(--color-white);
  --color-email-editor-background: var(--palette-gray-10);
  --color-email-verification: var(--palette-mint-40);
  --color-error-button-background: var(--palette-tangerine-60);
  --color-error-button-background-hover: var(--palette-tangerine-70);
  --color-failed-border: var(--palette-red-10);
  --color-failed-border-banner: var(--palette-red-500);
  --color-failed-background: var(--palette-red-50);
  --color-failed-text-primary: var(--palette-gray-70);
  --color-failed-text-active: var(--palette-violet-50);
  --color-failed-text-active-hover: var(--palette-violet-40);
  --color-failed-icon: var(--palette-red-500);
  --color-ghost-button-text: var(--palette-violet-90);
  --color-ghost-button-text-hover: var(--palette-violet-50);
  --color-ghost-button-background-hover: var(--palette-gray-10);
  --color-ghost-button-border-active: var(--palette-violet-50);
  --color-ghost-button-text-disabled: var(--palette-gray-50);
  --color-hightlight-circle: var(--palette-gray-40);
  --color-hightlight-line: var(--palette-gray-40);
  --color-history-table-header-background: var(--palette-vanilla-20);
  --color-history-table-frame-background: var(--palette-vanilla-30);
  --color-hover-gray: var(--palette-gray-10);
  --color-icon-neutral: var(--palette-gray-60);
  --color-icon-theme-violet: var(--palette-violet-50);
  --color-icon-theme-violet-hover: var(--palette-violet-60);
  --color-icon-violet: var(--palette-violet-50);
  --color-email-icon-fill: var(--palette-gray-100);
  --color-icon-primary: var(--palette-violet-90);
  --color-info-icon: var(--palette-violet-50);
  --color-info-tooltip: var(--palette-gray-60);
  --color-info-tooltip-hover: var(--palette-violet-50);
  --color-input-background: var(--palette-gray-10);
  --color-input-background2: var(--palette-white);
  --color-input-border: var(--palette-gray-50);
  --color-input-border2: var(--palette-gray-40);
  --color-input-border-active: var(--palette-violet-50);
  --color-input-border-alt: var(--palette-gray-50);
  --color-input-border-gray: var(--palette-gray-20);
  --color-inverted-button-backgrond: var(--color-white);
  --color-inverted-button-text: var(--palette-violet-50);
  --color-inverted-button-hover: var(--color-primary-100);
  --color-job-description-background: var(--palette-white);
  --color-job-description-input: var(--palette-gray-10);
  --color-job-description-input-alt-dark-mode: var(--palette-gray-10);
  --color-job-requirement-select-input-background: var(--color-neutral-50);
  --color-job-requirement-select-input-border: var(--color-neutral-400);
  --color-link: var(--palette-violet-50);
  --color-link-alt-dark: var(--palette-violet-50);
  --color-link-button-text: var(--palette-violet-50);
  --color-link-button-text-hover: var(--palette-violet-60);
  --color-link-button-text-disabled: var(--palette-gray-50);
  --color-link-hover: var(--palette-violet-60);
  --color-link-hover-light-only: var(--palette-violet-60);
  --color-link-on-gradient: var(--palette-violet-60);
  --color-link-on-gradient-hover: var(--palette-violet-50);
  --color-loading-dot-background: var(--palette-gray-60);
  --color-manual-step-icon: var(--palette-gray-60);
  --color-modal-border: var(--palette-gray-40);
  --color-modal-placeholder: var(--palette-gray-60);
  --color-modal-text: var(--palette-violet-90);
  --color-more-button: var(--palette-violet-90);
  --color-nav-element: var(--palette-violet-10);
  --color-nav-element-small: var(--palette-violet-10);
  --color-nav-element-active: var(--color-white);
  --color-nav-element-active-small: var(--palette-violet-50);
  --color-nav-subheader: var(--palette-violet-80);
  --color-nav-user-dropdown-display-header: var(--color-white);
  --color-nav-user-dropdown-icon-default: var(--palette-violet-10);
  --color-nav-user-dropdown-icon-open: var(--palette-violet-50);
  --color-nav-user-dropdown-text: var(--palette-violet-90);
  --color-notification-background: var(--palette-vanilla-30);
  --color-notification-button-hover: var(--palette-violet-60);
  --color-notification-text: var(--palette-violet-90);
  --color-notification-info-banner: var(--palette-violet-10);
  --color-notification-info-banner-recommendation: var(--palette-violet-10);
  --color-notification-info-primary: var(--palette-violet-50);
  --color-notification-error-banner: var(--color-error-50);
  --color-notification-error-primary: var(--color-error-500);
  --color-notification-warn-banner: var(--palette-vanilla-30);
  --color-notification-warn-primary: var(--palette-tangerine-40);
  --color-notification-success-banner: var(--palette-mint-10);
  --color-notification-success-primary: var(--palette-mint-60);
  --color-null-state-icon: var(--palette-gray-50);
  --color-option-label-count: var(--palette-gray-60);
  --color-org-info-text: var(--palette-violet-90);
  --color-page-header-neutral-text: var(--palette-gray-60);
  --color-page-header-primary-text: var(--palette-violet-90);
  --color-pagination-neutral-border: var(--palette-gray-20);
  --color-pagination-neutral-text: var(--palette-gray-60);
  --color-pagination-primary: var(--palette-violet-50);
  --color-pill-background: var(--palette-vanilla-40);
  --color-pill-background-active: var(--palette-violet-10);
  --color-pill-text-default: var(--palette-gray-70);
  --color-powerfilter-popover-text: var(--palette-violet-90);
  --color-prev-next-hover: var(--palette-violet-50);
  --color-prev-next-text: var(--palette-violet-90);
  --color-primary-button-background: var(--palette-violet-50);
  --color-primary-button-background-hover: var(--palette-violet-60);
  --color-primary-button-background-disabled: var(--palette-gray-30);
  --color-primary-button-text: var(--color-white);
  --color-primary-button-text-disabled: var(--palette-gray-50);
  --color-progress-bar-primary: var(--palette-mint-40);
  --color-progress-bar-secondary: var(--palette-violet-40);
  --color-radio-button-border: var(--palette-gray-40);
  --color-radio-button-border-selected: var(--palette-violet-50);
  --color-read-more-hover: var(--palette-violet-60);
  --color-read-more-text: var(--palette-violet-50);
  --color-reset-password-header: var(--palette-violet-80);
  --color-robot-icon-fill: var(--color-card-header-icon);
  --color-scheme: normal;
  --color-search-dropdown-border: var(--palette-gray-40);
  --color-search-input-background: var(--palette-gray-20);
  --color-search-count-badge-background: var(--palette-violet-10);
  --color-search-count-badge-background-hover: var(--color-white);
  --color-secondary-button-border: var(--palette-violet-50);
  --color-secondary-button-border-hover: var(--palette-violet-60);
  --color-secondary-button-border-disabled: var(--palette-gray-40);
  --color-secondary-button-text: var(--palette-violet-50);
  --color-secondary-button-text-hover: var(--palette-violet-60);
  --color-secondary-button-text-disabled: var(--palette-gray-50);
  --color-sensitive-card-background: var(--color-neutral-50);
  --color-sensitive-card-header: var(--palette-violet-90);
  --color-show-more-button: var(--palette-gray-60);
  --color-show-more-button-disabled: var(--palette-gray-20);
  --color-show-more-link: var(--palette-violet-50);
  --color-show-more-link-hover: var(--palette-violet-60);
  --color-sidebar-background: var(--palette-violet-80);
  --color-sidebar-link: var(--palette-violet-10);
  --color-sidebar-link-active-background: var(--palette-violet-70);
  --color-sidebar-link-active-knob: var(--palette-tangerine-40);
  --color-sidebar-link-active-text: var(--color-white);
  --color-sign-in-card-background: var(--palette-white);
  --color-simple-dropdown-label: var(--palette-gray-60);
  --color-simple-dropdown-option: var(--palette-gray-10);
  --color-simple-menu-toggle: var(--palette-violet-50);
  --color-step-card-selected: var(--palette-violet-50);
  --color-soft-header: var(--color-neutral-500);
  --color-spinner-primary: var(--palette-violet-50);
  --color-spinner-secondary: var(--palette-gray-40);
  --color-star-unfilled: var(--palette-gray-40);
  --color-tab-border: var(--palette-gray-40);
  --color-table-border: var(--palette-gray-40);
  --color-table-column: var(--color-primary-800);
  --color-table-header: var(--palette-gray-60);
  --color-table-header-background: var(--palette-gray-40);
  --color-table-header-text: var(--palette-violet-90);
  --color-table-hover: var(--palette-violet-60);
  --color-table-text: var(--palette-violet-90);
  --color-tertiary-button-border: var(--palette-gray-40);
  --color-tertiary-button-border-active: var(--palette-violet-50);
  --color-tertiary-button-border-disabled: var(--palette-gray-30);
  --color-tertiary-button-text: var(--palette-violet-90);
  --color-tertiary-button-text-hover: var(--palette-violet-50);
  --color-tertiary-button-text-active: var(--palette-violet-50);
  --color-tertiary-button-text-disabled: var(--palette-gray-50);
  --color-tertiary-2-button-border: var(--palette-vanilla-40);
  --color-text-inverted: var(--color-white);
  --color-website-link: var(--palette-violet-80);
  --color-search-toggle-background: var(--palette-vanilla-20);
  --color-search-toggle-background-active: var(--palette-vanilla-40);
  --color-search-toggle-text: var(--palette-gray-60);
  --color-search-toggle-text-active: var(--palette-violet-50);
  --color-search-bar: var(--palette-vanilla-40);
  --color-table-container-background: var(--palette-vanilla-30);
  --color-multi-step-progress-bar-violet: var(--palette-violet-10);
  --color-multi-step-progress-bar-vanilla: var(--palette-vanilla-40);
  --color-multi-step-progress-bar-gray: var(--palette-gray-40);
  --color-multi-step-progress-bar-mint: var(--palette-mint-20);
  --color-multi-step-progress-bar-red: var(--palette-red-100);
  --color-campaign-status-text: var(--palette-gray-60);
  --color-tag-vanilla: var(--palette-vanilla-30);
  --color-table-row-hover: var(--palette-violet-10);
  --color-table-expanded-row-background: var(--palette-gray-10);
  --color-step-status-card-border: var(--palette-gray-40);
  --color-step-status-card-background: var(--color-white);
  --color-step-status-card-text: var(--palette-gray-60);
  --color-email-status-card-background: var(--palette-vanilla-30);
  --color-email-status-card-background-replied: var(--palette-mint-10);

  --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-violet-90);
  --color-query-tooltip-text: var(--color-white);

  --color-match-badge-background: var(--palette-mint-10);
  --color-match-badge-background-secondary: var(--palette-gray-40);
  --color-match-badge-background-tertiary: var(--palette-violet-10);
  --color-match-badge-text: var(--palette-violet-90);

  --color-no-match-badge-background: var(--palette-red-50);
  --color-no-match-badge-text: var(--palette-red-500);

  --color-page-banner-background: var(--palette-vanilla-30);
  --color-page-banner-border: var(--palette-vanilla-40);
  --color-connect-email-banner-border: var(--palette-violet-50);

  --color-sequence-list-button: var(--palette-violet-50);

  /* jcw tokens */
  --color-border-outreach-accordion: var(--palette-vanilla-40);
  --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-50);
  --color-icon-filter-template: var(--palette-gray-100);
  --color-text-addEmail: var(--palette-violet-80);

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

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

/* loading spinner is defined here because it is loaded statically */
.loader {
  margin: auto;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -30px;
  margin-left: -30px;
  border: solid 10px;
  border-radius: var(--border-radius-circle);
  border-color: var(--color-spinner-secondary);
  border-bottom-color: var(--color-spinner-primary);
  animation: spin 1s ease-in-out infinite;
  width: 60px;
  height: 60px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}