:root {
  /* Animation */
  --enter-animation-speed: 250ms;
  --exit-animation-speed: 500ms;

  /* Share page */
  --input-width-medium-screens: calc(65 * var(--default-space));
  --input-width-large-screens: calc(83 * var(--default-space));

  /* Video Bar */
  --video-bar-height: calc(51 * var(--default-space));
  --video-bar-height-medium: calc(14 * var(--default-space));
}

:root {
  /* type sizes */
  --legacy-marketing-xxl-font-size: 64px;
  --legacy-marketing-xxl-line-height: calc(var(--legacy-base-space-unit) * 10);
  --legacy-marketing-xl-font-size: 42px;
  --legacy-marketing-xl-line-height: calc(var(--legacy-base-space-unit) * 6);
  --legacy-marketing-l-font-size: 32px;
  --legacy-marketing-l-line-height: calc(var(--legacy-base-space-unit) * 5);
  --legacy-marketing-m-font-size: 24px;
  --legacy-marketing-m-line-height: calc(var(--legacy-base-space-unit) * 4);
  --legacy-marketing-s-font-size: 20px;
  --legacy-marketing-s-line-height: calc(var(--legacy-base-space-unit) * 3);
  --legacy-marketing-xs-font-size: 16px;
  --legacy-marketing-xs-line-height: calc(var(--legacy-base-space-unit) * 3);
  --legacy-marketing-xxs-font-size: 14px;
  --legacy-marketing-xxs-line-height: calc(var(--legacy-base-space-unit) * 3);

  /* font weight */
  --legacy-font-weight-bold: 700;
  --legacy-font-weight-semi-bold: 500;

  /* Typography */
  --legacy-playfairdisplay-bold: playfairdisplay-bold, serif;
  --legacy-proximanova-semibold: proximanova-semibold, 'helvetica neue', helvetica, arial, sans-serif;
  --legacy-proximanova-extrabold: proximanova-extrabold, 'helvetica neue', helvetica, arial, sans-serif;
  --legacy-proximanova-bold: proximanova-bold, 'helvetica neue', helvetica, arial, sans-serif;
  --legacy-proximanova: proximanova, 'helvetica neue', helvetica, arial, sans-serif;
  --legacy-font-family-title: var(--legacy-playfairdisplay-bold);
  --legacy-font-family-header: var(--legacy-proximanova-semibold);
  --legacy-font-family-label: var(--legacy-proximanova-bold);
  --legacy-font-family-body: var(--legacy-proximanova);
  --legacy-font-size-title-large: var(--legacy-marketing-xxl-font-size);
  --legacy-line-height-title-large: var(--legacy-marketing-xxl-line-height);
  --legacy-font-size-title-medium: var(--legacy-marketing-xl-font-size);
  --legacy-line-height-title-medium: var(--legacy-marketing-xl-line-height);
  --legacy-font-size-title-small: var(--legacy-marketing-l-font-size);
  --legacy-line-height-title-small: var(--legacy-marketing-l-line-height);
  --legacy-font-size-title-xsmall: var(--legacy-marketing-m-font-size);
  --legacy-line-height-title-xsmall: var(--legacy-marketing-m-line-height);
  --legacy-font-size-header-large: var(--legacy-marketing-l-font-size);
  --legacy-line-height-header-large: var(--legacy-marketing-l-line-height);
  --legacy-font-size-header-medium: var(--legacy-marketing-m-font-size);
  --legacy-line-height-header-medium: var(--legacy-marketing-m-line-height);
  --legacy-font-size-header-small: var(--legacy-marketing-s-font-size);
  --legacy-line-height-header-small: var(--legacy-marketing-s-line-height);
  --legacy-font-size-header-xsmall: var(--legacy-marketing-xs-font-size);
  --legacy-line-height-header-xsmall: var(--legacy-marketing-xs-line-height);
  --legacy-font-size-label-large: var(--legacy-marketing-s-font-size);
  --legacy-line-height-label-large: var(--legacy-marketing-s-line-height);
  --legacy-letter-spacing-label-large: 1.25px;
  --legacy-font-size-label-medium: var(--legacy-marketing-xs-font-size);
  --legacy-line-height-label-medium: var(--legacy-marketing-xs-line-height);
  --legacy-letter-spacing-label-medium: 1px;
  --legacy-font-size-label-small: var(--legacy-marketing-xxs-font-size);
  --legacy-line-height-label-small: var(--legacy-marketing-xxs-line-height);
  --legacy-letter-spacing-label-small: 1px;
  --legacy-font-size-body-large: var(--legacy-marketing-s-font-size);
  --legacy-line-height-body-large: var(--legacy-marketing-m-line-height);
  --legacy-font-size-body-medium: var(--legacy-marketing-xs-font-size);
  --legacy-line-height-body-medium: var(--legacy-marketing-xs-line-height);
  --legacy-font-size-body-small: var(--legacy-marketing-xxs-font-size);
  --legacy-line-height-body-small: var(--legacy-marketing-xxs-line-height);
}

:root {
  /* General */
  --legacy-base-space-unit: 8px;

  /* A11y */
  --legacy-focus: 1px dotted var(--legacy-a11y-focus);
  --legacy-focus-offset: 2px;

  /* Audio Trimmer */

  /* These are left as px values so that we can use getCssVariable in the AudioTrimmer react file. Cannot use calc or the js function would return a string: 'calc(9 * var(--legacy-default-space));'  */
  --legacy-audio-wave-height: 72px;
  --legacy-duration-overflow-width: 32px;

  /* Comments */
  --legacy-comments-container-padding: calc(3 * var(--legacy-default-space));
  --legacy-comments-threaded-comment-padding: calc(4.5 * var(--legacy-default-space));
  --legacy-comments-options-container-height-without-header: calc(13 * var(--legacy-default-space));
  --legacy-comments-options-container-height-with-header: calc(16 * var(--legacy-default-space));
  --legacy-comments-options-container-height-with-header-upsell: calc(28 * var(--legacy-default-space));
  --legacy-comments-form-height: calc(16 * var(--legacy-default-space)); /* must equal BlockTimeline height so it aligns in A3 */
  --legacy-comments-selected-thread-indicator-width: calc(0.5 * var(--legacy-default-space));

  /* SiteNav */
  --legacy-site-nav-height-desktop: calc(9 * var(--legacy-default-space));

  /* Guider */
  --legacy-guider-border-width: var(--legacy-border-width-s);
  --legacy-guider-arrow-width: calc(3 * var(--legacy-default-space));
  --legacy-guider-arrow-border-width: calc(var(--legacy-guider-arrow-width) / 2);
  --legacy-guider-arrow-shadow-border-width: calc(var(--legacy-guider-arrow-border-width) + var(--legacy-guider-border-width));
  --legacy-spacing-between-guider-and-reference: calc(2.5 * var(--legacy-default-space));
  --legacy-guider-inverted-background: var(--legacy-color-primary);

  /* Modal */
  --legacy-modal-padding: calc(3 * var(--legacy-default-space));

  /* Pill Sizes */
  --legacy-small: 32px;
  --legacy-medium: 40px;
  --legacy-large: 48px;

  /* Radio Button  */

  /* any values that are not multiples of 8 are to mimic our icon sizing and 2px of safety padding */
  --legacy-outer-circle-large: calc(2.5 * var(--legacy-default-space));
  --legacy-inner-circle-large: calc(1.5 * var(--legacy-default-space));
  --legacy-outer-circle-small: calc(2 * var(--legacy-default-space));
  --legacy-inner-circle-small: var(--legacy-default-space);

  /* Product Highlight */
  --legacy-upsell-panel-graphic-width: calc(19 * var(--legacy-default-space));
  --legacy-upsell-panel-graphic-width-small: calc(10 * var(--legacy-default-space));

  /* Tooltip */
  --legacy-tooltip-background-color: var(--legacy-color-surface-dark);

  /* VideoTile */
  --legacy-video-tile-thumbnail-height: calc(16.5 * var(--legacy-default-space));
}

:root {
  --legacy-copy-blue: #181c47;
  --legacy-cobalt: #23408c;
  --legacy-dark-background: #232323;
  --legacy-teal: #1bcdcf;
  --legacy-light-blue: #b3e0e0;
  --legacy-coral: #ff6f5e;
  --legacy-light-peach: #fddbcc;
  --legacy-snot: #93c90e;
  --legacy-sun-yellow: #fc3;
  --legacy-grey-border: #dadada;
  --legacy-grey-background: #f3f3f9;
  --legacy-grey-link: #969696;
  --legacy-grey-text: #505050;
  --legacy-white: #fff;
  --legacy-blue-link: #2d51de;
  --legacy-disabled-input: #f1f1f1;
  --legacy-border-color-default: #d5d8e3;
  --legacy-a11y-focus: #515564;
  --legacy-red: #d10023;
  --legacy-red-hover: #850016;
}

:root {
  /* --legacy---legacy---legacy---legacy---legacy---legacy---legacy---legacy---legacy---legacy--
    Token Options
   --legacy---legacy---legacy---legacy---legacy---legacy---legacy---legacy---legacy---legacy-- */

  /* White */
  --legacy-white: #fff;
  --legacy-white-opacity-10: rgb(255 255 255 / 10%);
  --legacy-white-opacity-20: rgb(255 255 255 / 20%);
  --legacy-white-opacity-30: rgb(255 255 255 / 30%);
  --legacy-white-opacity-40: rgb(255 255 255 / 40%);
  --legacy-white-opacity-50: rgb(255 255 255 / 50%);
  --legacy-white-opacity-60: rgb(255 255 255 / 60%);
  --legacy-white-opacity-70: rgb(255 255 255 / 70%);
  --legacy-white-opacity-80: rgb(255 255 255 / 80%);
  --legacy-white-opacity-90: rgb(255 255 255 / 90%);

  /* Cobalts */
  --legacy-cobalt-0: #f2f4fc;
  --legacy-cobalt-5: #dfe4f9;
  --legacy-cobalt-10: #c9d2f5;
  --legacy-cobalt-20: #9ba9df;
  --legacy-cobalt-30: #6a7fd5;
  --legacy-cobalt-40: #2347d7;
  --legacy-cobalt-50: #0023b0;
  --legacy-cobalt-60: #001c8e;
  --legacy-cobalt-70: #00166f;
  --legacy-cobalt-80: #041352;
  --legacy-cobalt-100: #020a2b;
  --legacy-cobalt-opacity-5: rgb(35 71 215 / 5%);
  --legacy-cobalt-opacity-light-5: rgb(223 228 249 / 0%);
  --legacy-cobalt-opacity-medium-30: rgb(106 127 213 / 0%);
  --legacy-cobalt-opacity-dark-60: rgb(0 28 142 / 0%);

  /* Greys */
  --legacy-grey-0: #f7f9ff;
  --legacy-grey-5: #e6e8f1;
  --legacy-grey-10: #d5d8e3;
  --legacy-grey-20: #afb2be;
  --legacy-grey-30: #8a8d9b;
  --legacy-grey-40: #6a6d7c;
  --legacy-grey-50: #515564;
  --legacy-grey-60: #3a3c49;
  --legacy-grey-70: #292c38;
  --legacy-grey-80: #1e212e;
  --legacy-grey-80-opacity-5: rgb(30 33 46 / 5%);

  /* Reds */
  --legacy-red-0: #fcf6f7;
  --legacy-red-5: #fedde2;
  --legacy-red-10: #ffc3cd;
  --legacy-red-20: #ee91a1;
  --legacy-red-30: #dd536a;
  --legacy-red-40: #d10023;
  --legacy-red-50: #a8001c;
  --legacy-red-60: #850016;
  --legacy-red-70: #680011;
  --legacy-red-80: #52000e;

  /* Greens */
  --legacy-green-0: #f3faf4;
  --legacy-green-5: #d5ecd7;
  --legacy-green-10: #b9dfbc;
  --legacy-green-20: #84bb89;
  --legacy-green-30: #4d9854;
  --legacy-green-40: #147a1d;
  --legacy-green-50: #005b08;
  --legacy-green-60: #004506;
  --legacy-green-70: #003605;
  --legacy-green-80: #002e04;

  /* Yellows */
  --legacy-yellow-0: #faf6ed;
  --legacy-yellow-5: #fff7dc;
  --legacy-yellow-10: #fff8cb;
  --legacy-yellow-20: #ffe19b;
  --legacy-yellow-30: #f3c75e;
  --legacy-yellow-40: #eca704;
  --legacy-yellow-50: #b37d00;
  --legacy-yellow-60: #815a00;
  --legacy-yellow-70: #563c00;
  --legacy-yellow-80: #332400;

  /* Purples */
  --legacy-purple-0: #f8f2ff;
  --legacy-purple-5: #e6cffe;
  --legacy-purple-10: #d3adfc;
  --legacy-purple-20: #af6df7;
  --legacy-purple-30: #9039ef;
  --legacy-purple-40: #7613e4;
  --legacy-purple-50: #6400d3;
  --legacy-purple-60: #5900bd;
  --legacy-purple-70: #4c00a3;
  --legacy-purple-80: #3f0087;

  /* Teals */
  --legacy-teal-50: #68baa2;

  /* spacing */
  --legacy-default-space: 8px;

  /* Box Shadow Color */
  --legacy-box-shadow-color-10: rgb(0 0 0 / 10%);
  --legacy-box-shadow-color-15: rgb(0 0 0 / 15%);
  --legacy-box-shadow-color-18: rgb(0 0 0 / 18%);

  /* Box Shadows */
  --legacy-box-shadow-lowest: 0 2px 4px 0 var(--legacy-box-shadow-color-18), 0 0 2px 0 var(--legacy-box-shadow-color-18);
  --legacy-box-shadow-lower: 0 2px 6px 0 var(--legacy-box-shadow-color-18), 0 0 2px 0 var(--legacy-box-shadow-color-18);
  --legacy-box-shadow-mid: 0 4px 8px 0 var(--legacy-box-shadow-color-15), 0 2px 4px 0 var(--legacy-box-shadow-color-10);
  --legacy-box-shadow-high: 0 8px 12px 0 var(--legacy-box-shadow-color-15), 0 4px 6px 0 var(--legacy-box-shadow-color-10);
  --legacy-box-shadow-higher: 0 20px 24px 0 var(--legacy-box-shadow-color-15), 0 8px 16px 0 var(--legacy-box-shadow-color-10);
  --legacy-box-shadow-highest: 0 32px 32px 0 var(--legacy-box-shadow-color-15), 0 24px 32px 0 var(--legacy-box-shadow-color-10);

  /* Font family */
  --legacy-proximanova-semibold: proximanova-semibold, 'helvetica neue', helvetica, arial, sans-serif;
  --legacy-proximanova: proximanova, 'helvetica neue', helvetica, arial, sans-serif;
  --legacy-playfairdisplay-bold: playfairdisplay-bold, serif;

  /* Font size */
  --legacy-xxxxl-font-size: 64px;
  --legacy-xxxl-font-size: 42px;
  --legacy-xxl-font-size: 32px;
  --legacy-xl-font-size: 24px;
  --legacy-l-font-size: 20px;
  --legacy-m-font-size: 16px;
  --legacy-s-font-size: 14px;
  --legacy-xs-font-size: 12px;

  /* Line height */
  --legacy-xxxl-line-height: 80px;
  --legacy-xxl-line-height: 48px;
  --legacy-xl-line-height: 40px;
  --legacy-l-line-height: 32px;
  --legacy-m-line-height: 24px;
  --legacy-s-line-height: 20px;
  --legacy-xs-line-height: 16px;

  /* Letter spacing */
  --legacy-xs-letter-spacing: 0.1px;
  --legacy-s-letter-spacing: 0.15px;
  --legacy-m-letter-spacing: 0.25px;
  --legacy-l-letter-spacing: 0.4px;
  --legacy-xl-letter-spacing: 0.5px;

  /* Font weight */
  --legacy-font-weight-semi-bold: 600;

  /* Border */
  --legacy-border-width-s: 1px;
  --legacy-border-width-l: 2px;
  --legacy-border-radius-xs: 2px;
  --legacy-border-radius-s: 4px;
  --legacy-border-radius-m: 8px;
  --legacy-border-radius-l: 16px;
  --legacy-border-radius-xl: 24px;

  /* Transition Speeds */
  --legacy-s-transition-speed: 100ms;
  --legacy-m-transition-speed: 200ms;
  --legacy-l-transition-speed: 300ms;
  --legacy-xl-transition-speed: 500ms;

  /* --legacy---legacy---legacy---legacy---legacy---legacy---legacy---legacy---legacy---legacy--
  Token definitions
  --legacy---legacy---legacy---legacy---legacy---legacy---legacy---legacy---legacy---legacy-- */

  /* Typography */
  --legacy-font-family-title: var(--legacy-playfairdisplay-bold);
  --legacy-font-family-header: var(--legacy-proximanova-semibold);
  --legacy-font-family-label: var(--legacy-proximanova-semibold);
  --legacy-font-family-body: var(--legacy-proximanova);

  /* Colors */

  /* Primary */
  --legacy-color-primary: var(--legacy-cobalt-40);
  --legacy-color-primary-light: var(--legacy-cobalt-20);
  --legacy-color-primary-dark: var(--legacy-cobalt-60);
  --legacy-color-on-primary: var(--legacy-white);

  /* Secondary */
  --legacy-color-on-secondary: var(--legacy-white);

  /* Text/Icons */
  --legacy-color-text-icon-primary: var(--legacy-grey-80);
  --legacy-color-text-icon-secondary: var(--legacy-grey-40);
  --legacy-color-text-icon-danger: var(--legacy-red-40);
  --legacy-color-text-icon-emphasis: var(--legacy-cobalt-60);
  --legacy-color-text-icon-accent: var(--legacy-teal-50);

  /* Background colors are used for the main backgrounds of the pages */
  --legacy-color-background: var(--legacy-white);
  --legacy-color-background-light: var(--legacy-grey-0);
  --legacy-color-background-dark: var(--legacy-cobalt-100);
  --legacy-color-on-background-dark: var(--legacy-white);

  /* Surface colors are mainly used for the backgrounds of components */
  --legacy-color-surface: var(--legacy-white);
  --legacy-color-surface-light: var(--legacy-cobalt-5);
  --legacy-color-surface-light-transparent: var(--legacy-cobalt-opacity-light-5);
  --legacy-color-surface-light-medium: var(--legacy-cobalt-30);
  --legacy-color-surface-light-medium-transparent: var(--legacy-cobalt-opacity-medium-30);
  --legacy-color-surface-primary-light: var(--legacy-cobalt-opacity-5);
  --legacy-color-surface-primary-dark-transparent: var(--legacy-cobalt-opacity-dark-60);
  --legacy-color-surface-dark: var(--legacy-grey-80);
  --legacy-color-surface-dark-transparent: var(--legacy-grey-80-opacity-5);
  --legacy-color-on-surface-dark: var(--legacy-white);
  --legacy-color-on-surface-light-medium: var(--legacy-cobalt-10);

  /* Messaging colors */

  /* Success */
  --legacy-color-success: var(--legacy-green-40);
  --legacy-color-success-light: var(--legacy-green-0);
  --legacy-color-success-dark: var(--legacy-green-60);
  --legacy-color-on-success: var(--legacy-white);

  /* Error */
  --legacy-color-error: var(--legacy-red-40);
  --legacy-color-error-light: var(--legacy-red-5);
  --legacy-color-error-dark: var(--legacy-red-60);
  --legacy-color-on-error: var(--legacy-white);

  /* Warning */
  --legacy-color-warning: var(--legacy-yellow-40);
  --legacy-color-warning-light: var(--legacy-yellow-0);
  --legacy-color-warning-dark: var(--legacy-yellow-60);
  --legacy-color-on-warning: var(--legacy-white);

  /* Status */
  --legacy-color-status-pending: var(--legacy-yellow-10);

  /* Mid tier upsell */
  --legacy-color-mid-tier-upsell: var(--legacy-yellow-40);
  --legacy-color-mid-tier-upsell-surface: var(--legacy-yellow-0);

  /* Top tier upsell */
  --legacy-color-top-tier-upsell: var(--legacy-purple-20);
  --legacy-color-top-tier-upsell-surface-hover: var(--legacy-purple-5);
  --legacy-color-top-tier-upsell-surface: var(--legacy-purple-0);

  /* State colors */
  --legacy-color-background-active: var(--legacy-cobalt-5);
  --legacy-color-background-hover: var(--legacy-grey-80-opacity-5);
  --legacy-color-background-hover-on-dark: var(--legacy-white-opacity-10);

  /* Disabled */
  --legacy-color-disabled: var(--legacy-grey-20);
  --legacy-color-disabled-on-dark: var(--legacy-grey-20);

  /* Inactive */
  --legacy-color-inactive: var(--legacy-grey-20);
  --legacy-color-inactive-on-dark: var(--legacy-grey-20);

  /* Overlay colors */
  --legacy-overlay-background-dark: rgb(0 0 0 / 60%);
  --legacy-overlay-background-light: var(--legacy-white-opacity-80);
  --legacy-overlay-messaging: var(--legacy-white-opacity-90);

  /* Borders */
  --legacy-border-radius-default: var(--legacy-border-radius-xs);
  --legacy-border-color-default: var(--legacy-grey-10);
  --legacy-border-color-dark: var(--legacy-grey-40);
  --legacy-border-default: var(--legacy-border-width-s) solid var(--legacy-border-color-default);
  --legacy-border-default-dashed: var(--legacy-border-width-s) dashed var(--legacy-border-color-default);

  /* Enter Transitions */
  --legacy-enter-transition-speed-short: var(--legacy-s-transition-speed);
  --legacy-enter-transition-speed-medium: var(--legacy-l-transition-speed);
  --legacy-enter-transition-speed-long: var(--legacy-xl-transition-speed);

  /* Exit transitions */
  --legacy-exit-transition-speed-short: var(--legacy-s-transition-speed);
  --legacy-exit-transition-speed-medium: var(--legacy-m-transition-speed);
  --legacy-exit-transition-speed-long: var(--legacy-l-transition-speed);
}
.rebrand {
  /* --legacy---legacy---legacy---legacy---legacy---legacy---legacy---legacy---legacy---legacy--
    Token Options
   --legacy---legacy---legacy---legacy---legacy---legacy---legacy---legacy---legacy---legacy-- */

  /* White */
  --legacy-white: #fff;
  --legacy-white-opacity-10: rgb(255 255 255 / 10%);
  --legacy-white-opacity-20: rgb(255 255 255 / 20%);
  --legacy-white-opacity-30: rgb(255 255 255 / 30%);
  --legacy-white-opacity-40: rgb(255 255 255 / 40%);
  --legacy-white-opacity-50: rgb(255 255 255 / 50%);
  --legacy-white-opacity-60: rgb(255 255 255 / 60%);
  --legacy-white-opacity-70: rgb(255 255 255 / 70%);
  --legacy-white-opacity-80: rgb(255 255 255 / 80%);
  --legacy-white-opacity-90: rgb(255 255 255 / 90%);

  /* Cobalts */
  --legacy-cobalt-0: #f2f4fc;
  --legacy-cobalt-5: #dfe4f9;
  --legacy-cobalt-10: #c9d2f5;
  --legacy-cobalt-20: #9ba9df;
  --legacy-cobalt-30: #6a7fd5;
  --legacy-cobalt-40: #2347d7;
  --legacy-cobalt-50: #0023b0;
  --legacy-cobalt-60: #001c8e;
  --legacy-cobalt-70: #00166f;
  --legacy-cobalt-80: #041352;
  --legacy-cobalt-100: #020a2b;
  --legacy-cobalt-opacity-5: rgb(35 71 215 / 5%);
  --legacy-cobalt-opacity-light-5: rgb(223 228 249 / 0%);
  --legacy-cobalt-opacity-medium-30: rgb(106 127 213 / 0%);
  --legacy-cobalt-opacity-dark-60: rgb(0 28 142 / 0%);

  /* Greys */
  --legacy-grey-0: #f7f9ff;
  --legacy-grey-5: #e6e8f1;
  --legacy-grey-10: #d5d8e3;
  --legacy-grey-20: #afb2be;
  --legacy-grey-30: #8a8d9b;
  --legacy-grey-40: #6a6d7c;
  --legacy-grey-50: #515564;
  --legacy-grey-60: #3a3c49;
  --legacy-grey-70: #292c38;
  --legacy-grey-80: #1e212e;
  --legacy-grey-80-opacity-5: rgb(30 33 46 / 5%);

  /* Reds */
  --legacy-red-0: #fcf6f7;
  --legacy-red-5: #fedde2;
  --legacy-red-10: #ffc3cd;
  --legacy-red-20: #ee91a1;
  --legacy-red-30: #dd536a;
  --legacy-red-40: #d10023;
  --legacy-red-50: #a8001c;
  --legacy-red-60: #850016;
  --legacy-red-70: #680011;
  --legacy-red-80: #52000e;

  /* Greens */
  --legacy-green-0: #f3faf4;
  --legacy-green-5: #d5ecd7;
  --legacy-green-10: #b9dfbc;
  --legacy-green-20: #84bb89;
  --legacy-green-30: #4d9854;
  --legacy-green-40: #147a1d;
  --legacy-green-50: #005b08;
  --legacy-green-60: #004506;
  --legacy-green-70: #003605;
  --legacy-green-80: #002e04;

  /* Yellows */
  --legacy-yellow-0: #faf6ed;
  --legacy-yellow-5: #fff7dc;
  --legacy-yellow-10: #fff8cb;
  --legacy-yellow-20: #ffe19b;
  --legacy-yellow-30: #f3c75e;
  --legacy-yellow-40: #eca704;
  --legacy-yellow-50: #b37d00;
  --legacy-yellow-60: #815a00;
  --legacy-yellow-70: #563c00;
  --legacy-yellow-80: #332400;

  /* Purples */
  --legacy-purple-0: #f8f2ff;
  --legacy-purple-5: #e6cffe;
  --legacy-purple-10: #d3adfc;
  --legacy-purple-20: #af6df7;
  --legacy-purple-30: #9039ef;
  --legacy-purple-40: #7613e4;
  --legacy-purple-50: #6400d3;
  --legacy-purple-60: #5900bd;
  --legacy-purple-70: #4c00a3;
  --legacy-purple-80: #3f0087;

  /* Teals */
  --legacy-teal-50: #68baa2;

  /* spacing */
  --legacy-default-space: 8px;

  /* Box Shadow Color */
  --legacy-box-shadow-color-10: rgb(0 0 0 / 10%);
  --legacy-box-shadow-color-15: rgb(0 0 0 / 15%);
  --legacy-box-shadow-color-18: rgb(0 0 0 / 18%);

  /* Box Shadows */
  --legacy-box-shadow-lowest: 0 2px 4px 0 var(--legacy-box-shadow-color-18), 0 0 2px 0 var(--legacy-box-shadow-color-18);
  --legacy-box-shadow-lower: 0 2px 6px 0 var(--legacy-box-shadow-color-18), 0 0 2px 0 var(--legacy-box-shadow-color-18);
  --legacy-box-shadow-mid: 0 4px 8px 0 var(--legacy-box-shadow-color-15), 0 2px 4px 0 var(--legacy-box-shadow-color-10);
  --legacy-box-shadow-high: 0 8px 12px 0 var(--legacy-box-shadow-color-15), 0 4px 6px 0 var(--legacy-box-shadow-color-10);
  --legacy-box-shadow-higher: 0 20px 24px 0 var(--legacy-box-shadow-color-15), 0 8px 16px 0 var(--legacy-box-shadow-color-10);
  --legacy-box-shadow-highest: 0 32px 32px 0 var(--legacy-box-shadow-color-15), 0 24px 32px 0 var(--legacy-box-shadow-color-10);

  /* Font family */
  --legacy-proximanova-semibold: proximanova-semibold, 'helvetica neue', helvetica, arial, sans-serif;
  --legacy-proximanova: proximanova, 'helvetica neue', helvetica, arial, sans-serif;
  --legacy-playfairdisplay-bold: playfairdisplay-bold, serif;

  /* Font size */
  --legacy-xxxxl-font-size: 64px;
  --legacy-xxxl-font-size: 42px;
  --legacy-xxl-font-size: 32px;
  --legacy-xl-font-size: 24px;
  --legacy-l-font-size: 20px;
  --legacy-m-font-size: 16px;
  --legacy-s-font-size: 14px;
  --legacy-xs-font-size: 12px;

  /* Line height */
  --legacy-xxxl-line-height: 80px;
  --legacy-xxl-line-height: 48px;
  --legacy-xl-line-height: 40px;
  --legacy-l-line-height: 32px;
  --legacy-m-line-height: 24px;
  --legacy-s-line-height: 20px;
  --legacy-xs-line-height: 16px;

  /* Letter spacing */
  --legacy-xs-letter-spacing: 0.1px;
  --legacy-s-letter-spacing: 0.15px;
  --legacy-m-letter-spacing: 0.25px;
  --legacy-l-letter-spacing: 0.4px;
  --legacy-xl-letter-spacing: 0.5px;

  /* Font weight */
  --legacy-font-weight-semi-bold: 600;

  /* Border */
  --legacy-border-width-s: 1px;
  --legacy-border-width-l: 2px;
  --legacy-border-radius-xs: 2px;
  --legacy-border-radius-s: 4px;
  --legacy-border-radius-m: 8px;
  --legacy-border-radius-l: 16px;
  --legacy-border-radius-xl: 24px;

  /* Transition Speeds */
  --legacy-s-transition-speed: 100ms;
  --legacy-m-transition-speed: 200ms;
  --legacy-l-transition-speed: 300ms;
  --legacy-xl-transition-speed: 500ms;

  /* --legacy---legacy---legacy---legacy---legacy---legacy---legacy---legacy---legacy---legacy--
  Token definitions
  --legacy---legacy---legacy---legacy---legacy---legacy---legacy---legacy---legacy---legacy-- */

  /* Typography */
  --legacy-font-family-title: var(--legacy-playfairdisplay-bold);
  --legacy-font-family-header: var(--legacy-proximanova-semibold);
  --legacy-font-family-label: var(--legacy-proximanova-semibold);
  --legacy-font-family-body: var(--legacy-proximanova);

  /* Colors */

  /* Primary */
  --legacy-color-primary: var(--legacy-grey-20);
  --legacy-color-primary-light: var(--legacy-grey-20);
  --legacy-color-primary-dark: var(--legacy-grey-60);
  --legacy-color-on-primary: var(--legacy-white);

  /* Secondary */
  --legacy-color-on-secondary: var(--legacy-white);

  /* Text/Icons */
  --legacy-color-text-icon-primary: var(--legacy-grey-80);
  --legacy-color-text-icon-secondary: var(--legacy-grey-40);
  --legacy-color-text-icon-danger: var(--legacy-red-40);
  --legacy-color-text-icon-emphasis: var(--legacy-cobalt-60);
  --legacy-color-text-icon-accent: var(--legacy-teal-50);

  /* Background colors are used for the main backgrounds of the pages */
  --legacy-color-background: var(--legacy-white);
  --legacy-color-background-light: var(--legacy-grey-0);
  --legacy-color-background-dark: var(--legacy-cobalt-100);
  --legacy-color-on-background-dark: var(--legacy-white);

  /* Surface colors are mainly used for the backgrounds of components */
  --legacy-color-surface: var(--legacy-white);
  --legacy-color-surface-light: var(--legacy-cobalt-5);
  --legacy-color-surface-light-transparent: var(--legacy-cobalt-opacity-light-5);
  --legacy-color-surface-light-medium: var(--legacy-cobalt-30);
  --legacy-color-surface-light-medium-transparent: var(--legacy-cobalt-opacity-medium-30);
  --legacy-color-surface-primary-light: var(--legacy-cobalt-opacity-5);
  --legacy-color-surface-primary-dark-transparent: var(--legacy-cobalt-opacity-dark-60);
  --legacy-color-surface-dark: var(--legacy-grey-80);
  --legacy-color-surface-dark-transparent: var(--legacy-grey-80-opacity-5);
  --legacy-color-on-surface-dark: var(--legacy-white);
  --legacy-color-on-surface-light-medium: var(--legacy-cobalt-10);

  /* Messaging colors */

  /* Success */
  --legacy-color-success: var(--legacy-green-40);
  --legacy-color-success-light: var(--legacy-green-0);
  --legacy-color-success-dark: var(--legacy-green-60);
  --legacy-color-on-success: var(--legacy-white);

  /* Error */
  --legacy-color-error: var(--legacy-red-40);
  --legacy-color-error-light: var(--legacy-red-5);
  --legacy-color-error-dark: var(--legacy-red-60);
  --legacy-color-on-error: var(--legacy-white);

  /* Warning */
  --legacy-color-warning: var(--legacy-yellow-40);
  --legacy-color-warning-light: var(--legacy-yellow-0);
  --legacy-color-warning-dark: var(--legacy-yellow-60);
  --legacy-color-on-warning: var(--legacy-white);

  /* Status */
  --legacy-color-status-pending: var(--legacy-yellow-10);

  /* Mid tier upsell */
  --legacy-color-mid-tier-upsell: var(--legacy-yellow-40);
  --legacy-color-mid-tier-upsell-surface: var(--legacy-yellow-0);

  /* Top tier upsell */
  --legacy-color-top-tier-upsell: var(--legacy-purple-20);
  --legacy-color-top-tier-upsell-surface-hover: var(--legacy-purple-5);
  --legacy-color-top-tier-upsell-surface: var(--legacy-purple-0);

  /* State colors */
  --legacy-color-background-active: var(--legacy-cobalt-5);
  --legacy-color-background-hover: var(--legacy-grey-80-opacity-5);
  --legacy-color-background-hover-on-dark: var(--legacy-white-opacity-10);

  /* Disabled */
  --legacy-color-disabled: var(--legacy-grey-20);
  --legacy-color-disabled-on-dark: var(--legacy-grey-20);

  /* Inactive */
  --legacy-color-inactive: var(--legacy-grey-20);
  --legacy-color-inactive-on-dark: var(--legacy-grey-20);

  /* Overlay colors */
  --legacy-overlay-background-dark: rgb(0 0 0 / 60%);
  --legacy-overlay-background-light: var(--legacy-white-opacity-80);
  --legacy-overlay-messaging: var(--legacy-white-opacity-90);

  /* Borders */
  --legacy-border-radius-default: var(--legacy-border-radius-xs);
  --legacy-border-color-default: var(--legacy-grey-10);
  --legacy-border-color-dark: var(--legacy-grey-40);
  --legacy-border-default: var(--legacy-border-width-s) solid var(--legacy-border-color-default);
  --legacy-border-default-dashed: var(--legacy-border-width-s) dashed var(--legacy-border-color-default);

  /* Enter Transitions */
  --legacy-enter-transition-speed-short: var(--legacy-s-transition-speed);
  --legacy-enter-transition-speed-medium: var(--legacy-l-transition-speed);
  --legacy-enter-transition-speed-long: var(--legacy-xl-transition-speed);

  /* Exit transitions */
  --legacy-exit-transition-speed-short: var(--legacy-s-transition-speed);
  --legacy-exit-transition-speed-medium: var(--legacy-m-transition-speed);
  --legacy-exit-transition-speed-long: var(--legacy-l-transition-speed);
}

:root {
  --legacy-apple-black: #000;
  --legacy-facebook-blue: #3b5998;
  --legacy-instagram-red: #e34060;
  --legacy-linkedin-blue: #0077b5;
  --legacy-pinterest-red: #bd181c;
  --legacy-twitter-blue: #00aced;
  --legacy-youtube-red: #f00;
}

:root {
  /* General */
  --base-space-unit: 8px;

  /* A11y */
  --focus: 1px dotted var(--a11y-focus);
  --focus-offset: 2px;

  /* Comments */
  --comments-container-padding: calc(3 * var(--default-space));
  --comments-threaded-comment-padding: calc(4.5 * var(--default-space));
  --comments-options-container-height-without-header: calc(13 * var(--default-space));
  --comments-options-container-height-with-header: calc(16 * var(--default-space));
  --comments-options-container-height-with-header-upsell: calc(28 * var(--default-space));
  --comments-form-height: calc(16 * var(--default-space)); /* must equal BlockTimeline height so it aligns in A3 */
  --comments-selected-thread-indicator-width: calc(0.5 * var(--default-space));

  /* SiteNav */
  --site-nav-height-desktop: calc(9 * var(--default-space));

  /* Guider */
  --guider-border-width: var(--border-width-s);
  --guider-arrow-width: calc(3 * var(--default-space));
  --guider-arrow-border-width: calc(var(--guider-arrow-width) / 2);
  --guider-arrow-shadow-border-width: calc(var(--guider-arrow-border-width) + var(--guider-border-width));
  --spacing-between-guider-and-reference: calc(2.5 * var(--default-space));
  --guider-inverted-background: var(--color-primary);

  /* Modal */
  --modal-padding: calc(3 * var(--default-space));

  /* Pill Sizes */
  --small: 32px;
  --medium: 40px;
  --large: 48px;

  /* Product Highlight */
  --upsell-panel-graphic-width: calc(19 * var(--default-space));
  --upsell-panel-graphic-width-small: calc(10 * var(--default-space));

  /* Tooltip */
  --tooltip-background-color: var(--color-surface-dark);

  /* VideoTile */
  --video-tile-thumbnail-height: calc(16.5 * var(--default-space));
}

/*
THIS FILE IS AUTO-GENERATED. DO NOT UPDATE BY HAND
Update tokens/tokens.js and run 'yarn build:tokens' to regenerate
*/
:root {
  /* Token options */

  /* Colors */

  /* Cobalt */
  --cobalt-0: #F2F4FC;
  --cobalt-5: #DFEAF9;
  --cobalt-10: #C9DDF5;
  --cobalt-20: #9BA9DF;
  --cobalt-30: #6A9AD5;
  --cobalt-40: #236ED7;
  --cobalt-50: #1559AD;
  --cobalt-60: #003B84;
  --cobalt-70: #00166F;
  --cobalt-80: #041352;
  --cobalt-100: #020A2B;
  --cobalt-opacity-5: rgb(35 71 215 / 5%);

  /* Sun */
  --sun-5: #FFF9E3;
  --sun-10: #FFF5D4;
  --sun-20: #FFEDAC;
  --sun-30: #FFE485;
  --sun-40: #FFDC5D;
  --sun-45: #FFD335;
  --sun-50: #FFC700;
  --sun-60: #EDBF18;
  --sun-70: #CFA615;
  --sun-80: #9F7D05;
  --sun-90: #7F6103;

  /* Sky */
  --sky-5: #F3F9FF;
  --sky-10: #E2F0FF;
  --sky-20: #B8D6FF;
  --sky-30: #86BCFF;
  --sky-40: #65A5FF;
  --sky-50: #4392FF;
  --sky-60: #3D86EB;
  --sky-70: #377AD7;
  --sky-80: #1C5BAE;
  --sky-90: #003C84;

  /* Gray blue */
  --gray-blue-5: #F6FAFC;
  --gray-blue-10: #E9F2F8;
  --gray-blue-20: #C9E0EE;
  --gray-blue-30: #A4CBE1;
  --gray-blue-40: #8BBCD9;
  --gray-blue-50: #71AED1;
  --gray-blue-60: #5DA3CB;
  --gray-blue-70: #4A97C4;
  --gray-blue-80: #317399;
  --gray-blue-90: #204B64;

  /* Neutrals */
  --white: #fff;
  --white-opacity-10: rgb(255 255 255 / 10%);
  --white-opacity-80: rgb(255 255 255 / 80%);
  --white-opacity-90: rgb(255 255 255 / 90%);
  --gray-0: #F7FAFF;
  --gray-5: #E6E8F1;
  --gray-10: #D5DBE3;
  --gray-20: #AFB6BE;
  --gray-30: #8A8D9B;
  --gray-40: #6A727C;
  --gray-50: #515564;
  --gray-60: #3A3C49;
  --gray-70: #292C38;
  --gray-80: #1E252E;
  --gray-80-opacity-5: rgb(30 37 46 / 5%);

  /* Red */
  --red-0: #FCF6F7;
  --red-5: #FEDDE2;
  --red-10: #FFC3CD;
  --red-20: #EE91A1;
  --red-30: #DD536A;
  --red-40: #D10023;
  --red-50: #A8001C;
  --red-60: #850016;
  --red-70: #680011;
  --red-80: #52000E;

  /* Green */
  --green-0: #F3FAF4;
  --green-5: #D5ECD7;
  --green-10: #B9DFBC;
  --green-20: #84BB89;
  --green-30: #4D9854;
  --green-40: #147A1D;
  --green-50: #005B08;
  --green-60: #004506;
  --green-70: #003605;
  --green-80: #002E04;

  /* Yellow */
  --yellow-0: #FAF6ED;
  --yellow-5: #FFF7DC;
  --yellow-10: #FFF8CB;
  --yellow-20: #FFE19B;
  --yellow-30: #F3C75E;
  --yellow-40: #ECA704;
  --yellow-50: #B37D00;
  --yellow-60: #815A00;
  --yellow-70: #563C00;
  --yellow-80: #332400;

  /* Purple */
  --purple-0: #F8F2FF;
  --purple-5: #E6CFFE;
  --purple-10: #D3ADFC;
  --purple-20: #AF6DF7;
  --purple-30: #9039EF;
  --purple-40: #7613E4;
  --purple-50: #6400D3;
  --purple-60: #5900BD;
  --purple-70: #4C00A3;
  --purple-80: #3F0087;

  /* Purple-tinted */
  --purple-tinted-10: #EFEDF8;
  --purple-tinted-50: #7E70C7;
  --purple-tinted-60: #614FBA;

  /* Teal */
  --teal-50: #68BAA2;

  /* Beige */
  --beige-10: #F2F0F0;
  --beige-20: #EBE9E8;
  --beige-30: #EAE3E1;

  /* Black */
  --black-opacity-60: rgb(0 0 0 / 60%);

  /* Spacing */
  --default-space: 8px;

  /* Box shadow color */
  --box-shadow-color-10: rgb(0 0 0 / 10%);
  --box-shadow-color-15: rgb(0 0 0 / 15%);
  --box-shadow-color-18: rgb(0 0 0 / 18%);

  /* Box shadow */
  --box-shadow-lowest: 0 2px 4px 0 var(--box-shadow-color-18), 0 0 2px 0 var(--box-shadow-color-18);
  --box-shadow-lower: 0 2px 6px 0 var(--box-shadow-color-18), 0 0 2px 0 var(--box-shadow-color-18);
  --box-shadow-mid: 0 4px 8px 0 var(--box-shadow-color-15), 0 2px 4px 0 var(--box-shadow-color-10);
  --box-shadow-high: 0 8px 12px 0 var(--box-shadow-color-15), 0 4px 6px 0 var(--box-shadow-color-10);
  --box-shadow-higher: 0 20px 24px 0 var(--box-shadow-color-15), 0 8px 16px 0 var(--box-shadow-color-10);
  --box-shadow-highest: 0 32px 32px 0 var(--box-shadow-color-15), 0 24px 32px 0 var(--box-shadow-color-10);

  /* Font family */
  --inter-semibold: inter-semibold, 'helvetica neue', helvetica, arial, sans-serif;
  --inter-medium: inter-medium, 'helvetica neue', helvetica, arial, sans-serif;
  --inter: inter-regular, 'helvetica neue', helvetica, arial, sans-serif;

  /* Font size */
  --xxl-font-size: 32px;
  --xl-font-size: 24px;
  --l-font-size: 20px;
  --m-font-size: 16px;
  --s-font-size: 14px;
  --xs-font-size: 12px;

  /* Line height */
  --xxxl-line-height: 42px;
  --xxl-line-height: 32px;
  --xl-line-height: 24px;
  --l-line-height: 20px;
  --m-line-height: 16px;
  --s-line-height: 14px;
  --xs-line-height: 12px;

  /* Letter spacing */
  --l-letter-spacing: -0.3px;
  --m-letter-spacing: -0.5px;
  --s-letter-spacing: -0.6px;
  --xs-letter-spacing: -0.7px;
  --xxs-letter-spacing: -1px;

  /* Font weight */
  --font-weight-semi-bold: 600;
  --font-weight-medium: 500;

  /* Border */
  --border-width-s: 1px;
  --border-width-l: 2px;
  --border-radius-xs: 2px;
  --border-radius-s: 4px;
  --border-radius-m: 8px;
  --border-radius-l: 16px;
  --border-radius-xl: 24px;

  /* Transition speed */
  --s-transition-speed: 100ms;
  --m-transition-speed: 200ms;
  --l-transition-speed: 300ms;
  --xl-transition-speed: 500ms;

  /* Token definitions */

  /* Typography */
  --font-family-title: var(--inter-medium);
  --font-family-header: var(--inter-medium);
  --font-family-label: var(--inter-semibold);
  --font-family-body: var(--inter);

  /* Colors */

  /* Default */

  /* Primary */
  --color-primary: var(--sun-50);
  --color-primary-hover: var(--sun-40);
  --color-primary-light: var(--sun-30);
  --color-primary-dark: var(--sun-80);
  --color-on-primary: var(--gray-80);

  /* Secondary */
  --color-secondary: var(--cobalt-50);
  --color-secondary-light: var(--sky-30);
  --color-secondary-dark: var(--cobalt-60);
  --color-on-secondary: var(--white);

  /* Text icon */
  --color-text-icon-primary: var(--gray-80);
  --color-text-icon-secondary: var(--gray-40);
  --color-text-icon-danger: var(--red-50);
  --color-text-icon-emphasis: var(--gray-blue-90);
  --color-text-icon-accent: var(--teal-50);
  --color-icon-on-filled: var(--white);

  /* States */
  --color-background-active: var(--cobalt-5);
  --color-background-hover: var(--gray-80-opacity-5);
  --color-background-hover-on-dark: var(--white-opacity-10);
  --color-primary-disabled: var(--beige-30);
  --color-disabled: var(--gray-20);
  --color-on-disabled: var(--white);
  --color-disabled-on-dark: var(--gray-20);
  --color-inactive: var(--gray-20);
  --color-inactive-on-dark: var(--gray-20);

  /* Background */

  /* Background */
  --color-background: var(--white);
  --color-background-light: var(--gray-0);
  --color-background-dark: var(--cobalt-100);
  --color-on-background-dark: var(--white);
  --color-background-video-light: var(--beige-10);
  --color-background-video: var(--beige-20);
  --color-background-video-dark: var(--beige-30);

  /* Surface */
  --color-surface: var(--white);
  --color-surface-light: var(--cobalt-5);
  --color-surface-light-medium: var(--cobalt-30);
  --color-surface-primary-light: var(--cobalt-opacity-5);
  --color-surface-dark: var(--gray-80);
  --color-surface-dark-transparent: var(--gray-80-opacity-5);
  --color-on-surface-dark: var(--white);
  --color-on-surface-light-medium: var(--cobalt-10);

  /* Overlay */
  --overlay-background-dark: var(--black-opacity-60);
  --overlay-background-light: var(--white-opacity-80);
  --overlay-messaging: var(--white-opacity-90);

  /* Messaging */

  /* Success */
  --color-success: var(--green-40);
  --color-success-light: var(--green-0);
  --color-success-dark: var(--green-60);
  --color-on-success: var(--white);

  /* Error */
  --color-error: var(--red-40);
  --color-error-light: var(--red-5);
  --color-error-dark: var(--red-60);
  --color-on-error: var(--white);

  /* Warning */
  --color-warning: var(--yellow-40);
  --color-warning-light: var(--yellow-0);
  --color-warning-dark: var(--yellow-60);
  --color-on-warning: var(--white);

  /* Status */
  --color-status-pending: var(--yellow-10);

  /* Misc */
  --tooltip-background-color: var(--color-surface-dark);
  --video-tile-thumbnail-height: calc(21.5 * var(--default-space));

  /* Upsell */

  /* Mid tier */
  --color-mid-tier-upsell: var(--sun-50);
  --color-mid-tier-upsell-surface: var(--sun-10);

  /* Top tier */
  --color-top-tier-upsell: var(--purple-tinted-60);
  --color-top-tier-upsell-surface-hover: var(--purple-tinted-50);
  --color-top-tier-upsell-surface: var(--purple-tinted-10);

  /* Borders */
  --border-color-default: var(--gray-10);
  --border-color-dark: var(--gray-40);
  --border-default: var(--border-width-s) solid var(--border-color-default);
  --border-default-dashed: var(--border-width-s) dashed var(--border-color-default);
  --border-highlight: var(--border-width-s) solid var(--color-primary);

  /* Graphic */
  --color-graphic-surface: var(--sky-50);

  /* Enter transition */
  --enter-transition-speed-short: var(--s-transition-speed);
  --enter-transition-speed-medium: var(--l-transition-speed);
  --enter-transition-speed-long: var(--xl-transition-speed);

  /* Exit transition */
  --exit-transition-speed-short: var(--s-transition-speed);
  --exit-transition-speed-medium: var(--m-transition-speed);
  --exit-transition-speed-long: var(--l-transition-speed);
}

/*# sourceMappingURL=../../pkg/css/tokens-4291006171.css.map */