/**
 * This file is generated by Style Dictionary. Do not edit directly.
 */

.hop-5-3-9-sharegate {
  --hop-comp-tooltip-box-shadow: 0 4px 10px 4px rgba(0, 0, 0, 0.08), 0 8px 24px 0 rgba(0, 0, 0, 0.12);
  --hop-comp-tooltip-backdrop-filter: blur(10px);
  --hop-comp-tile-icon-color: transparent;
  --hop-comp-tile-outline-color-disabled: transparent;
  --hop-comp-tile-outline-color-selected: transparent;
  --hop-comp-tile-outline-color: transparent;
  --hop-comp-tile-border-color-disabled: transparent;
  --hop-comp-tile-border-color-selected: transparent;
  --hop-comp-tile-border-color-focus: transparent;
  --hop-comp-tile-border-color-press: transparent;
  --hop-comp-tile-border-color-hover: transparent;
  --hop-comp-tile-box-shadow: 0 -1px 3px 0 rgb(0 0 0 / 0.12) inset, 0 1px 0 1px rgb(255 255 255 / 0.1);
  --hop-comp-tag-text-font-letterspacing-lg: normal;
  --hop-comp-tag-text-font-letterspacing-md: normal;
  --hop-comp-tag-text-font-letterspacing-sm: normal;
  --hop-comp-tag-text-transform: none;
  --hop-comp-tag-border-color-selected: transparent;
  --hop-comp-tag-border-color-press: transparent;
  --hop-comp-tag-border-color-hover: transparent;
  --hop-comp-tabs-tab-list-border-radius: NaNrem;
  --hop-comp-tabs-tab-list-border: none;
  --hop-comp-tabs-tab-list-background-color: transparent;
  --hop-comp-popover-box-shadow: 0 4px 10px 4px rgba(0, 0, 0, 0.08), 0 8px 24px 0 rgba(0, 0, 0, 0.12);
  --hop-comp-popover-backdrop-filter: blur(10px);
  --hop-comp-modal-box-shadow: 0 4px 10px 4px rgba(0, 0, 0, 0.08), 0 8px 24px 0 rgba(0, 0, 0, 0.12);
  --hop-comp-modal-backdrop-filter: blur(10px);
  --hop-comp-radio-box-shadow: 1.5px 1.5px 1.5px 0 rgba(0, 0, 0, 0.03), 0.5px 1.5px 5px 0 rgba(0, 0, 0, 0.10) inset, -1px 1px 2px 0 rgba(255, 255, 255, 0.50) inset;
  --hop-comp-checkbox-box-shadow: 1.5px 1.5px 1.5px 0 rgba(0, 0, 0, 0.03), 0.5px 1.5px 5px 0 rgba(0, 0, 0, 0.10) inset, -1px 1px 2px 0 rgba(255, 255, 255, 0.50) inset;
  --hop-comp-switch-thumb-box-shadow-selected: none;
  --hop-comp-switch-thumb-box-shadow: 1px 1px 4px 0 rgba(255, 255, 255, 0.10), 2.5px 2.5px 5px 0 rgba(0, 0, 0, 0.05);
  --hop-comp-switch-track-box-shadow: 0.5px 1.5px 5px 0 rgba(0, 0, 0, 0.10) inset, -1px 1px 2px 0 rgba(255, 255, 255, 0.50) inset;
  --hop-comp-switch-track-filter: drop-shadow(1.5px 1.5px 1.5px rgba(0, 0, 0, 0.03));
  --hop-comp-segmented-control-item-box-shadow-disabled: none;
  --hop-comp-segmented-control-item-box-shadow-selected: 1px 1px 4px 0 rgba(255, 255, 255, 0.10), 2.5px 2.5px 5px 0 rgba(0, 0, 0, 0.05);
  --hop-comp-segmented-control-box-shadow: 1.5px 1.5px 1.5px 0 rgba(0, 0, 0, 0.03), 0.5px 1.5px 5px 0 rgba(0, 0, 0, 0.10) inset, -1px 1px 2px 0 rgba(255, 255, 255, 0.50) inset;
  --hop-comp-card-second-level-elevated-box-shadow: 0 1px 0 1px rgba(255, 255, 255, 0.10), 0 -1px 3px 0 rgba(0, 0, 0, 0.12) inset;
  --hop-comp-card-main-elevated-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.10), 0 1px 0 0 rgba(255, 255, 255, 0.40) inset, 0 -1px 0 0 rgba(0, 0, 0, 0.05) inset;
  --hop-comp-calendar-grid-border-color: transparent;
  --hop-comp-button-ghost-danger-border-color-disabled: transparent;
  --hop-comp-button-ghost-danger-border-color-selected: transparent;
  --hop-comp-button-ghost-danger-border-color: transparent;
  --hop-comp-button-ghost-danger-background-disabled: transparent;
  --hop-comp-button-ghost-danger-box-shadow-loading: none;
  --hop-comp-button-ghost-danger-border-color-loading: transparent;
  --hop-comp-button-ghost-danger-background-loading: transparent;
  --hop-comp-button-ghost-danger-background: transparent;
  --hop-comp-button-ghost-danger-box-shadow: none;
  --hop-comp-button-ghost-secondary-border-color-disabled: transparent;
  --hop-comp-button-ghost-secondary-border-color-selected: transparent;
  --hop-comp-button-ghost-secondary-border-color: transparent;
  --hop-comp-button-ghost-secondary-background-disabled: transparent;
  --hop-comp-button-ghost-secondary-box-shadow-loading: none;
  --hop-comp-button-ghost-secondary-border-color-loading: transparent;
  --hop-comp-button-ghost-secondary-background-loading: transparent;
  --hop-comp-button-ghost-secondary-background: transparent;
  --hop-comp-button-ghost-secondary-box-shadow: none;
  --hop-comp-button-ghost-primary-border-color-disabled: transparent;
  --hop-comp-button-ghost-primary-border-color-selected: transparent;
  --hop-comp-button-ghost-primary-border-color: transparent;
  --hop-comp-button-ghost-primary-background-disabled: transparent;
  --hop-comp-button-ghost-primary-box-shadow-loading: none;
  --hop-comp-button-ghost-primary-border-color-loading: transparent;
  --hop-comp-button-ghost-primary-background-loading: transparent;
  --hop-comp-button-ghost-primary-background: transparent;
  --hop-comp-button-ghost-primary-box-shadow: none;
  --hop-comp-button-danger-box-shadow-loading: 0 2px 1px 0 rgba(255, 255, 255, 0.25) inset, 0 -2px 4px 0 rgba(0, 0, 0, 0.10) inset;
  --hop-comp-button-danger-box-shadow: 0 2px 1px 0 rgba(255, 255, 255, 0.25) inset, 0 -2px 4px 0 rgba(0, 0, 0, 0.10) inset;
  --hop-comp-button-upsell-border-color-disabled: transparent;
  --hop-comp-button-upsell-box-shadow-loading: 0 2px 1px 0 rgba(255, 255, 255, 0.25) inset, 0 -2px 4px 0 rgba(0, 0, 0, 0.10) inset;
  --hop-comp-button-upsell-box-shadow: none;
  --hop-comp-button-secondary-border-color-disabled: transparent;
  --hop-comp-button-secondary-box-shadow-loading: 0 2px 1px 0 rgba(255, 255, 255, 0.25) inset, 0 -2px 4px 0 rgba(0, 0, 0, 0.10) inset;
  --hop-comp-button-secondary-box-shadow: 0 2px 1px 0 rgba(255, 255, 255, 0.25) inset, 0 -2px 4px 0 rgba(0, 0, 0, 0.10) inset;
  --hop-comp-button-primary-border-color-disabled: transparent;
  --hop-comp-button-primary-box-shadow-loading: 0 2px 1px 0 rgba(255, 255, 255, 0.25) inset, 0 -2px 4px 0 rgba(0, 0, 0, 0.10) inset;
  --hop-comp-button-primary-box-shadow: 0 2px 1px 0 rgba(255, 255, 255, 0.25) inset, 0 -2px 4px 0 rgba(0, 0, 0, 0.10) inset;
  --hop-comp-button-text-font-letterspacing-xs: normal;
  --hop-comp-button-text-font-letterspacing-sm: normal;
  --hop-comp-button-text-font-letterspacing-md: normal;
  --hop-comp-button-text-transform: none;
  --hop-overline-bottom-offset: -0.25rem;
  --hop-overline-top-offset: -0.25rem;
  --hop-heading-xs-medium-bottom-offset: -0.25rem;
  --hop-heading-xs-medium-top-offset: -0.4166rem;
  --hop-heading-xs-bottom-offset: -0.25rem;
  --hop-heading-xs-top-offset: -0.4166rem;
  --hop-heading-sm-bottom-offset: -0.1875rem;
  --hop-heading-sm-top-offset: -0.375rem;
  --hop-heading-md-bottom-offset: -0.125rem;
  --hop-heading-md-top-offset: -0.3333rem;
  --hop-heading-lg-bottom-offset: -0.3125rem;
  --hop-heading-lg-top-offset: -0.5625rem;
  --hop-heading-xl-bottom-offset: -0.1875rem;
  --hop-heading-xl-top-offset: -0.5rem;
  --hop-heading-2xl-bottom-offset: -0.3334rem;
  --hop-heading-2xl-top-offset: -0.6667rem;
  --hop-heading-3xl-bottom-offset: -0.5625rem;
  --hop-heading-3xl-top-offset: -0.9375rem;
  --hop-dataviz-categorical-6colorgroup-option4-category6: #fbe997;
  --hop-dataviz-categorical-6colorgroup-option4-category5: #bfdca9;
  --hop-dataviz-categorical-6colorgroup-option4-category4: #c7ebff;
  --hop-dataviz-categorical-6colorgroup-option4-category3: #ffbf92;
  --hop-dataviz-categorical-6colorgroup-option4-category2: #a0b8fa;
  --hop-dataviz-categorical-6colorgroup-option4-category1: #fbbdcf;
  --hop-dataviz-categorical-6colorgroup-option3-category6: #fbbdcf;
  --hop-dataviz-categorical-6colorgroup-option3-category5: #2e70a8;
  --hop-dataviz-categorical-6colorgroup-option3-category4: #a7e6dc;
  --hop-dataviz-categorical-6colorgroup-option3-category3: #e8ddd0;
  --hop-dataviz-categorical-6colorgroup-option3-category2: #aecdd5;
  --hop-dataviz-categorical-6colorgroup-option3-category1: #b6bead;
  --hop-dataviz-categorical-6colorgroup-option2-category6: #d2cdf8;
  --hop-dataviz-categorical-6colorgroup-option2-category5: #a7e6dc;
  --hop-dataviz-categorical-6colorgroup-option2-category4: #ff9b3f;
  --hop-dataviz-categorical-6colorgroup-option2-category3: #69bfa0;
  --hop-dataviz-categorical-6colorgroup-option2-category2: #fbe997;
  --hop-dataviz-categorical-6colorgroup-option2-category1: #2e70a8;
  --hop-dataviz-categorical-6colorgroup-option1-category6: #69bfa0;
  --hop-dataviz-categorical-6colorgroup-option1-category5: #ecd599;
  --hop-dataviz-categorical-6colorgroup-option1-category4: #fa4d59;
  --hop-dataviz-categorical-6colorgroup-option1-category3: #bfdca9;
  --hop-dataviz-categorical-6colorgroup-option1-category2: #a0b8fa;
  --hop-dataviz-categorical-6colorgroup-option1-category1: #b6bead;
  --hop-dataviz-categorical-5colorgroup-option4-category5: #b6bead;
  --hop-dataviz-categorical-5colorgroup-option4-category4: #d2cdf8;
  --hop-dataviz-categorical-5colorgroup-option4-category3: #fa4d59;
  --hop-dataviz-categorical-5colorgroup-option4-category2: #c7ebff;
  --hop-dataviz-categorical-5colorgroup-option4-category1: #69bfa0;
  --hop-dataviz-categorical-5colorgroup-option3-category5: #ffbf92;
  --hop-dataviz-categorical-5colorgroup-option3-category4: #b6bead;
  --hop-dataviz-categorical-5colorgroup-option3-category3: #aecdd5;
  --hop-dataviz-categorical-5colorgroup-option3-category2: #ecd599;
  --hop-dataviz-categorical-5colorgroup-option3-category1: #d2cdf8;
  --hop-dataviz-categorical-5colorgroup-option2-category5: #c5bef6;
  --hop-dataviz-categorical-5colorgroup-option2-category4: #fbe997;
  --hop-dataviz-categorical-5colorgroup-option2-category3: #2e70a8;
  --hop-dataviz-categorical-5colorgroup-option2-category2: #b6bead;
  --hop-dataviz-categorical-5colorgroup-option2-category1: #ff9b3f;
  --hop-dataviz-categorical-5colorgroup-option1-category5: #69bfa0;
  --hop-dataviz-categorical-5colorgroup-option1-category4: #ecd599;
  --hop-dataviz-categorical-5colorgroup-option1-category3: #bfdca9;
  --hop-dataviz-categorical-5colorgroup-option1-category2: #ff9b3f;
  --hop-dataviz-categorical-5colorgroup-option1-category1: #b6bead;
  --hop-dataviz-categorical-4colorgroup-option4-category4: #d2cdf8;
  --hop-dataviz-categorical-4colorgroup-option4-category3: #fa4d59;
  --hop-dataviz-categorical-4colorgroup-option4-category2: #c7ebff;
  --hop-dataviz-categorical-4colorgroup-option4-category1: #69bfa0;
  --hop-dataviz-categorical-4colorgroup-option3-category4: #ecd599;
  --hop-dataviz-categorical-4colorgroup-option3-category3: #2e70a8;
  --hop-dataviz-categorical-4colorgroup-option3-category2: #b6bead;
  --hop-dataviz-categorical-4colorgroup-option3-category1: #ffbf92;
  --hop-dataviz-categorical-4colorgroup-option2-category4: #fbe997;
  --hop-dataviz-categorical-4colorgroup-option2-category3: #84d0b4;
  --hop-dataviz-categorical-4colorgroup-option2-category2: #c7ebff;
  --hop-dataviz-categorical-4colorgroup-option2-category1: #b6bead;
  --hop-dataviz-categorical-4colorgroup-option1-category4: #fbbdcf;
  --hop-dataviz-categorical-4colorgroup-option1-category3: #cde8ac;
  --hop-dataviz-categorical-4colorgroup-option1-category2: #d2cdf8;
  --hop-dataviz-categorical-4colorgroup-option1-category1: #b6bead;
  --hop-dataviz-categorical-3colorgroup-option4-category3: #fbbdcf;
  --hop-dataviz-categorical-3colorgroup-option4-category2: #a0b8fa;
  --hop-dataviz-categorical-3colorgroup-option4-category1: #b6bead;
  --hop-dataviz-categorical-3colorgroup-option3-category3: #aecdd5;
  --hop-dataviz-categorical-3colorgroup-option3-category2: #fbe997;
  --hop-dataviz-categorical-3colorgroup-option3-category1: #69bfa0;
  --hop-dataviz-categorical-3colorgroup-option2-category3: #69bfa0;
  --hop-dataviz-categorical-3colorgroup-option2-category2: #a7e6dc;
  --hop-dataviz-categorical-3colorgroup-option2-category1: #ecd599;
  --hop-dataviz-categorical-3colorgroup-option1-category3: #bfdca9;
  --hop-dataviz-categorical-3colorgroup-option1-category2: #d2cdf8;
  --hop-dataviz-categorical-3colorgroup-option1-category1: #b6bead;
  --hop-dataviz-categorical-2colorgroup-option1-category1: #b6bead;
  --hop-dataviz-categorical-2colorgroup-option1-category2: #c7ebff;
  --hop-dataviz-categorical-2colorgroup-option2-category1: #fbbdcf;
  --hop-dataviz-categorical-2colorgroup-option2-category2: #fbe997;
  --hop-dataviz-categorical-2colorgroup-option3-category1: #2f48ff;
  --hop-dataviz-categorical-2colorgroup-option3-category2: #ff9b3f;
  --hop-dataviz-categorical-2colorgroup-option4-category1: #bfdca9;
  --hop-dataviz-categorical-2colorgroup-option4-category2: #6c8ffd;
  --hop-dataviz-categorical-2colorgroup-option5-category1: #a7e6dc;
  --hop-dataviz-categorical-2colorgroup-option5-category2: #a0b8fa;
  --hop-dataviz-categorical-2colorgroup-option6-category1: #ffbf92;
  --hop-dataviz-categorical-2colorgroup-option6-category2: #69bfa0;
  --hop-dataviz-categorical-sequence-category13-hover: #54b692;
  --hop-dataviz-categorical-sequence-category13: #69bfa0;
  --hop-dataviz-categorical-sequence-category12-hover: #779af8;
  --hop-dataviz-categorical-sequence-category12: #a0b8fa;
  --hop-dataviz-categorical-sequence-category11-hover: #ffac70;
  --hop-dataviz-categorical-sequence-category11: #ffbf92;
  --hop-dataviz-categorical-sequence-category10-hover: #93bdc8;
  --hop-dataviz-categorical-sequence-category10: #aecdd5;
  --hop-dataviz-categorical-sequence-category9-hover: #90e0d2;
  --hop-dataviz-categorical-sequence-category9: #a7e6dc;
  --hop-dataviz-categorical-sequence-category8-hover: #ddcebb;
  --hop-dataviz-categorical-sequence-category8: #e8ddd0;
  --hop-dataviz-categorical-sequence-category7-hover: #fae275;
  --hop-dataviz-categorical-sequence-category7: #fbe997;
  --hop-dataviz-categorical-sequence-category6-hover: #a9d08b;
  --hop-dataviz-categorical-sequence-category6: #bfdca9;
  --hop-dataviz-categorical-sequence-category5-hover: #f99fb8;
  --hop-dataviz-categorical-sequence-category5: #fbbdcf;
  --hop-dataviz-categorical-sequence-category4-hover: #a4ae98;
  --hop-dataviz-categorical-sequence-category4: #b6bead;
  --hop-dataviz-categorical-sequence-category3-hover: #bfb8f5;
  --hop-dataviz-categorical-sequence-category3: #d2cdf8;
  --hop-dataviz-categorical-sequence-category2-hover: #e6c675;
  --hop-dataviz-categorical-sequence-category2: #ecd599;
  --hop-dataviz-categorical-sequence-category1-hover: #ade2ff;
  --hop-dataviz-categorical-sequence-category1: #c7ebff;
  --hop-dataviz-diverging-sequence-2-negative10-hover: #431a17;
  --hop-dataviz-diverging-sequence-2-negative10: #6c2320;
  --hop-dataviz-diverging-sequence-2-negative9-hover: #6c2320;
  --hop-dataviz-diverging-sequence-2-negative9: #952927;
  --hop-dataviz-diverging-sequence-2-negative8-hover: #952927;
  --hop-dataviz-diverging-sequence-2-negative8: #ba2d2d;
  --hop-dataviz-diverging-sequence-2-negative7-hover: #ba2d2d;
  --hop-dataviz-diverging-sequence-2-negative7: #cb2e31;
  --hop-dataviz-diverging-sequence-2-negative6-hover: #cb2e31;
  --hop-dataviz-diverging-sequence-2-negative6: #df3236;
  --hop-dataviz-diverging-sequence-2-negative5-hover: #df3236;
  --hop-dataviz-diverging-sequence-2-negative5: #f56263;
  --hop-dataviz-diverging-sequence-2-negative4-hover: #f56263;
  --hop-dataviz-diverging-sequence-2-negative4: #ff8e8e;
  --hop-dataviz-diverging-sequence-2-negative3-hover: #ff8e8e;
  --hop-dataviz-diverging-sequence-2-negative3: #ffbcb7;
  --hop-dataviz-diverging-sequence-2-negative2-hover: #ffbcb7;
  --hop-dataviz-diverging-sequence-2-negative2: #ffd6d3;
  --hop-dataviz-diverging-sequence-2-negative1-hover: #ffd6d3;
  --hop-dataviz-diverging-sequence-2-negative1: #fde6e5;
  --hop-dataviz-diverging-sequence-2-positive1-hover: #cde8ac;
  --hop-dataviz-diverging-sequence-2-positive1: #e3f3b9;
  --hop-dataviz-diverging-sequence-2-positive2-hover: #aad89d;
  --hop-dataviz-diverging-sequence-2-positive2: #cde8ac;
  --hop-dataviz-diverging-sequence-2-positive3-hover: #7dc291;
  --hop-dataviz-diverging-sequence-2-positive3: #aad89d;
  --hop-dataviz-diverging-sequence-2-positive4-hover: #47a584;
  --hop-dataviz-diverging-sequence-2-positive4: #7dc291;
  --hop-dataviz-diverging-sequence-2-positive5-hover: #188a71;
  --hop-dataviz-diverging-sequence-2-positive5: #47a584;
  --hop-dataviz-diverging-sequence-2-positive6-hover: #0c796b;
  --hop-dataviz-diverging-sequence-2-positive6: #188a71;
  --hop-dataviz-diverging-sequence-2-positive7-hover: #0a6f64;
  --hop-dataviz-diverging-sequence-2-positive7: #0c796b;
  --hop-dataviz-diverging-sequence-2-positive8-hover: #115a52;
  --hop-dataviz-diverging-sequence-2-positive8: #0a6f64;
  --hop-dataviz-diverging-sequence-2-positive9-hover: #16433d;
  --hop-dataviz-diverging-sequence-2-positive9: #115a52;
  --hop-dataviz-diverging-sequence-2-positive10-hover: #132a27;
  --hop-dataviz-diverging-sequence-2-positive10: #16433d;
  --hop-dataviz-diverging-sequence-1-negative9-hover: #431a17;
  --hop-dataviz-diverging-sequence-1-negative9: #6c2320;
  --hop-dataviz-diverging-sequence-1-negative8-hover: #6c2320;
  --hop-dataviz-diverging-sequence-1-negative8: #952927;
  --hop-dataviz-diverging-sequence-1-negative7-hover: #952927;
  --hop-dataviz-diverging-sequence-1-negative7: #ba2d2d;
  --hop-dataviz-diverging-sequence-1-negative6-hover: #ba2d2d;
  --hop-dataviz-diverging-sequence-1-negative6: #cb2e31;
  --hop-dataviz-diverging-sequence-1-negative5-hover: #cb2e31;
  --hop-dataviz-diverging-sequence-1-negative5: #df3236;
  --hop-dataviz-diverging-sequence-1-negative4-hover: #df3236;
  --hop-dataviz-diverging-sequence-1-negative4: #f56263;
  --hop-dataviz-diverging-sequence-1-negative3-hover: #f56263;
  --hop-dataviz-diverging-sequence-1-negative3: #ff8e8e;
  --hop-dataviz-diverging-sequence-1-negative2-hover: #ff8e8e;
  --hop-dataviz-diverging-sequence-1-negative2: #ffbcb7;
  --hop-dataviz-diverging-sequence-1-negative1-hover: #ffbcb7;
  --hop-dataviz-diverging-sequence-1-negative1: #ffd8be;
  --hop-dataviz-diverging-sequence-1-neutral-hover: #eac96d;
  --hop-dataviz-diverging-sequence-1-neutral: #f7e694;
  --hop-dataviz-diverging-sequence-1-positive1-hover: #aad89d;
  --hop-dataviz-diverging-sequence-1-positive1: #cde8ac;
  --hop-dataviz-diverging-sequence-1-positive2-hover: #7dc291;
  --hop-dataviz-diverging-sequence-1-positive2: #aad89d;
  --hop-dataviz-diverging-sequence-1-positive3-hover: #47a584;
  --hop-dataviz-diverging-sequence-1-positive3: #7dc291;
  --hop-dataviz-diverging-sequence-1-positive-4-hover: #188a71;
  --hop-dataviz-diverging-sequence-1-positive4: #47a584;
  --hop-dataviz-diverging-sequence-1-positive5-hover: #0c796b;
  --hop-dataviz-diverging-sequence-1-positive5: #188a71;
  --hop-dataviz-diverging-sequence-1-positive6-hover: #0a6f64;
  --hop-dataviz-diverging-sequence-1-positive6: #0c796b;
  --hop-dataviz-diverging-sequence-1-positive7-hover: #115a52;
  --hop-dataviz-diverging-sequence-1-positive7: #0a6f64;
  --hop-dataviz-diverging-sequence-1-positive8-hover: #16433d;
  --hop-dataviz-diverging-sequence-1-positive8: #115a52;
  --hop-dataviz-diverging-sequence-1-positive9-hover: #132a27;
  --hop-dataviz-diverging-sequence-1-positive9: #16433d;
  --hop-dataviz-monochromatic-negative-900-hover: #2d100d;
  --hop-dataviz-monochromatic-negative-800-hover: #431a17;
  --hop-dataviz-monochromatic-negative-700-hover: #6c2320;
  --hop-dataviz-monochromatic-negative-600-hover: #952927;
  --hop-dataviz-monochromatic-negative-500-hover: #ba2d2d;
  --hop-dataviz-monochromatic-negative-400-hover: #cb2e31;
  --hop-dataviz-monochromatic-negative-300-hover: #df3236;
  --hop-dataviz-monochromatic-negative-200-hover: #f56263;
  --hop-dataviz-monochromatic-negative-100-hover: #ff8e8e;
  --hop-dataviz-monochromatic-negative-75-hover: #ffbcb7;
  --hop-dataviz-monochromatic-negative-50-hover: #ffd6d3;
  --hop-dataviz-monochromatic-negative-25-hover: #fde6e5;
  --hop-dataviz-monochromatic-negative-900: #431a17;
  --hop-dataviz-monochromatic-negative-800: #6c2320;
  --hop-dataviz-monochromatic-negative-700: #952927;
  --hop-dataviz-monochromatic-negative-600: #ba2d2d;
  --hop-dataviz-monochromatic-negative-500: #cb2e31;
  --hop-dataviz-monochromatic-negative-400: #df3236;
  --hop-dataviz-monochromatic-negative-300: #f56263;
  --hop-dataviz-monochromatic-negative-200: #ff8e8e;
  --hop-dataviz-monochromatic-negative-100: #ffbcb7;
  --hop-dataviz-monochromatic-negative-75: #ffd6d3;
  --hop-dataviz-monochromatic-negative-50: #fde6e5;
  --hop-dataviz-monochromatic-negative-25: #fdf6f6;
  --hop-dataviz-monochromatic-positive-900-hover: #0a1716;
  --hop-dataviz-monochromatic-positive-800-hover: #132a27;
  --hop-dataviz-monochromatic-positive-700-hover: #16433d;
  --hop-dataviz-monochromatic-positive-600-hover: #115a52;
  --hop-dataviz-monochromatic-positive-500-hover: #0a6f64;
  --hop-dataviz-monochromatic-positive-400-hover: #0c796b;
  --hop-dataviz-monochromatic-positive-300-hover: #188a71;
  --hop-dataviz-monochromatic-positive-200-hover: #47a584;
  --hop-dataviz-monochromatic-positive-100-hover: #7dc291;
  --hop-dataviz-monochromatic-positive-75-hover: #aad89d;
  --hop-dataviz-monochromatic-positive-50-hover: #cde8ac;
  --hop-dataviz-monochromatic-positive-25-hover: #e3f3b9;
  --hop-dataviz-monochromatic-positive-900: #132a27;
  --hop-dataviz-monochromatic-positive-800: #16433d;
  --hop-dataviz-monochromatic-positive-700: #115a52;
  --hop-dataviz-monochromatic-positive-600: #0a6f64;
  --hop-dataviz-monochromatic-positive-500: #0c796b;
  --hop-dataviz-monochromatic-positive-400: #188a71;
  --hop-dataviz-monochromatic-positive-300: #47a584;
  --hop-dataviz-monochromatic-positive-200: #7dc291;
  --hop-dataviz-monochromatic-positive-100: #aad89d;
  --hop-dataviz-monochromatic-positive-75: #cde8ac;
  --hop-dataviz-monochromatic-positive-50: #e3f3b9;
  --hop-dataviz-monochromatic-positive-25: #f4f9e9;
  --hop-dataviz-monochromatic-primary-900-hover: #0b173a;
  --hop-dataviz-monochromatic-primary-800-hover: #152450;
  --hop-dataviz-monochromatic-primary-700-hover: #1b3587;
  --hop-dataviz-monochromatic-primary-600-hover: #2040c7;
  --hop-dataviz-monochromatic-primary-500-hover: #2a43e8;
  --hop-dataviz-monochromatic-primary-400-hover: #3b57ff;
  --hop-dataviz-monochromatic-primary-300-hover: #4767fe;
  --hop-dataviz-monochromatic-primary-200-hover: #6c8ffd;
  --hop-dataviz-monochromatic-primary-100-hover: #95b1ff;
  --hop-dataviz-monochromatic-primary-75-hover: #b9cbff;
  --hop-dataviz-monochromatic-primary-50-hover: #d6e0ff;
  --hop-dataviz-monochromatic-primary-25-hover: #e6ebff;
  --hop-dataviz-monochromatic-primary-900: #152450;
  --hop-dataviz-monochromatic-primary-800: #1b3587;
  --hop-dataviz-monochromatic-primary-700: #2040c7;
  --hop-dataviz-monochromatic-primary-600: #2a43e8;
  --hop-dataviz-monochromatic-primary-500: #3b57ff;
  --hop-dataviz-monochromatic-primary-400: #4767fe;
  --hop-dataviz-monochromatic-primary-300: #6c8ffd;
  --hop-dataviz-monochromatic-primary-200: #95b1ff;
  --hop-dataviz-monochromatic-primary-100: #b9cbff;
  --hop-dataviz-monochromatic-primary-75: #d6e0ff;
  --hop-dataviz-monochromatic-primary-50: #e6ebff;
  --hop-dataviz-monochromatic-primary-25: #f5f6ff;
  --hop-neutral-surface-weak-transparent-always-dark: rgb(49 51 53 / 0.75);
  --hop-neutral-surface-transparent: rgb(255 255 255 / 0.9);
  --hop-space-1280: 8rem;
  --hop-space-960: 6rem;
  --hop-space-800: 5rem;
  --hop-space-640: 4rem;
  --hop-space-480: 3rem;
  --hop-space-400: 2.5rem;
  --hop-space-320: 2rem;
  --hop-space-240: 1.5rem;
  --hop-space-160: 1rem;
  --hop-space-80: 0.5rem;
  --hop-space-40: 0.25rem;
  --hop-space-20: 0.125rem;
  --hop-space-10: 0.0625rem;
  --hop-space-0: 0;
  --hop-border-radius-2-5: 0.75rem;
  --hop-border-radius-9999: 624.9375rem;
  --hop-border-radius-4: 1.5rem;
  --hop-border-radius-3: 1rem;
  --hop-border-radius-2: 0.5rem;
  --hop-border-radius-1: 0.25rem;
  --hop-border-radius-0: 0;
  --hop-easing-expressive: cubic-bezier(0.72, -0.66, 0.15, 1.5);
  --hop-easing-focus: cubic-bezier(0.46, 0.03, 0.52, 0.96);
  --hop-easing-productive: cubic-bezier(0.22, 0.61, 0.36, 1);
  --hop-easing-duration-5: 800ms;
  --hop-easing-duration-4: 500ms;
  --hop-easing-duration-3: 300ms;
  --hop-easing-duration-2: 200ms;
  --hop-easing-duration-1: 100ms;
  --hop-letter-spacing-wide-30: 0.1875rem;
  --hop-letter-spacing-wide-25: 0.15625rem;
  --hop-letter-spacing-wide-20: 0.125rem;
  --hop-letter-spacing-wide-15: 0.09375rem;
  --hop-letter-spacing-wide-10: 0.0625rem;
  --hop-letter-spacing-wide-5: 0.03125rem;
  --hop-letter-spacing-dense-5: -0.03125rem;
  --hop-letter-spacing-dense-10: -0.0625rem;
  --hop-letter-spacing-0: 0;
  --hop-line-height-1-50: 1.5;
  --hop-line-height-1-4285: 1.4285714;
  --hop-line-height-1-40: 1.4;
  --hop-line-height-1-33: 1.3333333;
  --hop-line-height-1-2857: 1.2857142;
  --hop-line-height-1-25: 1.25;
  --hop-line-height-1-20: 1.2;
  --hop-line-height-1-1666: 1.1666666;
  --hop-line-height-1-14: 1.1428571;
  --hop-line-height-1-125: 1.125;
  --hop-font-weight-690: 690;
  --hop-font-weight-680: 680;
  --hop-font-weight-590: 590;
  --hop-font-weight-580: 580;
  --hop-font-weight-505: 505;
  --hop-font-weight-410: 410;
  --hop-font-weight-400: 400;
  --hop-font-size-480: 3rem;
  --hop-font-size-360: 2.25rem;
  --hop-font-size-320: 2rem;
  --hop-font-size-280: 1.75rem;
  --hop-font-size-240: 1.5rem;
  --hop-font-size-200: 1.25rem;
  --hop-font-size-180: 1.125rem;
  --hop-font-size-160: 1rem;
  --hop-font-size-140: 0.875rem;
  --hop-font-size-120: 0.75rem;
  --hop-font-size-100: 0.625rem;
  --hop-font-family-tertiary: 'ABC Favorit Mono', Consolas, 'SF Mono', monospace;
  --hop-font-family-secondary: 'Inter', Helvetica, Arial, sans-serif;
  --hop-font-family-primary: 'ABC Favorit', Helvetica, Arial, sans-serif;
  --hop-shadow-lg: 0 10px 18px 8px rgba(60, 60, 60, 0.08);
  --hop-shadow-md: 0 4px 10px 4px rgba(60, 60, 60, 0.08);
  --hop-shadow-sm: 0 1px 6px 0 rgba(60, 60, 60, 0.10);
  --hop-shadow-none: none;
  --hop-cobalt-900: #001a4d;
  --hop-cobalt-800: #002766;
  --hop-cobalt-700: #003b99;
  --hop-cobalt-600: #004fcc;
  --hop-cobalt-500: #0165fc;
  --hop-cobalt-400: #3a82ff;
  --hop-cobalt-300: #6aa3ff;
  --hop-cobalt-200: #99c2ff;
  --hop-cobalt-100: #c2daff;
  --hop-cobalt-75: #d6e7ff;
  --hop-cobalt-50: #e6f0ff;
  --hop-cobalt-25: #f2f7ff;
  --hop-mint-900: #063527;
  --hop-mint-800: #084a34;
  --hop-mint-700: #0a6042;
  --hop-mint-600: #0b6f4c;
  --hop-mint-500: #0d8058;
  --hop-mint-400: #10a96f;
  --hop-mint-300: #12cb80;
  --hop-mint-200: #0be57d;
  --hop-mint-100: #66ecae;
  --hop-mint-75: #97f2c8;
  --hop-mint-50: #d7faea;
  --hop-mint-25: #eafdf3;
  --hop-amber-900: #3d3200;
  --hop-amber-800: #574500;
  --hop-amber-700: #705900;
  --hop-amber-600: #8a6c00;
  --hop-amber-500: #a68000;
  --hop-amber-400: #cfa000;
  --hop-amber-300: #ffb700;
  --hop-amber-200: #ffc94a;
  --hop-amber-100: #ffd873;
  --hop-amber-75: #ffe39a;
  --hop-amber-50: #fff1cc;
  --hop-amber-25: #fff6e0;
  --hop-rose-900: #341417;
  --hop-rose-800: #50161c;
  --hop-rose-700: #711822;
  --hop-rose-600: #951b2a;
  --hop-rose-500: #ba1f34;
  --hop-rose-400: #de2840;
  --hop-rose-300: #f5425d;
  --hop-rose-200: #f76d83;
  --hop-rose-100: #fa9ba9;
  --hop-rose-75: #fcbcc5;
  --hop-rose-50: #fdd3d8;
  --hop-rose-25: #feeaec;
  --hop-samoyed: #ffffff;
  --hop-rock-900: #232426;
  --hop-rock-800: #313335;
  --hop-rock-700: #484a4d;
  --hop-rock-600: #5e6064;
  --hop-rock-500: #6c6e72;
  --hop-rock-400: #787a7e;
  --hop-rock-300: #96989d;
  --hop-rock-200: #b3b5ba;
  --hop-rock-100: #cbcdd2;
  --hop-rock-75: #e1e3e7;
  --hop-rock-50: #eef0f2;
  --hop-rock-25: #f8f9fa;
  --hop-rock-20: #fafbfc;
  --hop-abyss: #1d1d1c;
  --hop-moss-900: #132a27;
  --hop-moss-800: #16433d;
  --hop-moss-700: #115a52;
  --hop-moss-600: #0a6f64;
  --hop-moss-500: #0c796b;
  --hop-moss-400: #188a71;
  --hop-moss-300: #47a584;
  --hop-moss-200: #7dc291;
  --hop-moss-100: #aad89d;
  --hop-moss-75: #cde8ac;
  --hop-moss-50: #e3f3b9;
  --hop-moss-25: #f4f9e9;
  --hop-amanita-900: #431a17;
  --hop-amanita-800: #6c2320;
  --hop-amanita-700: #952927;
  --hop-amanita-600: #ba2d2d;
  --hop-amanita-500: #cb2e31;
  --hop-amanita-400: #df3236;
  --hop-amanita-300: #fa4d59;
  --hop-amanita-200: #ff8e8e;
  --hop-amanita-100: #ffbcb7;
  --hop-amanita-75: #ffd6d3;
  --hop-amanita-50: #fde6e5;
  --hop-amanita-25: #fdf6f6;
  --hop-limeburst-900: #1f2b00;
  --hop-limeburst-800: #304200;
  --hop-limeburst-700: #415800;
  --hop-limeburst-600: #4f6c00;
  --hop-limeburst-500: #577600;
  --hop-limeburst-400: #5f8100;
  --hop-limeburst-300: #77a300;
  --hop-limeburst-200: #8fc300;
  --hop-limeburst-100: #a3df00;
  --hop-limeburst-75: #b3f400;
  --hop-limeburst-50: #ccff42;
  --hop-limeburst-25: #edffbc;
  --hop-koi-900: #451a02;
  --hop-koi-800: #692803;
  --hop-koi-700: #8c3504;
  --hop-koi-600: #ab4104;
  --hop-koi-500: #ba4705;
  --hop-koi-400: #c95109;
  --hop-koi-300: #e57723;
  --hop-koi-200: #ff9b3f;
  --hop-koi-100: #ffbf92;
  --hop-koi-75: #ffd8be;
  --hop-koi-50: #ffe8d3;
  --hop-koi-25: #fff5e9;
  --hop-sunken-treasure-900: #2f250d;
  --hop-sunken-treasure-800: #4b390f;
  --hop-sunken-treasure-700: #654c0d;
  --hop-sunken-treasure-600: #7e5e0a;
  --hop-sunken-treasure-500: #8b6609;
  --hop-sunken-treasure-400: #996f08;
  --hop-sunken-treasure-300: #c28b12;
  --hop-sunken-treasure-200: #e2a934;
  --hop-sunken-treasure-100: #eac96d;
  --hop-sunken-treasure-75: #f7e694;
  --hop-sunken-treasure-50: #fff2b8;
  --hop-sunken-treasure-25: #fff8d6;
  --hop-toad-900: #2a2620;
  --hop-toad-800: #433b31;
  --hop-toad-700: #594f41;
  --hop-toad-600: #6e6151;
  --hop-toad-500: #776a59;
  --hop-toad-400: #837463;
  --hop-toad-300: #a19382;
  --hop-toad-200: #bdb1a3;
  --hop-toad-100: #d4cbc0;
  --hop-toad-75: #e5ded6;
  --hop-toad-50: #f0eae3;
  --hop-toad-25: #fef6ef;
  --hop-iris-900: #292362;
  --hop-iris-800: #3b356c;
  --hop-iris-700: #4d468f;
  --hop-iris-600: #6057b3;
  --hop-iris-500: #685dc9;
  --hop-iris-400: #736ad2;
  --hop-iris-300: #8e85ec;
  --hop-iris-200: #b4abff;
  --hop-iris-100: #c3bcff;
  --hop-iris-75: #deddff;
  --hop-iris-50: #eceaff;
  --hop-iris-25: #f6f6ff;
  --hop-fog-900: #20282a;
  --hop-fog-800: #313e43;
  --hop-fog-700: #40535a;
  --hop-fog-600: #4e6770;
  --hop-fog-500: #557079;
  --hop-fog-400: #5e7b84;
  --hop-fog-300: #7c9aa3;
  --hop-fog-200: #9cb7be;
  --hop-fog-100: #bad0d5;
  --hop-fog-75: #d2e3e7;
  --hop-fog-50: #e1eef1;
  --hop-fog-25: #f2f8fa;
  --hop-sapphire-900: #152450;
  --hop-sapphire-800: #1b3587;
  --hop-sapphire-700: #2040c7;
  --hop-sapphire-600: #2a43e8;
  --hop-sapphire-500: #3b57ff;
  --hop-sapphire-400: #4767fe;
  --hop-sapphire-300: #6c8ffd;
  --hop-sapphire-200: #95b1ff;
  --hop-sapphire-100: #b9cbff;
  --hop-sapphire-75: #d6e0ff;
  --hop-sapphire-50: #e6ebff;
  --hop-sapphire-25: #f5f6ff;
  --hop-persimmon-900: #4c1300;
  --hop-persimmon-800: #731e00;
  --hop-persimmon-700: #982700;
  --hop-persimmon-600: #ba3000;
  --hop-persimmon-500: #ca3400;
  --hop-persimmon-400: #dd3900;
  --hop-persimmon-300: #ff5b22;
  --hop-persimmon-200: #ff9874;
  --hop-persimmon-100: #ffbda7;
  --hop-persimmon-75: #ffd8ca;
  --hop-persimmon-50: #ffe7df;
  --hop-persimmon-25: #fff5f2;
  --hop-orchid-bloom-900: #1e1c5d;
  --hop-orchid-bloom-800: #322b8d;
  --hop-orchid-bloom-700: #433fac;
  --hop-orchid-bloom-600: #5454be;
  --hop-orchid-bloom-500: #5f61c5;
  --hop-orchid-bloom-400: #6b6ecc;
  --hop-orchid-bloom-300: #8d91dc;
  --hop-orchid-bloom-200: #aeb3e8;
  --hop-orchid-bloom-100: #c8caf0;
  --hop-orchid-bloom-75: #ddddf7;
  --hop-orchid-bloom-50: #eae9fb;
  --hop-orchid-bloom-25: #f6f5ff;
  --hop-quetzal-900: #002d1c;
  --hop-quetzal-800: #00452d;
  --hop-quetzal-700: #055c41;
  --hop-quetzal-600: #206f54;
  --hop-quetzal-500: #2b795e;
  --hop-quetzal-400: #38836a;
  --hop-quetzal-300: #5da18c;
  --hop-quetzal-200: #83beaf;
  --hop-quetzal-100: #a3d6cb;
  --hop-quetzal-75: #bde8e1;
  --hop-quetzal-50: #cff4ef;
  --hop-quetzal-25: #ddfdf9;
  --hop-coastal-900: #00274b;
  --hop-coastal-800: #003d70;
  --hop-coastal-700: #0a538b;
  --hop-coastal-600: #23669f;
  --hop-coastal-500: #2e70a8;
  --hop-coastal-400: #3a7bb2;
  --hop-coastal-300: #5d9acd;
  --hop-coastal-200: #81b9e4;
  --hop-coastal-100: #9fd2f7;
  --hop-coastal-75: #bae6ff;
  --hop-coastal-50: #d9efff;
  --hop-coastal-25: #f0f8ff;
  --hop-comp-tooltip-background: var(--hop-neutral-surface-weak-transparent-always-dark);
  --hop-comp-tag-text-font-lineheight-lg: var(--hop-line-height-1-2857);
  --hop-comp-tag-text-font-lineheight-md: var(--hop-line-height-1-33);
  --hop-comp-tag-text-font-lineheight-sm: var(--hop-line-height-1-33);
  --hop-comp-tag-text-font-weight: var(--hop-font-weight-410);
  --hop-comp-tabs-tab-list-border-block-end: var(--hop-space-10) solid var(--hop-neutral-border-weak);
  --hop-comp-popover-border: var(--hop-space-10) solid var(--hop-neutral-border-weak);
  --hop-comp-popover-background: var(--hop-neutral-surface-transparent);
  --hop-comp-modal-border: var(--hop-space-10) solid var(--hop-neutral-border-weak);
  --hop-comp-modal-background: var(--hop-neutral-surface-transparent);
  --hop-comp-callout-upsell-icon-fill-color: var(--hop-samoyed);
  --hop-comp-callout-warning-icon-fill-color: var(--hop-samoyed);
  --hop-comp-callout-success-icon-fill-color: var(--hop-samoyed);
  --hop-comp-callout-information-icon-fill-color: var(--hop-samoyed);
  --hop-comp-button-danger-background-loading: linear-gradient(var(--hop-rose-300), var(--hop-rose-600) 100%);
  --hop-comp-button-danger-background: linear-gradient(var(--hop-rose-300), var(--hop-rose-600) 100%);
  --hop-comp-button-upsell-background-loading: linear-gradient(var(--hop-limeburst-50), var(--hop-persimmon-300) 151%);
  --hop-comp-button-upsell-background: linear-gradient(var(--hop-limeburst-50), var(--hop-persimmon-300) 151%);
  --hop-comp-button-primary-background-loading: linear-gradient(var(--hop-iris-300), var(--hop-iris-600) 100%);
  --hop-comp-button-primary-background: linear-gradient(var(--hop-iris-300), var(--hop-iris-600) 100%);
  --hop-comp-button-text-font-lineheight-xs: var(--hop-line-height-1-33);
  --hop-comp-button-text-font-lineheight-sm: var(--hop-line-height-1-4285);
  --hop-comp-button-text-font-lineheight-md: var(--hop-line-height-1-50);
  --hop-comp-button-text-font-weight: var(--hop-font-weight-505);
  --hop-shape-rounded-sm: var(--hop-border-radius-1);
  --hop-shape-rounded-md: var(--hop-border-radius-2);
  --hop-shape-rounded-lg: var(--hop-border-radius-3);
  --hop-shape-pill: var(--hop-border-radius-4);
  --hop-shape-circle: var(--hop-border-radius-9999);
  --hop-caption-sm-line-height: var(--hop-line-height-1-40);
  --hop-caption-sm-font-weight: var(--hop-font-weight-410);
  --hop-caption-sm-font-size: var(--hop-font-size-100);
  --hop-caption-sm-font-family: var(--hop-font-family-tertiary);
  --hop-caption-md-line-height: var(--hop-line-height-1-33);
  --hop-caption-md-font-weight: var(--hop-font-weight-410);
  --hop-caption-md-font-size: var(--hop-font-size-120);
  --hop-caption-md-font-family: var(--hop-font-family-tertiary);
  --hop-caption-lg-line-height: var(--hop-line-height-1-4285);
  --hop-caption-lg-font-weight: var(--hop-font-weight-410);
  --hop-caption-lg-font-size: var(--hop-font-size-140);
  --hop-caption-lg-font-family: var(--hop-font-family-tertiary);
  --hop-caption-xl-line-height: var(--hop-line-height-1-50);
  --hop-caption-xl-font-weight: var(--hop-font-weight-410);
  --hop-caption-xl-font-size: var(--hop-font-size-160);
  --hop-caption-xl-font-family: var(--hop-font-family-tertiary);
  --hop-accent-xs-line-height: var(--hop-line-height-1-4285);
  --hop-accent-xs-font-weight: var(--hop-font-weight-580);
  --hop-accent-xs-font-size: var(--hop-font-size-140);
  --hop-accent-xs-font-family: var(--hop-font-family-tertiary);
  --hop-accent-sm-line-height: var(--hop-line-height-1-33);
  --hop-accent-sm-font-weight: var(--hop-font-weight-580);
  --hop-accent-sm-font-size: var(--hop-font-size-180);
  --hop-accent-sm-font-family: var(--hop-font-family-tertiary);
  --hop-accent-md-line-height: var(--hop-line-height-1-14);
  --hop-accent-md-font-weight: var(--hop-font-weight-580);
  --hop-accent-md-font-size: var(--hop-font-size-280);
  --hop-accent-md-font-family: var(--hop-font-family-tertiary);
  --hop-accent-lg-line-height: var(--hop-line-height-1-1666);
  --hop-accent-lg-font-weight: var(--hop-font-weight-580);
  --hop-accent-lg-font-size: var(--hop-font-size-480);
  --hop-accent-lg-font-family: var(--hop-font-family-tertiary);
  --hop-body-xs-underline-line-height: var(--hop-line-height-1-33);
  --hop-body-xs-underline-font-weight: var(--hop-font-weight-505);
  --hop-body-xs-underline-font-size: var(--hop-font-size-120);
  --hop-body-xs-underline-font-family: var(--hop-font-family-secondary);
  --hop-body-xs-bold-line-height: var(--hop-line-height-1-33);
  --hop-body-xs-bold-font-weight: var(--hop-font-weight-690);
  --hop-body-xs-bold-font-size: var(--hop-font-size-120);
  --hop-body-xs-bold-font-family: var(--hop-font-family-secondary);
  --hop-body-xs-semibold-line-height: var(--hop-line-height-1-33);
  --hop-body-xs-semibold-font-weight: var(--hop-font-weight-590);
  --hop-body-xs-semibold-font-size: var(--hop-font-size-120);
  --hop-body-xs-semibold-font-family: var(--hop-font-family-secondary);
  --hop-body-xs-medium-line-height: var(--hop-line-height-1-33);
  --hop-body-xs-medium-font-weight: var(--hop-font-weight-505);
  --hop-body-xs-medium-font-size: var(--hop-font-size-120);
  --hop-body-xs-medium-font-family: var(--hop-font-family-secondary);
  --hop-body-xs-line-height: var(--hop-line-height-1-33);
  --hop-body-xs-font-weight: var(--hop-font-weight-410);
  --hop-body-xs-font-size: var(--hop-font-size-120);
  --hop-body-xs-font-family: var(--hop-font-family-secondary);
  --hop-body-sm-underline-line-height: var(--hop-line-height-1-4285);
  --hop-body-sm-underline-font-weight: var(--hop-font-weight-505);
  --hop-body-sm-underline-font-size: var(--hop-font-size-140);
  --hop-body-sm-underline-font-family: var(--hop-font-family-secondary);
  --hop-body-sm-bold-line-height: var(--hop-line-height-1-4285);
  --hop-body-sm-bold-font-weight: var(--hop-font-weight-690);
  --hop-body-sm-bold-font-size: var(--hop-font-size-140);
  --hop-body-sm-bold-font-family: var(--hop-font-family-secondary);
  --hop-body-sm-semibold-line-height: var(--hop-line-height-1-4285);
  --hop-body-sm-semibold-font-weight: var(--hop-font-weight-590);
  --hop-body-sm-semibold-font-size: var(--hop-font-size-140);
  --hop-body-sm-semibold-font-family: var(--hop-font-family-secondary);
  --hop-body-sm-medium-line-height: var(--hop-line-height-1-4285);
  --hop-body-sm-medium-font-weight: var(--hop-font-weight-505);
  --hop-body-sm-medium-font-size: var(--hop-font-size-140);
  --hop-body-sm-medium-font-family: var(--hop-font-family-secondary);
  --hop-body-sm-line-height: var(--hop-line-height-1-4285);
  --hop-body-sm-font-weight: var(--hop-font-weight-410);
  --hop-body-sm-font-size: var(--hop-font-size-140);
  --hop-body-sm-font-family: var(--hop-font-family-secondary);
  --hop-body-md-underline-line-height: var(--hop-line-height-1-50);
  --hop-body-md-underline-font-weight: var(--hop-font-weight-410);
  --hop-body-md-underline-font-size: var(--hop-font-size-160);
  --hop-body-md-underline-font-family: var(--hop-font-family-secondary);
  --hop-body-md-bold-line-height: var(--hop-line-height-1-50);
  --hop-body-md-bold-font-weight: var(--hop-font-weight-690);
  --hop-body-md-bold-font-size: var(--hop-font-size-160);
  --hop-body-md-bold-font-family: var(--hop-font-family-secondary);
  --hop-body-md-semibold-line-height: var(--hop-line-height-1-50);
  --hop-body-md-semibold-font-weight: var(--hop-font-weight-590);
  --hop-body-md-semibold-font-size: var(--hop-font-size-160);
  --hop-body-md-semibold-font-family: var(--hop-font-family-secondary);
  --hop-body-md-medium-line-height: var(--hop-line-height-1-50);
  --hop-body-md-medium-font-weight: var(--hop-font-weight-505);
  --hop-body-md-medium-font-size: var(--hop-font-size-160);
  --hop-body-md-medium-font-family: var(--hop-font-family-secondary);
  --hop-body-md-line-height: var(--hop-line-height-1-50);
  --hop-body-md-font-weight: var(--hop-font-weight-410);
  --hop-body-md-font-size: var(--hop-font-size-160);
  --hop-body-md-font-family: var(--hop-font-family-secondary);
  --hop-body-lg-underline-line-height: var(--hop-line-height-1-33);
  --hop-body-lg-underline-font-weight: var(--hop-font-weight-505);
  --hop-body-lg-underline-font-size: var(--hop-font-size-180);
  --hop-body-lg-underline-font-family: var(--hop-font-family-secondary);
  --hop-body-lg-bold-line-height: var(--hop-line-height-1-33);
  --hop-body-lg-bold-font-weight: var(--hop-font-weight-690);
  --hop-body-lg-bold-font-size: var(--hop-font-size-180);
  --hop-body-lg-bold-font-family: var(--hop-font-family-secondary);
  --hop-body-lg-semibold-line-height: var(--hop-line-height-1-33);
  --hop-body-lg-semibold-font-weight: var(--hop-font-weight-590);
  --hop-body-lg-semibold-font-size: var(--hop-font-size-180);
  --hop-body-lg-semibold-font-family: var(--hop-font-family-secondary);
  --hop-body-lg-medium-line-height: var(--hop-line-height-1-33);
  --hop-body-lg-medium-font-weight: var(--hop-font-weight-505);
  --hop-body-lg-medium-font-size: var(--hop-font-size-180);
  --hop-body-lg-medium-font-family: var(--hop-font-family-secondary);
  --hop-body-lg-line-height: var(--hop-line-height-1-33);
  --hop-body-lg-font-weight: var(--hop-font-weight-410);
  --hop-body-lg-font-size: var(--hop-font-size-180);
  --hop-body-lg-font-family: var(--hop-font-family-secondary);
  --hop-body-xl-line-height: var(--hop-line-height-1-14);
  --hop-body-xl-font-weight: var(--hop-font-weight-410);
  --hop-body-xl-font-size: var(--hop-font-size-280);
  --hop-body-xl-font-family: var(--hop-font-family-secondary);
  --hop-body-2xl-line-height: var(--hop-line-height-1-125);
  --hop-body-2xl-font-weight: var(--hop-font-weight-410);
  --hop-body-2xl-font-size: var(--hop-font-size-320);
  --hop-body-2xl-font-family: var(--hop-font-family-secondary);
  --hop-overline-line-height: var(--hop-line-height-1-33);
  --hop-overline-font-weight: var(--hop-font-weight-400);
  --hop-overline-font-size: var(--hop-font-size-120);
  --hop-overline-font-family: var(--hop-font-family-tertiary);
  --hop-heading-xs-medium-line-height: var(--hop-line-height-1-50);
  --hop-heading-xs-medium-font-weight: var(--hop-font-weight-580);
  --hop-heading-xs-medium-font-size: var(--hop-font-size-160);
  --hop-heading-xs-medium-font-family: var(--hop-font-family-primary);
  --hop-heading-xs-line-height: var(--hop-line-height-1-50);
  --hop-heading-xs-font-weight: var(--hop-font-weight-410);
  --hop-heading-xs-font-size: var(--hop-font-size-160);
  --hop-heading-xs-font-family: var(--hop-font-family-primary);
  --hop-heading-sm-line-height: var(--hop-line-height-1-33);
  --hop-heading-sm-font-weight: var(--hop-font-weight-580);
  --hop-heading-sm-font-size: var(--hop-font-size-180);
  --hop-heading-sm-font-family: var(--hop-font-family-primary);
  --hop-heading-md-line-height: var(--hop-line-height-1-20);
  --hop-heading-md-font-weight: var(--hop-font-weight-580);
  --hop-heading-md-font-size: var(--hop-font-size-200);
  --hop-heading-md-font-family: var(--hop-font-family-primary);
  --hop-heading-lg-line-height: var(--hop-line-height-1-33);
  --hop-heading-lg-font-weight: var(--hop-font-weight-680);
  --hop-heading-lg-font-size: var(--hop-font-size-240);
  --hop-heading-lg-font-family: var(--hop-font-family-primary);
  --hop-heading-xl-line-height: var(--hop-line-height-1-14);
  --hop-heading-xl-font-weight: var(--hop-font-weight-680);
  --hop-heading-xl-font-size: var(--hop-font-size-280);
  --hop-heading-xl-font-family: var(--hop-font-family-primary);
  --hop-heading-2xl-line-height: var(--hop-line-height-1-25);
  --hop-heading-2xl-font-weight: var(--hop-font-weight-580);
  --hop-heading-2xl-font-size: var(--hop-font-size-320);
  --hop-heading-2xl-font-family: var(--hop-font-family-primary);
  --hop-heading-3xl-line-height: var(--hop-line-height-1-33);
  --hop-heading-3xl-font-weight: var(--hop-font-weight-680);
  --hop-heading-3xl-font-size: var(--hop-font-size-360);
  --hop-heading-3xl-font-family: var(--hop-font-family-primary);
  --hop-elevation-floating: var(--hop-shadow-lg);
  --hop-elevation-lifted: var(--hop-shadow-md);
  --hop-elevation-raised: var(--hop-shadow-sm);
  --hop-elevation-none: var(--hop-shadow-none);
  --hop-dataviz-text-ondark: var(--hop-samoyed);
  --hop-dataviz-text-onlight: var(--hop-rock-800);
  --hop-dataviz-unavailable-strong: var(--hop-rock-100);
  --hop-dataviz-unavailable-weak: var(--hop-rock-50);
  --hop-dataviz-unavailable: var(--hop-rock-75);
  --hop-warning-text-weak: var(--hop-amber-300);
  --hop-warning-text: var(--hop-amber-700);
  --hop-warning-surface-weak: var(--hop-amber-50);
  --hop-warning-surface-strong: var(--hop-amber-100);
  --hop-warning-surface: var(--hop-amber-25);
  --hop-warning-icon-weak: var(--hop-amber-300);
  --hop-warning-icon-weakest: var(--hop-amber-100);
  --hop-warning-icon: var(--hop-amber-700);
  --hop-warning-border: var(--hop-amber-100);
  --hop-success-text-weak: var(--hop-mint-300);
  --hop-success-text-hover: var(--hop-mint-800);
  --hop-success-text: var(--hop-mint-700);
  --hop-success-surface-weak: var(--hop-mint-50);
  --hop-success-surface-strong: var(--hop-mint-100);
  --hop-success-surface: var(--hop-mint-25);
  --hop-success-icon-weak: var(--hop-mint-300);
  --hop-success-icon-weakest: var(--hop-mint-100);
  --hop-success-icon: var(--hop-mint-700);
  --hop-success-border: var(--hop-mint-100);
  --hop-status-progress-text-selected: var(--hop-cobalt-700);
  --hop-status-progress-text-press: var(--hop-cobalt-800);
  --hop-status-progress-text-hover: var(--hop-cobalt-700);
  --hop-status-progress-text-disabled: var(--hop-cobalt-200);
  --hop-status-progress-text: var(--hop-cobalt-600);
  --hop-status-progress-surface-strong: var(--hop-cobalt-200);
  --hop-status-progress-surface-selected: var(--hop-cobalt-50);
  --hop-status-progress-surface-press: var(--hop-cobalt-100);
  --hop-status-progress-surface-hover: var(--hop-cobalt-75);
  --hop-status-progress-surface-disabled: var(--hop-cobalt-25);
  --hop-status-progress-surface: var(--hop-cobalt-50);
  --hop-status-progress-icon-selected: var(--hop-cobalt-700);
  --hop-status-progress-icon-press: var(--hop-cobalt-800);
  --hop-status-progress-icon-hover: var(--hop-cobalt-700);
  --hop-status-progress-icon-disabled: var(--hop-cobalt-200);
  --hop-status-progress-icon: var(--hop-cobalt-600);
  --hop-status-progress-border-selected: var(--hop-cobalt-700);
  --hop-status-progress-border-press: var(--hop-cobalt-500);
  --hop-status-progress-border-hover: var(--hop-cobalt-400);
  --hop-status-progress-border-disabled: var(--hop-cobalt-50);
  --hop-status-progress-border: var(--hop-cobalt-300);
  --hop-status-positive-text-selected: var(--hop-mint-700);
  --hop-status-positive-text-press: var(--hop-mint-800);
  --hop-status-positive-text-hover: var(--hop-mint-700);
  --hop-status-positive-text-disabled: var(--hop-mint-200);
  --hop-status-positive-text: var(--hop-mint-600);
  --hop-status-positive-surface-strong: var(--hop-mint-200);
  --hop-status-positive-surface-selected: var(--hop-mint-50);
  --hop-status-positive-surface-press: var(--hop-mint-100);
  --hop-status-positive-surface-hover: var(--hop-mint-75);
  --hop-status-positive-surface-disabled: var(--hop-mint-25);
  --hop-status-positive-surface: var(--hop-mint-50);
  --hop-status-positive-icon-selected: var(--hop-mint-700);
  --hop-status-positive-icon-press: var(--hop-mint-800);
  --hop-status-positive-icon-hover: var(--hop-mint-700);
  --hop-status-positive-icon-disabled: var(--hop-mint-200);
  --hop-status-positive-icon: var(--hop-mint-600);
  --hop-status-positive-border-selected: var(--hop-mint-700);
  --hop-status-positive-border-press: var(--hop-mint-500);
  --hop-status-positive-border-hover: var(--hop-mint-400);
  --hop-status-positive-border-disabled: var(--hop-mint-50);
  --hop-status-positive-border: var(--hop-mint-300);
  --hop-status-option6-text-selected: var(--hop-limeburst-700);
  --hop-status-option6-text-press: var(--hop-limeburst-800);
  --hop-status-option6-text-hover: var(--hop-limeburst-700);
  --hop-status-option6-text-disabled: var(--hop-limeburst-200);
  --hop-status-option6-text: var(--hop-limeburst-600);
  --hop-status-option6-surface-strong: var(--hop-limeburst-200);
  --hop-status-option6-surface-selected: var(--hop-limeburst-50);
  --hop-status-option6-surface-press: var(--hop-limeburst-100);
  --hop-status-option6-surface-hover: var(--hop-limeburst-75);
  --hop-status-option6-surface-disabled: var(--hop-limeburst-25);
  --hop-status-option6-surface: var(--hop-limeburst-50);
  --hop-status-option6-icon-selected: var(--hop-limeburst-700);
  --hop-status-option6-icon-press: var(--hop-limeburst-800);
  --hop-status-option6-icon-hover: var(--hop-limeburst-700);
  --hop-status-option6-icon-disabled: var(--hop-limeburst-200);
  --hop-status-option6-icon: var(--hop-limeburst-600);
  --hop-status-option6-border-selected: var(--hop-limeburst-700);
  --hop-status-option6-border-press: var(--hop-limeburst-500);
  --hop-status-option6-border-hover: var(--hop-limeburst-400);
  --hop-status-option6-border-disabled: var(--hop-limeburst-50);
  --hop-status-option6-border: var(--hop-limeburst-300);
  --hop-status-option5-text-selected: var(--hop-toad-700);
  --hop-status-option5-text-press: var(--hop-toad-800);
  --hop-status-option5-text-hover: var(--hop-toad-700);
  --hop-status-option5-text-disabled: var(--hop-toad-200);
  --hop-status-option5-text: var(--hop-toad-600);
  --hop-status-option5-surface-strong: var(--hop-toad-200);
  --hop-status-option5-surface-selected: var(--hop-toad-50);
  --hop-status-option5-surface-press: var(--hop-toad-100);
  --hop-status-option5-surface-hover: var(--hop-toad-75);
  --hop-status-option5-surface-disabled: var(--hop-toad-25);
  --hop-status-option5-surface: var(--hop-toad-50);
  --hop-status-option5-icon-selected: var(--hop-toad-700);
  --hop-status-option5-icon-press: var(--hop-toad-800);
  --hop-status-option5-icon-hover: var(--hop-toad-700);
  --hop-status-option5-icon-disabled: var(--hop-toad-200);
  --hop-status-option5-icon: var(--hop-toad-600);
  --hop-status-option5-border-selected: var(--hop-toad-700);
  --hop-status-option5-border-press: var(--hop-toad-500);
  --hop-status-option5-border-hover: var(--hop-toad-400);
  --hop-status-option5-border-disabled: var(--hop-toad-50);
  --hop-status-option5-border: var(--hop-toad-300);
  --hop-status-option4-text-selected: var(--hop-fog-700);
  --hop-status-option4-text-press: var(--hop-fog-800);
  --hop-status-option4-text-hover: var(--hop-fog-700);
  --hop-status-option4-text-disabled: var(--hop-fog-200);
  --hop-status-option4-text: var(--hop-fog-600);
  --hop-status-option4-surface-strong: var(--hop-fog-200);
  --hop-status-option4-surface-selected: var(--hop-fog-50);
  --hop-status-option4-surface-press: var(--hop-fog-100);
  --hop-status-option4-surface-hover: var(--hop-fog-75);
  --hop-status-option4-surface-disabled: var(--hop-fog-25);
  --hop-status-option4-surface: var(--hop-fog-50);
  --hop-status-option4-icon-selected: var(--hop-fog-700);
  --hop-status-option4-icon-press: var(--hop-fog-800);
  --hop-status-option4-icon-hover: var(--hop-fog-700);
  --hop-status-option4-icon-disabled: var(--hop-fog-200);
  --hop-status-option4-icon: var(--hop-fog-600);
  --hop-status-option4-border-selected: var(--hop-fog-700);
  --hop-status-option4-border-press: var(--hop-fog-500);
  --hop-status-option4-border-hover: var(--hop-fog-400);
  --hop-status-option4-border-disabled: var(--hop-fog-50);
  --hop-status-option4-border: var(--hop-fog-300);
  --hop-status-option3-text-selected: var(--hop-moss-700);
  --hop-status-option3-text-press: var(--hop-moss-800);
  --hop-status-option3-text-hover: var(--hop-moss-700);
  --hop-status-option3-text-disabled: var(--hop-moss-200);
  --hop-status-option3-text: var(--hop-moss-600);
  --hop-status-option3-surface-strong: var(--hop-moss-200);
  --hop-status-option3-surface-selected: var(--hop-moss-50);
  --hop-status-option3-surface-press: var(--hop-moss-100);
  --hop-status-option3-surface-hover: var(--hop-moss-75);
  --hop-status-option3-surface-disabled: var(--hop-moss-25);
  --hop-status-option3-surface: var(--hop-moss-50);
  --hop-status-option3-icon-selected: var(--hop-moss-700);
  --hop-status-option3-icon-press: var(--hop-moss-800);
  --hop-status-option3-icon-hover: var(--hop-moss-700);
  --hop-status-option3-icon-disabled: var(--hop-moss-200);
  --hop-status-option3-icon: var(--hop-moss-600);
  --hop-status-option3-border-selected: var(--hop-moss-700);
  --hop-status-option3-border-press: var(--hop-moss-500);
  --hop-status-option3-border-hover: var(--hop-moss-400);
  --hop-status-option3-border-disabled: var(--hop-moss-50);
  --hop-status-option3-border: var(--hop-moss-300);
  --hop-status-option2-text-selected: var(--hop-persimmon-700);
  --hop-status-option2-text-press: var(--hop-persimmon-800);
  --hop-status-option2-text-hover: var(--hop-persimmon-700);
  --hop-status-option2-text-disabled: var(--hop-persimmon-200);
  --hop-status-option2-text: var(--hop-persimmon-600);
  --hop-status-option2-surface-strong: var(--hop-persimmon-200);
  --hop-status-option2-surface-selected: var(--hop-persimmon-50);
  --hop-status-option2-surface-press: var(--hop-persimmon-100);
  --hop-status-option2-surface-hover: var(--hop-persimmon-75);
  --hop-status-option2-surface-disabled: var(--hop-persimmon-25);
  --hop-status-option2-surface: var(--hop-persimmon-50);
  --hop-status-option2-icon-selected: var(--hop-persimmon-700);
  --hop-status-option2-icon-press: var(--hop-persimmon-800);
  --hop-status-option2-icon-hover: var(--hop-persimmon-700);
  --hop-status-option2-icon-disabled: var(--hop-persimmon-200);
  --hop-status-option2-icon: var(--hop-persimmon-600);
  --hop-status-option2-border-selected: var(--hop-persimmon-700);
  --hop-status-option2-border-press: var(--hop-persimmon-500);
  --hop-status-option2-border-hover: var(--hop-persimmon-400);
  --hop-status-option2-border-disabled: var(--hop-persimmon-50);
  --hop-status-option2-border: var(--hop-persimmon-300);
  --hop-status-option1-text-selected: var(--hop-iris-700);
  --hop-status-option1-text-press: var(--hop-iris-800);
  --hop-status-option1-text-hover: var(--hop-iris-700);
  --hop-status-option1-text-disabled: var(--hop-iris-200);
  --hop-status-option1-text: var(--hop-iris-600);
  --hop-status-option1-surface-strong: var(--hop-iris-200);
  --hop-status-option1-surface-selected: var(--hop-iris-50);
  --hop-status-option1-surface-press: var(--hop-iris-100);
  --hop-status-option1-surface-hover: var(--hop-iris-75);
  --hop-status-option1-surface-disabled: var(--hop-iris-25);
  --hop-status-option1-surface: var(--hop-iris-50);
  --hop-status-option1-icon-selected: var(--hop-iris-700);
  --hop-status-option1-icon-press: var(--hop-iris-800);
  --hop-status-option1-icon-hover: var(--hop-iris-700);
  --hop-status-option1-icon-disabled: var(--hop-iris-200);
  --hop-status-option1-icon: var(--hop-iris-600);
  --hop-status-option1-border-selected: var(--hop-iris-700);
  --hop-status-option1-border-press: var(--hop-iris-500);
  --hop-status-option1-border-hover: var(--hop-iris-400);
  --hop-status-option1-border-disabled: var(--hop-iris-50);
  --hop-status-option1-border: var(--hop-iris-300);
  --hop-status-neutral-text-selected: var(--hop-samoyed);
  --hop-status-neutral-text-press: var(--hop-rock-900);
  --hop-status-neutral-text-hover: var(--hop-rock-700);
  --hop-status-neutral-text-disabled: var(--hop-rock-300);
  --hop-status-neutral-text: var(--hop-rock-800);
  --hop-status-neutral-surface-strong: var(--hop-rock-200);
  --hop-status-neutral-surface-selected: var(--hop-rock-800);
  --hop-status-neutral-surface-press: var(--hop-rock-50);
  --hop-status-neutral-surface-hover: var(--hop-rock-25);
  --hop-status-neutral-surface-disabled: var(--hop-rock-50);
  --hop-status-neutral-surface: var(--hop-samoyed);
  --hop-status-neutral-icon-selected: var(--hop-samoyed);
  --hop-status-neutral-icon-press: var(--hop-rock-900);
  --hop-status-neutral-icon-hover: var(--hop-rock-700);
  --hop-status-neutral-icon-disabled: var(--hop-rock-300);
  --hop-status-neutral-icon: var(--hop-rock-800);
  --hop-status-neutral-border-selected: var(--hop-rock-800);
  --hop-status-neutral-border-press: var(--hop-rock-900);
  --hop-status-neutral-border-hover: var(--hop-rock-700);
  --hop-status-neutral-border-disabled: var(--hop-rock-50);
  --hop-status-neutral-border: var(--hop-rock-800);
  --hop-status-negative-text-selected: var(--hop-amanita-700);
  --hop-status-negative-text-press: var(--hop-amanita-800);
  --hop-status-negative-text-hover: var(--hop-amanita-700);
  --hop-status-negative-text-disabled: var(--hop-amanita-200);
  --hop-status-negative-text: var(--hop-amanita-600);
  --hop-status-negative-surface-strong: var(--hop-amanita-200);
  --hop-status-negative-surface-selected: var(--hop-amanita-50);
  --hop-status-negative-surface-press: var(--hop-amanita-100);
  --hop-status-negative-surface-hover: var(--hop-amanita-75);
  --hop-status-negative-surface-disabled: var(--hop-amanita-25);
  --hop-status-negative-surface: var(--hop-amanita-50);
  --hop-status-negative-icon-selected: var(--hop-amanita-700);
  --hop-status-negative-icon-press: var(--hop-amanita-800);
  --hop-status-negative-icon-hover: var(--hop-amanita-700);
  --hop-status-negative-icon-disabled: var(--hop-amanita-200);
  --hop-status-negative-icon: var(--hop-amanita-600);
  --hop-status-negative-border-selected: var(--hop-amanita-700);
  --hop-status-negative-border-press: var(--hop-amanita-500);
  --hop-status-negative-border-hover: var(--hop-amanita-400);
  --hop-status-negative-border-disabled: var(--hop-amanita-50);
  --hop-status-negative-border: var(--hop-amanita-300);
  --hop-status-inactive-text-selected: var(--hop-rock-700);
  --hop-status-inactive-text-press: var(--hop-rock-800);
  --hop-status-inactive-text-hover: var(--hop-rock-700);
  --hop-status-inactive-text-disabled: var(--hop-rock-200);
  --hop-status-inactive-text: var(--hop-rock-600);
  --hop-status-inactive-surface-strong: var(--hop-rock-100);
  --hop-status-inactive-surface-selected: var(--hop-rock-50);
  --hop-status-inactive-surface-press: var(--hop-rock-100);
  --hop-status-inactive-surface-hover: var(--hop-rock-75);
  --hop-status-inactive-surface-disabled: var(--hop-rock-25);
  --hop-status-inactive-surface: var(--hop-rock-50);
  --hop-status-inactive-icon-selected: var(--hop-rock-700);
  --hop-status-inactive-icon-press: var(--hop-rock-800);
  --hop-status-inactive-icon-hover: var(--hop-rock-700);
  --hop-status-inactive-icon-disabled: var(--hop-rock-200);
  --hop-status-inactive-icon: var(--hop-rock-600);
  --hop-status-inactive-border-selected: var(--hop-rock-700);
  --hop-status-inactive-border-press: var(--hop-rock-500);
  --hop-status-inactive-border-hover: var(--hop-rock-400);
  --hop-status-inactive-border-disabled: var(--hop-rock-50);
  --hop-status-inactive-border: var(--hop-rock-300);
  --hop-status-caution-text-selected: var(--hop-amber-700);
  --hop-status-caution-text-press: var(--hop-amber-800);
  --hop-status-caution-text-hover: var(--hop-amber-700);
  --hop-status-caution-text-disabled: var(--hop-amber-200);
  --hop-status-caution-text: var(--hop-amber-600);
  --hop-status-caution-surface-strong: var(--hop-amber-200);
  --hop-status-caution-surface-selected: var(--hop-amber-50);
  --hop-status-caution-surface-press: var(--hop-amber-100);
  --hop-status-caution-surface-hover: var(--hop-amber-75);
  --hop-status-caution-surface-disabled: var(--hop-amber-25);
  --hop-status-caution-surface: var(--hop-amber-50);
  --hop-status-caution-icon-selected: var(--hop-amber-700);
  --hop-status-caution-icon-press: var(--hop-amber-800);
  --hop-status-caution-icon-hover: var(--hop-amber-700);
  --hop-status-caution-icon-disabled: var(--hop-amber-200);
  --hop-status-caution-icon: var(--hop-amber-600);
  --hop-status-caution-border-selected: var(--hop-amber-700);
  --hop-status-caution-border-press: var(--hop-amber-500);
  --hop-status-caution-border-hover: var(--hop-amber-400);
  --hop-status-caution-border-disabled: var(--hop-amber-50);
  --hop-status-caution-border: var(--hop-amber-300);
  --hop-secondary-icon-strong-hover: var(--hop-samoyed);
  --hop-secondary-icon-strong: var(--hop-samoyed);
  --hop-secondary-icon-disabled: var(--hop-persimmon-200);
  --hop-secondary-icon-selected: var(--hop-persimmon-500);
  --hop-secondary-icon-press: var(--hop-persimmon-700);
  --hop-secondary-icon-hover: var(--hop-persimmon-600);
  --hop-secondary-icon: var(--hop-persimmon-500);
  --hop-secondary-border-focus: var(--hop-persimmon-300);
  --hop-secondary-border-selected: var(--hop-persimmon-500);
  --hop-secondary-border-press: var(--hop-persimmon-400);
  --hop-secondary-border: var(--hop-persimmon-300);
  --hop-secondary-surface-strong-selected: var(--hop-persimmon-50);
  --hop-secondary-surface-strong-press: var(--hop-persimmon-600);
  --hop-secondary-surface-strong-hover: var(--hop-persimmon-500);
  --hop-secondary-surface-strong: var(--hop-persimmon-300);
  --hop-secondary-surface-weak-selected: var(--hop-persimmon-100);
  --hop-secondary-surface-weak-press: var(--hop-persimmon-75);
  --hop-secondary-surface-weak-hover: var(--hop-persimmon-50);
  --hop-secondary-surface-weak: var(--hop-persimmon-25);
  --hop-secondary-surface-disabled: var(--hop-persimmon-200);
  --hop-secondary-surface-focus: var(--hop-persimmon-25);
  --hop-secondary-surface-selected: var(--hop-persimmon-50);
  --hop-secondary-surface-press: var(--hop-persimmon-300);
  --hop-secondary-surface-hover: var(--hop-persimmon-200);
  --hop-secondary-surface: var(--hop-persimmon-50);
  --hop-secondary-text-strong-hover: var(--hop-samoyed);
  --hop-secondary-text-strong: var(--hop-samoyed);
  --hop-secondary-text-disabled: var(--hop-persimmon-200);
  --hop-secondary-text-selected: var(--hop-persimmon-500);
  --hop-secondary-text-press: var(--hop-persimmon-700);
  --hop-secondary-text-hover: var(--hop-persimmon-600);
  --hop-secondary-text: var(--hop-persimmon-500);
  --hop-information-text-weak: var(--hop-coastal-300);
  --hop-information-text: var(--hop-coastal-800);
  --hop-information-surface-weak: var(--hop-coastal-50);
  --hop-information-surface-strong: var(--hop-coastal-100);
  --hop-information-surface: var(--hop-coastal-25);
  --hop-information-icon-weak: var(--hop-coastal-300);
  --hop-information-icon-weakest: var(--hop-coastal-75);
  --hop-information-icon: var(--hop-coastal-700);
  --hop-information-border: var(--hop-coastal-100);
  --hop-decorative-option1-text-weak: var(--hop-sapphire-300);
  --hop-decorative-option1-text: var(--hop-sapphire-900);
  --hop-decorative-option1-surface-weakest: var(--hop-sapphire-25);
  --hop-decorative-option1-surface-weak-hover: var(--hop-sapphire-75);
  --hop-decorative-option1-surface-weak: var(--hop-sapphire-50);
  --hop-decorative-option1-surface-strong: var(--hop-sapphire-200);
  --hop-decorative-option1-surface-hover: var(--hop-sapphire-200);
  --hop-decorative-option1-surface: var(--hop-sapphire-100);
  --hop-decorative-option1-icon: var(--hop-sapphire-900);
  --hop-decorative-option1-border: var(--hop-sapphire-100);
  --hop-decorative-option2-text-weak: var(--hop-quetzal-300);
  --hop-decorative-option2-text: var(--hop-quetzal-900);
  --hop-decorative-option2-surface-weakest: var(--hop-quetzal-25);
  --hop-decorative-option2-surface-weak-hover: var(--hop-quetzal-75);
  --hop-decorative-option2-surface-weak: var(--hop-quetzal-50);
  --hop-decorative-option2-surface-strong: var(--hop-quetzal-100);
  --hop-decorative-option2-surface-hover: var(--hop-quetzal-100);
  --hop-decorative-option2-surface: var(--hop-quetzal-75);
  --hop-decorative-option2-icon: var(--hop-quetzal-900);
  --hop-decorative-option2-border: var(--hop-quetzal-100);
  --hop-decorative-option3-text-weak: var(--hop-koi-300);
  --hop-decorative-option3-text: var(--hop-koi-900);
  --hop-decorative-option3-surface-weakest: var(--hop-koi-25);
  --hop-decorative-option3-surface-weak-hover: var(--hop-koi-75);
  --hop-decorative-option3-surface-weak: var(--hop-koi-50);
  --hop-decorative-option3-surface-strong: var(--hop-koi-200);
  --hop-decorative-option3-surface-hover: var(--hop-koi-200);
  --hop-decorative-option3-surface: var(--hop-koi-100);
  --hop-decorative-option3-icon: var(--hop-koi-900);
  --hop-decorative-option3-border: var(--hop-koi-100);
  --hop-decorative-option4-text-weak: var(--hop-moss-400);
  --hop-decorative-option4-text: var(--hop-moss-900);
  --hop-decorative-option4-surface-weakest: var(--hop-moss-25);
  --hop-decorative-option4-surface-weak-hover: var(--hop-moss-75);
  --hop-decorative-option4-surface-weak: var(--hop-moss-50);
  --hop-decorative-option4-surface-strong: var(--hop-moss-100);
  --hop-decorative-option4-surface-hover: var(--hop-moss-100);
  --hop-decorative-option4-surface: var(--hop-moss-75);
  --hop-decorative-option4-icon: var(--hop-moss-900);
  --hop-decorative-option4-border: var(--hop-moss-100);
  --hop-decorative-option6-text-weak: var(--hop-sunken-treasure-200);
  --hop-decorative-option6-text: var(--hop-sunken-treasure-900);
  --hop-decorative-option6-surface-weakest: var(--hop-sunken-treasure-25);
  --hop-decorative-option6-surface-weak-hover: var(--hop-sunken-treasure-75);
  --hop-decorative-option6-surface-weak: var(--hop-sunken-treasure-50);
  --hop-decorative-option6-surface-strong: var(--hop-sunken-treasure-100);
  --hop-decorative-option6-surface-hover: var(--hop-sunken-treasure-100);
  --hop-decorative-option6-surface: var(--hop-sunken-treasure-75);
  --hop-decorative-option6-icon: var(--hop-sunken-treasure-900);
  --hop-decorative-option6-border: var(--hop-sunken-treasure-100);
  --hop-decorative-option5-text-weak: var(--hop-coastal-300);
  --hop-decorative-option5-text: var(--hop-coastal-900);
  --hop-decorative-option5-surface-weakest: var(--hop-coastal-25);
  --hop-decorative-option5-surface-weak-hover: var(--hop-coastal-75);
  --hop-decorative-option5-surface-weak: var(--hop-coastal-50);
  --hop-decorative-option5-surface-strong: var(--hop-coastal-100);
  --hop-decorative-option5-surface-hover: var(--hop-coastal-100);
  --hop-decorative-option5-surface: var(--hop-coastal-75);
  --hop-decorative-option5-icon: var(--hop-coastal-900);
  --hop-decorative-option5-border: var(--hop-coastal-100);
  --hop-decorative-option7-text-weak: var(--hop-toad-500);
  --hop-decorative-option7-text: var(--hop-toad-900);
  --hop-decorative-option7-surface-weakest: var(--hop-toad-25);
  --hop-decorative-option7-surface-weak-hover: var(--hop-toad-75);
  --hop-decorative-option7-surface-weak: var(--hop-toad-50);
  --hop-decorative-option7-surface-strong: var(--hop-toad-100);
  --hop-decorative-option7-surface-hover: var(--hop-toad-100);
  --hop-decorative-option7-surface: var(--hop-toad-75);
  --hop-decorative-option7-icon: var(--hop-toad-900);
  --hop-decorative-option7-border: var(--hop-toad-100);
  --hop-decorative-option8-text-weak: var(--hop-amanita-300);
  --hop-decorative-option8-text: var(--hop-amanita-900);
  --hop-decorative-option8-surface-weakest: var(--hop-amanita-25);
  --hop-decorative-option8-surface-weak-hover: var(--hop-amanita-75);
  --hop-decorative-option8-surface-weak: var(--hop-amanita-50);
  --hop-decorative-option8-surface-strong: var(--hop-amanita-100);
  --hop-decorative-option8-surface-hover: var(--hop-amanita-200);
  --hop-decorative-option8-surface: var(--hop-amanita-75);
  --hop-decorative-option8-icon: var(--hop-amanita-900);
  --hop-decorative-option8-border: var(--hop-amanita-100);
  --hop-decorative-option9-text-weak: var(--hop-rock-300);
  --hop-decorative-option9-text: var(--hop-samoyed);
  --hop-decorative-option9-surface-weakest: var(--hop-rock-200);
  --hop-decorative-option9-surface-weak-hover: var(--hop-rock-400);
  --hop-decorative-option9-surface-weak: var(--hop-rock-300);
  --hop-decorative-option9-surface-strong: var(--hop-rock-800);
  --hop-decorative-option9-surface-hover: var(--hop-rock-500);
  --hop-decorative-option9-surface: var(--hop-rock-400);
  --hop-decorative-option9-icon: var(--hop-samoyed);
  --hop-decorative-option9-border: var(--hop-rock-100);
  --hop-upsell-text-weak-press: var(--hop-limeburst-600);
  --hop-upsell-text-weak-hover: var(--hop-limeburst-500);
  --hop-upsell-text-weak: var(--hop-limeburst-300);
  --hop-upsell-text-press: var(--hop-limeburst-900);
  --hop-upsell-text-hover: var(--hop-limeburst-800);
  --hop-upsell-text-disabled: var(--hop-limeburst-400);
  --hop-upsell-text-selected: var(--hop-limeburst-600);
  --hop-upsell-text: var(--hop-limeburst-700);
  --hop-upsell-surface-weak-press: var(--hop-limeburst-200);
  --hop-upsell-surface-weak-hover: var(--hop-limeburst-100);
  --hop-upsell-surface-weak: var(--hop-limeburst-75);
  --hop-upsell-surface-press: var(--hop-limeburst-75);
  --hop-upsell-surface-hover: var(--hop-limeburst-50);
  --hop-upsell-surface-disabled: var(--hop-limeburst-25);
  --hop-upsell-surface-selected: var(--hop-limeburst-50);
  --hop-upsell-surface: var(--hop-limeburst-25);
  --hop-upsell-icon-weak-press: var(--hop-limeburst-600);
  --hop-upsell-icon-weak-hover: var(--hop-limeburst-500);
  --hop-upsell-icon-weak: var(--hop-limeburst-300);
  --hop-upsell-icon-weakest: var(--hop-limeburst-75);
  --hop-upsell-icon-press: var(--hop-limeburst-900);
  --hop-upsell-icon-hover: var(--hop-limeburst-800);
  --hop-upsell-icon-selected: var(--hop-limeburst-600);
  --hop-upsell-icon: var(--hop-limeburst-700);
  --hop-upsell-border-press: var(--hop-limeburst-300);
  --hop-upsell-border-disabled: var(--hop-limeburst-75);
  --hop-upsell-border-selected: var(--hop-limeburst-400);
  --hop-upsell-border: var(--hop-limeburst-100);
  --hop-upsell-text-weak-active: var(--hop-sunken-treasure-600);
  --hop-upsell-text-active: var(--hop-sunken-treasure-900);
  --hop-upsell-surface-weak-active: var(--hop-sunken-treasure-75);
  --hop-upsell-surface-active: var(--hop-sunken-treasure-200);
  --hop-upsell-icon-weak-active: var(--hop-sunken-treasure-600);
  --hop-upsell-icon-active: var(--hop-sunken-treasure-900);
  --hop-upsell-border-active: var(--hop-sunken-treasure-200);
  --hop-primary-text-strong-hover: var(--hop-samoyed);
  --hop-primary-text-strong: var(--hop-samoyed);
  --hop-primary-text-press: var(--hop-iris-700);
  --hop-primary-text-hover: var(--hop-iris-600);
  --hop-primary-text-disabled: var(--hop-iris-200);
  --hop-primary-text-selected: var(--hop-iris-500);
  --hop-primary-text: var(--hop-iris-500);
  --hop-primary-surface-weak-press: var(--hop-iris-75);
  --hop-primary-surface-weak-hover: var(--hop-iris-50);
  --hop-primary-surface-weak-selected: var(--hop-iris-100);
  --hop-primary-surface-weak: var(--hop-iris-25);
  --hop-primary-surface-strong-press: var(--hop-iris-700);
  --hop-primary-surface-strong-hover: var(--hop-iris-600);
  --hop-primary-surface-strong-selected: var(--hop-iris-800);
  --hop-primary-surface-strong: var(--hop-iris-400);
  --hop-primary-surface-press: var(--hop-iris-300);
  --hop-primary-surface-hover: var(--hop-iris-200);
  --hop-primary-surface-focus: var(--hop-iris-25);
  --hop-primary-surface-disabled: var(--hop-iris-200);
  --hop-primary-surface-selected: var(--hop-iris-400);
  --hop-primary-surface: var(--hop-iris-50);
  --hop-primary-icon-strong-hover: var(--hop-samoyed);
  --hop-primary-icon-strong: var(--hop-samoyed);
  --hop-primary-icon-press: var(--hop-iris-700);
  --hop-primary-icon-hover: var(--hop-iris-600);
  --hop-primary-icon-disabled: var(--hop-iris-200);
  --hop-primary-icon-selected: var(--hop-iris-500);
  --hop-primary-icon: var(--hop-iris-500);
  --hop-primary-border-press: var(--hop-iris-500);
  --hop-primary-border-focus: var(--hop-iris-500);
  --hop-primary-border-selected: var(--hop-iris-400);
  --hop-primary-border: var(--hop-iris-400);
  --hop-primary-text-active: var(--hop-sapphire-700);
  --hop-primary-surface-weak-active: var(--hop-sapphire-75);
  --hop-primary-surface-strong-active: var(--hop-sapphire-700);
  --hop-primary-surface-active: var(--hop-sapphire-300);
  --hop-primary-icon-active: var(--hop-sapphire-700);
  --hop-primary-border-active: var(--hop-sapphire-300);
  --hop-neutral-text-always-dark: var(--hop-rock-900);
  --hop-neutral-text-always-light-weak: var(--hop-rock-300);
  --hop-neutral-text-always-light: var(--hop-samoyed);
  --hop-neutral-text-inverse: var(--hop-rock-900);
  --hop-neutral-text-weakest: var(--hop-rock-300);
  --hop-neutral-text-weak-selected: var(--hop-rock-600);
  --hop-neutral-text-weak-press: var(--hop-rock-700);
  --hop-neutral-text-weak-hover: var(--hop-rock-600);
  --hop-neutral-text-weak: var(--hop-rock-500);
  --hop-neutral-text-strong: var(--hop-samoyed);
  --hop-neutral-text-press: var(--hop-rock-900);
  --hop-neutral-text-hover: var(--hop-rock-700);
  --hop-neutral-text-disabled: var(--hop-rock-300);
  --hop-neutral-text-selected: var(--hop-samoyed);
  --hop-neutral-text: var(--hop-rock-800);
  --hop-neutral-surface-always-dark: var(--hop-rock-900);
  --hop-neutral-surface-always-light: var(--hop-samoyed);
  --hop-neutral-surface-inverse: var(--hop-rock-900);
  --hop-neutral-surface-weakest-hover: var(--hop-rock-50);
  --hop-neutral-surface-weakest-selected: var(--hop-rock-50);
  --hop-neutral-surface-weakest: var(--hop-rock-25);
  --hop-neutral-surface-weak-press: var(--hop-rock-100);
  --hop-neutral-surface-weak-hover: var(--hop-rock-75);
  --hop-neutral-surface-weak-selected: var(--hop-rock-50);
  --hop-neutral-surface-weak: var(--hop-rock-50);
  --hop-neutral-surface-strong: var(--hop-rock-800);
  --hop-neutral-surface-press: var(--hop-rock-50);
  --hop-neutral-surface-hover: var(--hop-rock-25);
  --hop-neutral-surface-disabled: var(--hop-rock-50);
  --hop-neutral-surface-selected: var(--hop-rock-800);
  --hop-neutral-surface: var(--hop-samoyed);
  --hop-neutral-icon-always-dark: var(--hop-rock-900);
  --hop-neutral-icon-always-light: var(--hop-samoyed);
  --hop-neutral-icon-inverse: var(--hop-rock-900);
  --hop-neutral-icon-weakest: var(--hop-rock-200);
  --hop-neutral-icon-weak-selected: var(--hop-rock-600);
  --hop-neutral-icon-weak-press: var(--hop-rock-700);
  --hop-neutral-icon-weak-hover: var(--hop-rock-600);
  --hop-neutral-icon-weak: var(--hop-rock-400);
  --hop-neutral-icon-strong-hover: var(--hop-samoyed);
  --hop-neutral-icon-strong: var(--hop-samoyed);
  --hop-neutral-icon-press: var(--hop-rock-900);
  --hop-neutral-icon-hover: var(--hop-rock-700);
  --hop-neutral-icon-disabled: var(--hop-rock-300);
  --hop-neutral-icon-selected: var(--hop-samoyed);
  --hop-neutral-icon: var(--hop-rock-800);
  --hop-neutral-border-weakest: var(--hop-rock-50);
  --hop-neutral-border-weak: var(--hop-rock-75);
  --hop-neutral-border-strong-hover: var(--hop-rock-700);
  --hop-neutral-border-strong: var(--hop-rock-800);
  --hop-neutral-border-press: var(--hop-rock-400);
  --hop-neutral-border-hover: var(--hop-rock-300);
  --hop-neutral-border-disabled: var(--hop-rock-50);
  --hop-neutral-border-selected: var(--hop-rock-800);
  --hop-neutral-border: var(--hop-rock-200);
  --hop-neutral-text-weak-active: var(--hop-rock-700);
  --hop-neutral-text-active: var(--hop-rock-900);
  --hop-neutral-surface-weak-active: var(--hop-rock-100);
  --hop-neutral-surface-active: var(--hop-rock-50);
  --hop-neutral-icon-weak-active: var(--hop-rock-700);
  --hop-neutral-icon-active: var(--hop-rock-900);
  --hop-neutral-border-active: var(--hop-rock-400);
  --hop-danger-text-weak-press: var(--hop-rose-600);
  --hop-danger-text-weak-hover: var(--hop-rose-500);
  --hop-danger-text-weak: var(--hop-rose-400);
  --hop-danger-text-strong-hover: var(--hop-samoyed);
  --hop-danger-text-strong: var(--hop-samoyed);
  --hop-danger-text-press: var(--hop-rose-800);
  --hop-danger-text-hover: var(--hop-rose-500);
  --hop-danger-text-disabled: var(--hop-rose-100);
  --hop-danger-text-selected: var(--hop-rose-400);
  --hop-danger-text: var(--hop-rose-700);
  --hop-danger-surface-weak-selected: var(--hop-rose-100);
  --hop-danger-surface-weak-press: var(--hop-rose-100);
  --hop-danger-surface-weak-hover: var(--hop-rose-75);
  --hop-danger-surface-weak: var(--hop-rose-50);
  --hop-danger-surface-strong-hover: var(--hop-rose-500);
  --hop-danger-surface-strong: var(--hop-rose-400);
  --hop-danger-surface-press: var(--hop-rose-600);
  --hop-danger-surface-hover: var(--hop-rose-500);
  --hop-danger-surface-disabled: var(--hop-rose-100);
  --hop-danger-surface-selected: var(--hop-rose-50);
  --hop-danger-surface: var(--hop-rose-25);
  --hop-danger-icon-weakest: var(--hop-rose-75);
  --hop-danger-icon-weak-press: var(--hop-rose-600);
  --hop-danger-icon-weak-hover: var(--hop-rose-500);
  --hop-danger-icon-weak: var(--hop-rose-400);
  --hop-danger-icon-strong-hover: var(--hop-samoyed);
  --hop-danger-icon-strong: var(--hop-samoyed);
  --hop-danger-icon-press: var(--hop-rose-800);
  --hop-danger-icon-hover: var(--hop-rose-500);
  --hop-danger-icon-disabled: var(--hop-rose-100);
  --hop-danger-icon-selected: var(--hop-rose-400);
  --hop-danger-icon: var(--hop-rose-700);
  --hop-danger-border-press: var(--hop-rose-300);
  --hop-danger-border-strong: var(--hop-rose-300);
  --hop-danger-border-selected: var(--hop-rose-400);
  --hop-danger-border: var(--hop-rose-100);
  --hop-danger-text-weak-active: var(--hop-amanita-600);
  --hop-danger-text-active: var(--hop-amanita-800);
  --hop-danger-surface-weak-active: var(--hop-amanita-100);
  --hop-danger-surface-active: var(--hop-amanita-600);
  --hop-danger-icon-weak-active: var(--hop-amanita-600);
  --hop-danger-icon-active: var(--hop-amanita-800);
  --hop-danger-border-active: var(--hop-amanita-600);
  --hop-space-inset-stretch-lg: var(--hop-space-480) var(--hop-space-240);
  --hop-space-inset-stretch-md: var(--hop-space-240) var(--hop-space-160);
  --hop-space-inset-stretch-sm: var(--hop-space-160) var(--hop-space-80);
  --hop-space-inset-squish-lg: var(--hop-space-160) var(--hop-space-320);
  --hop-space-inset-squish-md: var(--hop-space-80) var(--hop-space-160);
  --hop-space-inset-squish-sm: var(--hop-space-40) var(--hop-space-80);
  --hop-space-inset-xl: var(--hop-space-320);
  --hop-space-inset-lg: var(--hop-space-240);
  --hop-space-inset-md: var(--hop-space-160);
  --hop-space-inset-sm: var(--hop-space-80);
  --hop-space-inset-xs: var(--hop-space-40);
  --hop-space-inline-xl: var(--hop-space-320);
  --hop-space-inline-lg: var(--hop-space-240);
  --hop-space-inline-md: var(--hop-space-160);
  --hop-space-inline-sm: var(--hop-space-80);
  --hop-space-inline-xs: var(--hop-space-40);
  --hop-space-stack-xl: var(--hop-space-320);
  --hop-space-stack-lg: var(--hop-space-240);
  --hop-space-stack-md: var(--hop-space-160);
  --hop-space-stack-sm: var(--hop-space-80);
  --hop-space-stack-xs: var(--hop-space-40);
  --hop-comp-tooltip-color: var(--hop-neutral-text-always-light);
  --hop-comp-tooltip-border-radius: var(--hop-shape-rounded-md);
  --hop-comp-tile-icon-color-disabled: var(--hop-neutral-icon-disabled);
  --hop-comp-tile-icon-color-selected: var(--hop-neutral-icon);
  --hop-comp-tile-text-color-disabled: var(--hop-neutral-text-disabled);
  --hop-comp-tile-text-color-selected: var(--hop-neutral-text);
  --hop-comp-tile-text-color-focus: var(--hop-neutral-text-hover);
  --hop-comp-tile-text-color-press: var(--hop-neutral-text-press);
  --hop-comp-tile-text-color-hover: var(--hop-neutral-text-hover);
  --hop-comp-tile-text-color: var(--hop-neutral-text);
  --hop-comp-tile-outline-color-focus: var(--hop-primary-border-focus);
  --hop-comp-tile-border-radius: var(--hop-shape-rounded-md);
  --hop-comp-tile-border-color: var(--hop-neutral-border-weakest);
  --hop-comp-tile-background-color-disabled: var(--hop-neutral-surface-disabled);
  --hop-comp-tile-background-color-selected: var(--hop-neutral-surface-weak-selected);
  --hop-comp-tile-background-color-focus: var(--hop-neutral-surface-weak-hover);
  --hop-comp-tile-background-color-press: var(--hop-neutral-surface-weak-press);
  --hop-comp-tile-background-color-hover: var(--hop-neutral-surface-weak-hover);
  --hop-comp-tile-background-color: var(--hop-neutral-surface);
  --hop-comp-tag-text-font-size-lg: var(--hop-caption-lg-font-size);
  --hop-comp-tag-text-font-size-md: var(--hop-caption-md-font-size);
  --hop-comp-tag-text-font-size-sm: var(--hop-caption-md-font-size);
  --hop-comp-tag-text-font: var(--hop-caption-md-font-family);
  --hop-comp-tag-icon-color-error: var(--hop-danger-icon-weak);
  --hop-comp-tag-icon-color-disabled: var(--hop-neutral-icon-disabled);
  --hop-comp-tag-icon-color-selected: var(--hop-neutral-icon-always-light);
  --hop-comp-tag-icon-color-press: var(--hop-neutral-icon-press);
  --hop-comp-tag-icon-color-hover: var(--hop-neutral-icon-hover);
  --hop-comp-tag-icon-color: var(--hop-neutral-icon);
  --hop-comp-tag-text-color-error: var(--hop-danger-text-weak);
  --hop-comp-tag-text-color-disabled: var(--hop-neutral-text-disabled);
  --hop-comp-tag-text-color-selected: var(--hop-neutral-text-always-light);
  --hop-comp-tag-text-color-press: var(--hop-neutral-text-press);
  --hop-comp-tag-text-color-hover: var(--hop-neutral-text-hover);
  --hop-comp-tag-text-color: var(--hop-neutral-text);
  --hop-comp-tag-border-color-focus: var(--hop-primary-border-focus);
  --hop-comp-tag-border-color-error: var(--hop-danger-border-strong);
  --hop-comp-tag-border-color-disabled: var(--hop-neutral-border-weak);
  --hop-comp-tag-border-color: var(--hop-neutral-border-weak);
  --hop-comp-tag-background-color-disabled: var(--hop-neutral-surface-disabled);
  --hop-comp-tag-background-color-selected: var(--hop-primary-surface-strong);
  --hop-comp-tag-background-color-press: var(--hop-primary-surface-weak-press);
  --hop-comp-tag-background-color-hover: var(--hop-primary-surface-weak-hover);
  --hop-comp-tag-background-color: var(--hop-neutral-surface);
  --hop-comp-tag-border-radius: var(--hop-shape-rounded-sm);
  --hop-comp-tabs-tab-panel-border-color-focus: var(--hop-primary-border-focus);
  --hop-comp-tabs-tab-border-radius: var(--hop-shape-rounded-sm);
  --hop-comp-tabs-tab-border-color-disabled: var(--hop-neutral-border-disabled);
  --hop-comp-tabs-tab-border-color-focus: var(--hop-primary-border-focus);
  --hop-comp-tabs-tab-border-color-selected: var(--hop-primary-border-selected);
  --hop-comp-tabs-tab-text-color-disabled: var(--hop-neutral-text-disabled);
  --hop-comp-tabs-tab-text-color-focus: var(--hop-neutral-text-hover);
  --hop-comp-tabs-tab-text-color-selected: var(--hop-primary-text-selected);
  --hop-comp-tabs-tab-text-color-press: var(--hop-neutral-text-press);
  --hop-comp-tabs-tab-text-color-hover: var(--hop-neutral-text-hover);
  --hop-comp-tabs-tab-text-color: var(--hop-neutral-text-weak);
  --hop-comp-popover-border-radius: var(--hop-shape-rounded-lg);
  --hop-comp-modal-border-radius: var(--hop-shape-rounded-lg);
  --hop-comp-mark-border-color-error-focus: var(--hop-danger-border-press);
  --hop-comp-mark-border-color-error-press: var(--hop-danger-border-press);
  --hop-comp-mark-border-color-error: var(--hop-danger-border-strong);
  --hop-comp-mark-border-color-disabled: var(--hop-neutral-border-disabled);
  --hop-comp-mark-border-color-focus: var(--hop-primary-border-focus);
  --hop-comp-mark-border-color-selected: var(--hop-primary-border-selected);
  --hop-comp-mark-border-color-press: var(--hop-neutral-border-press);
  --hop-comp-mark-border-color-hover: var(--hop-neutral-border-hover);
  --hop-comp-mark-border-color: var(--hop-neutral-border);
  --hop-comp-mark-indicator-color-error: var(--hop-neutral-icon-always-light);
  --hop-comp-mark-indicator-color-disabled: var(--hop-neutral-icon-disabled);
  --hop-comp-mark-indicator-color: var(--hop-neutral-icon-always-light);
  --hop-comp-mark-icon-color-error-press: var(--hop-danger-icon-weak-press);
  --hop-comp-mark-icon-color-error-hover: var(--hop-danger-icon-weak-hover);
  --hop-comp-mark-icon-color-error: var(--hop-danger-icon-weak);
  --hop-comp-mark-icon-color-focus: var(--hop-neutral-icon-hover);
  --hop-comp-mark-icon-color-disabled: var(--hop-neutral-icon-disabled);
  --hop-comp-mark-icon-color-selected: var(--hop-neutral-icon);
  --hop-comp-mark-icon-color-press: var(--hop-neutral-icon-press);
  --hop-comp-mark-icon-color-hover: var(--hop-neutral-icon-hover);
  --hop-comp-mark-icon-color: var(--hop-neutral-icon);
  --hop-comp-mark-text-color-error-press: var(--hop-danger-text-weak-press);
  --hop-comp-mark-text-color-error-hover: var(--hop-danger-text-weak-hover);
  --hop-comp-mark-text-color-error: var(--hop-danger-text-weak);
  --hop-comp-mark-text-color-focus: var(--hop-neutral-text-hover);
  --hop-comp-mark-text-color-disabled: var(--hop-neutral-text-disabled);
  --hop-comp-mark-text-color-selected: var(--hop-neutral-text);
  --hop-comp-mark-text-color-press: var(--hop-neutral-text-press);
  --hop-comp-mark-text-color-hover: var(--hop-neutral-text-hover);
  --hop-comp-mark-text-color: var(--hop-neutral-text);
  --hop-comp-mark-background-color-error-focus: var(--hop-danger-surface);
  --hop-comp-mark-background-color-error-press: var(--hop-danger-surface-weak-press);
  --hop-comp-mark-background-color-error-hover: var(--hop-danger-surface-weak-hover);
  --hop-comp-mark-background-color-error: var(--hop-danger-surface-strong);
  --hop-comp-mark-background-color-disabled: var(--hop-neutral-surface-disabled);
  --hop-comp-mark-background-color-selected: var(--hop-primary-surface-selected);
  --hop-comp-mark-background-color-press: var(--hop-neutral-surface-press);
  --hop-comp-mark-background-color-hover: var(--hop-neutral-surface-hover);
  --hop-comp-mark-background-color: var(--hop-neutral-surface);
  --hop-comp-radio-border-radius: var(--hop-shape-circle);
  --hop-comp-checkbox-border-radius: var(--hop-shape-rounded-sm);
  --hop-comp-field-prefill-color: var(--hop-neutral-text-weak);
  --hop-comp-field-placeholder-color: var(--hop-neutral-text-weakest);
  --hop-comp-field-icon-color-disabled: var(--hop-neutral-icon-disabled);
  --hop-comp-field-icon-color-press: var(--hop-neutral-icon-press);
  --hop-comp-field-icon-color-hover: var(--hop-neutral-icon-hover);
  --hop-comp-field-icon-color: var(--hop-neutral-icon);
  --hop-comp-field-text-color-error: var(--hop-danger-text-weak);
  --hop-comp-field-text-color-disabled: var(--hop-neutral-text-disabled);
  --hop-comp-field-text-color: var(--hop-neutral-text);
  --hop-comp-field-border-color-disabled: var(--hop-neutral-border-disabled);
  --hop-comp-field-border-color-error: var(--hop-danger-border-strong);
  --hop-comp-field-border-color-focus: var(--hop-primary-border-focus);
  --hop-comp-field-border-color-hover: var(--hop-neutral-border-hover);
  --hop-comp-field-border-color: var(--hop-neutral-border-weak);
  --hop-comp-field-background-color-disabled: var(--hop-neutral-surface-disabled);
  --hop-comp-field-background-color-hover: var(--hop-neutral-surface-hover);
  --hop-comp-field-background-color: var(--hop-neutral-surface);
  --hop-comp-field-border-radius: var(--hop-shape-rounded-md);
  --hop-comp-select-checkmark-color-disabled: var(--hop-neutral-icon-disabled);
  --hop-comp-select-checkmark-color-pressed: var(--hop-primary-icon-press);
  --hop-comp-select-checkmark-color-focused: var(--hop-primary-icon-hover);
  --hop-comp-select-checkmark-color-hovered: var(--hop-primary-icon-hover);
  --hop-comp-select-checkmark-color: var(--hop-primary-icon);
  --hop-comp-select-text-color-hover: var(--hop-neutral-text-hover);
  --hop-comp-select-border-color-active: var(--hop-primary-border);
  --hop-comp-select-background-color-active: var(--hop-neutral-surface);
  --hop-comp-control-border-color-error: var(--hop-danger-border-strong);
  --hop-comp-control-border-color-disabled: var(--hop-neutral-border-disabled);
  --hop-comp-control-border-color-focus: var(--hop-primary-border-focus);
  --hop-comp-control-border-color-selected: var(--hop-primary-border-selected);
  --hop-comp-control-border-color-press: var(--hop-neutral-border);
  --hop-comp-control-border-color-hover: var(--hop-neutral-border-weak);
  --hop-comp-control-border-color: var(--hop-neutral-border-weakest);
  --hop-comp-control-background-color-error: var(--hop-danger-surface-strong);
  --hop-comp-control-background-color-disabled: var(--hop-neutral-surface-disabled);
  --hop-comp-control-background-color-selected: var(--hop-neutral-surface);
  --hop-comp-control-background-color-press: var(--hop-neutral-surface-press);
  --hop-comp-control-background-color-hover: var(--hop-neutral-surface-hover);
  --hop-comp-control-background-color: var(--hop-neutral-surface-weakest);
  --hop-comp-switch-thumb-color-disabled: var(--hop-neutral-icon-disabled);
  --hop-comp-switch-thumb-color-error: var(--hop-danger-icon-weak);
  --hop-comp-switch-thumb-color-selected: var(--hop-neutral-icon-always-light);
  --hop-comp-switch-thumb-color-press: var(--hop-neutral-icon-always-light);
  --hop-comp-switch-thumb-color-hover: var(--hop-neutral-icon-always-light);
  --hop-comp-switch-thumb-color: var(--hop-neutral-icon-always-light);
  --hop-comp-switch-text-color-error: var(--hop-danger-text-weak);
  --hop-comp-switch-text-color-disabled: var(--hop-neutral-text-disabled);
  --hop-comp-switch-text-color-press: var(--hop-neutral-text-press);
  --hop-comp-switch-text-color-hover: var(--hop-neutral-text-hover);
  --hop-comp-switch-text-color: var(--hop-neutral-text);
  --hop-comp-switch-background-color-selected: var(--hop-primary-surface-selected);
  --hop-comp-switch-thumb-border-radius: var(--hop-shape-rounded-sm);
  --hop-comp-switch-border-radius-sm: var(--hop-shape-rounded-sm);
  --hop-comp-switch-border-radius-md: var(--hop-shape-rounded-md);
  --hop-comp-segmented-control-item-border-radius: var(--hop-shape-rounded-md);
  --hop-comp-segmented-control-icon-color-selected: var(--hop-neutral-icon);
  --hop-comp-segmented-control-icon-color: var(--hop-neutral-icon-weakest);
  --hop-comp-segmented-control-text-color-selected: var(--hop-neutral-text);
  --hop-comp-segmented-control-text-color: var(--hop-neutral-text-weakest);
  --hop-comp-segmented-control-border-radius: var(--hop-shape-rounded-md);
  --hop-comp-card-second-level-border-color: var(--hop-neutral-border-weakest);
  --hop-comp-card-second-level-background-color: var(--hop-neutral-surface-weakest);
  --hop-comp-card-second-level-border-radius: var(--hop-shape-rounded-lg);
  --hop-comp-card-main-border-color: var(--hop-neutral-border-weakest);
  --hop-comp-card-main-background-color: var(--hop-neutral-surface);
  --hop-comp-card-main-border-radius: var(--hop-shape-rounded-lg);
  --hop-comp-callout-upsell-icon-background-color: var(--hop-upsell-icon-weakest);
  --hop-comp-callout-upsell-icon-shadow-color: var(--hop-neutral-icon-always-dark);
  --hop-comp-callout-upsell-text-color: var(--hop-upsell-text);
  --hop-comp-callout-upsell-border-color: var(--hop-upsell-border);
  --hop-comp-callout-upsell-background-color: var(--hop-upsell-surface);
  --hop-comp-callout-warning-icon-background-color: var(--hop-warning-icon-weakest);
  --hop-comp-callout-warning-icon-shadow-color: var(--hop-neutral-icon-always-dark);
  --hop-comp-callout-warning-text-color: var(--hop-warning-text);
  --hop-comp-callout-warning-border-color: var(--hop-warning-border);
  --hop-comp-callout-warning-background-color: var(--hop-warning-surface);
  --hop-comp-callout-success-icon-background-color: var(--hop-success-icon-weakest);
  --hop-comp-callout-success-icon-shadow-color: var(--hop-neutral-icon-always-dark);
  --hop-comp-callout-success-text-color: var(--hop-success-text);
  --hop-comp-callout-success-border-color: var(--hop-success-border);
  --hop-comp-callout-success-background-color: var(--hop-success-surface);
  --hop-comp-callout-information-icon-background-color: var(--hop-information-icon-weakest);
  --hop-comp-callout-information-icon-shadow-color: var(--hop-neutral-icon-always-dark);
  --hop-comp-callout-information-text-color: var(--hop-information-text);
  --hop-comp-callout-information-border-color: var(--hop-information-border);
  --hop-comp-callout-information-background-color: var(--hop-information-surface);
  --hop-comp-calendar-cell-today-border-color: var(--hop-primary-border-selected);
  --hop-comp-calendar-cell-background-press: var(--hop-primary-surface-press);
  --hop-comp-calendar-cell-background-selected: var(--hop-primary-surface-selected);
  --hop-comp-button-ghost-danger-background-selected: var(--hop-danger-surface-selected);
  --hop-comp-button-ghost-danger-background-pressed: var(--hop-danger-surface-weak-press);
  --hop-comp-button-ghost-danger-background-hover: var(--hop-neutral-surface-hover);
  --hop-comp-button-ghost-danger-color-loading: var(--hop-neutral-icon);
  --hop-comp-button-ghost-danger-icon-color-selected: var(--hop-danger-icon-press);
  --hop-comp-button-ghost-danger-icon-color-press: var(--hop-danger-icon-press);
  --hop-comp-button-ghost-danger-icon-color-hover: var(--hop-danger-icon-hover);
  --hop-comp-button-ghost-danger-icon-color: var(--hop-danger-icon-weak);
  --hop-comp-button-ghost-danger-text-color-selected: var(--hop-danger-text-press);
  --hop-comp-button-ghost-danger-text-color-pressed: var(--hop-danger-text-press);
  --hop-comp-button-ghost-danger-text-color-hover: var(--hop-danger-text-hover);
  --hop-comp-button-ghost-danger-text-color: var(--hop-danger-text-weak);
  --hop-comp-button-ghost-secondary-background-selected: var(--hop-neutral-surface-weak-selected);
  --hop-comp-button-ghost-secondary-background-pressed: var(--hop-neutral-surface-press);
  --hop-comp-button-ghost-secondary-background-hover: var(--hop-neutral-surface-hover);
  --hop-comp-button-ghost-secondary-color-loading: var(--hop-neutral-icon);
  --hop-comp-button-ghost-secondary-icon-color-selected: var(--hop-neutral-icon-weak-press);
  --hop-comp-button-ghost-secondary-icon-color-press: var(--hop-neutral-icon-weak-press);
  --hop-comp-button-ghost-secondary-icon-color-hover: var(--hop-neutral-icon-weak-hover);
  --hop-comp-button-ghost-secondary-icon-color: var(--hop-neutral-icon-weak);
  --hop-comp-button-ghost-secondary-text-color-selected: var(--hop-neutral-text-weak-press);
  --hop-comp-button-ghost-secondary-text-color-pressed: var(--hop-neutral-text-weak-press);
  --hop-comp-button-ghost-secondary-text-color-hover: var(--hop-neutral-text-weak-hover);
  --hop-comp-button-ghost-secondary-text-color: var(--hop-neutral-text-weak);
  --hop-comp-button-ghost-primary-background-selected: var(--hop-primary-surface-weak-selected);
  --hop-comp-button-ghost-primary-background-pressed: var(--hop-primary-surface-weak-press);
  --hop-comp-button-ghost-primary-background-hover: var(--hop-neutral-surface-hover);
  --hop-comp-button-ghost-primary-color-loading: var(--hop-neutral-icon);
  --hop-comp-button-ghost-primary-icon-color-selected: var(--hop-primary-icon-press);
  --hop-comp-button-ghost-primary-icon-color-press: var(--hop-primary-icon-press);
  --hop-comp-button-ghost-primary-icon-color-hover: var(--hop-primary-icon-hover);
  --hop-comp-button-ghost-primary-icon-color: var(--hop-primary-icon);
  --hop-comp-button-ghost-primary-text-color-selected: var(--hop-primary-text-press);
  --hop-comp-button-ghost-primary-text-color-pressed: var(--hop-primary-text-press);
  --hop-comp-button-ghost-primary-text-color-hover: var(--hop-primary-text-hover);
  --hop-comp-button-ghost-primary-text-color: var(--hop-primary-text);
  --hop-comp-button-danger-border-color-disabled: var(--hop-neutral-surface-disabled);
  --hop-comp-button-danger-border-color-selected: var(--hop-danger-border-selected);
  --hop-comp-button-danger-border-color: var(--hop-neutral-border-weakest);
  --hop-comp-button-danger-background-disabled: var(--hop-neutral-surface-disabled);
  --hop-comp-button-danger-background-selected: linear-gradient(var(--hop-danger-surface-selected), var(--hop-danger-surface-selected) 100%); /* Single-stop gradient to allow smooth CSS transition from the multi-stop gradient default background. */
  --hop-comp-button-danger-background-pressed: linear-gradient(var(--hop-danger-surface-press), var(--hop-danger-surface-press) 100%); /* Single-stop gradient to allow smooth CSS transition from the multi-stop gradient default background. */
  --hop-comp-button-danger-background-hover: linear-gradient(var(--hop-danger-surface-strong-hover), var(--hop-danger-surface-strong-hover) 100%); /* Single-stop gradient to allow smooth CSS transition from the multi-stop gradient default background. */
  --hop-comp-button-danger-border-color-loading: var(--hop-neutral-border-weakest);
  --hop-comp-button-danger-color-loading: var(--hop-primary-icon-strong);
  --hop-comp-button-danger-icon-color-selected: var(--hop-danger-icon-selected);
  --hop-comp-button-danger-icon-color-press: var(--hop-danger-icon-strong-hover);
  --hop-comp-button-danger-icon-color-hover: var(--hop-danger-icon-strong-hover);
  --hop-comp-button-danger-icon-color: var(--hop-danger-icon-strong);
  --hop-comp-button-danger-text-color-selected: var(--hop-danger-text-selected);
  --hop-comp-button-danger-text-color-pressed: var(--hop-danger-text-strong-hover);
  --hop-comp-button-danger-text-color-hover: var(--hop-danger-text-strong-hover);
  --hop-comp-button-danger-text-color: var(--hop-danger-text-strong);
  --hop-comp-button-upsell-border-color-selected: var(--hop-upsell-border-selected);
  --hop-comp-button-upsell-border-color: var(--hop-upsell-border);
  --hop-comp-button-upsell-background-disabled: var(--hop-neutral-surface-disabled);
  --hop-comp-button-upsell-background-selected: linear-gradient(var(--hop-upsell-surface-weak-press), var(--hop-upsell-surface-weak-press) 100%); /* Single-stop gradient to allow smooth CSS transition from the multi-stop gradient default background. */
  --hop-comp-button-upsell-background-pressed: linear-gradient(var(--hop-upsell-surface-weak-press), var(--hop-upsell-surface-weak-press) 100%); /* Single-stop gradient to allow smooth CSS transition from the multi-stop gradient default background. */
  --hop-comp-button-upsell-background-hover: linear-gradient(var(--hop-upsell-surface-weak-hover), var(--hop-upsell-surface-weak-hover) 100%); /* Single-stop gradient to allow smooth CSS transition from the multi-stop gradient default background. */
  --hop-comp-button-upsell-border-color-loading: var(--hop-upsell-border);
  --hop-comp-button-upsell-color-loading: var(--hop-neutral-icon-always-dark);
  --hop-comp-button-upsell-icon-color-selected: var(--hop-upsell-icon-selected);
  --hop-comp-button-upsell-icon-color-press: var(--hop-upsell-icon-weak-press);
  --hop-comp-button-upsell-icon-color-hover: var(--hop-upsell-icon-hover);
  --hop-comp-button-upsell-icon-color: var(--hop-neutral-icon-always-dark);
  --hop-comp-button-upsell-text-color-selected: var(--hop-upsell-text-selected);
  --hop-comp-button-upsell-text-color-pressed: var(--hop-upsell-text-weak-press);
  --hop-comp-button-upsell-text-color-hover: var(--hop-upsell-text-hover);
  --hop-comp-button-upsell-text-color: var(--hop-neutral-text-always-dark);
  --hop-comp-button-secondary-border-color-selected: var(--hop-neutral-border-weak);
  --hop-comp-button-secondary-border-color: var(--hop-neutral-border-weak);
  --hop-comp-button-secondary-background-disabled: var(--hop-neutral-surface-disabled);
  --hop-comp-button-secondary-background-selected: linear-gradient(var(--hop-neutral-surface-weak-selected), var(--hop-neutral-surface-weak-selected) 100%); /* Single-stop gradient to allow smooth CSS transition from the multi-stop gradient default background. */
  --hop-comp-button-secondary-background-pressed: linear-gradient(var(--hop-neutral-surface-weak-hover), var(--hop-neutral-surface-weak-hover) 100%); /* Single-stop gradient to allow smooth CSS transition from the multi-stop gradient default background. */
  --hop-comp-button-secondary-background-hover: linear-gradient(var(--hop-neutral-surface-weak-hover), var(--hop-neutral-surface-weak-hover) 100%); /* Single-stop gradient to allow smooth CSS transition from the multi-stop gradient default background. */
  --hop-comp-button-secondary-border-color-loading: var(--hop-neutral-border-weak);
  --hop-comp-button-secondary-color-loading: var(--hop-neutral-icon);
  --hop-comp-button-secondary-background-loading: linear-gradient(var(--hop-neutral-surface), var(--hop-neutral-surface-weak) 100%);
  --hop-comp-button-secondary-background: linear-gradient(var(--hop-neutral-surface), var(--hop-neutral-surface-weak) 100%);
  --hop-comp-button-secondary-icon-color-selected: var(--hop-primary-icon-selected);
  --hop-comp-button-secondary-icon-color-press: var(--hop-primary-icon-press);
  --hop-comp-button-secondary-icon-color-hover: var(--hop-primary-icon-hover);
  --hop-comp-button-secondary-icon-color: var(--hop-primary-icon);
  --hop-comp-button-secondary-text-color-selected: var(--hop-primary-text-selected);
  --hop-comp-button-secondary-text-color-pressed: var(--hop-primary-text-press);
  --hop-comp-button-secondary-text-color-hover: var(--hop-primary-text-hover);
  --hop-comp-button-secondary-text-color: var(--hop-primary-text);
  --hop-comp-button-primary-border-color-selected: var(--hop-neutral-border-weakest);
  --hop-comp-button-primary-border-color: var(--hop-primary-border);
  --hop-comp-button-primary-background-disabled: var(--hop-neutral-surface-disabled);
  --hop-comp-button-primary-background-selected: linear-gradient(var(--hop-primary-surface-strong-selected), var(--hop-primary-surface-strong-selected) 100%); /* Single-stop gradient to allow smooth CSS transition from the multi-stop gradient default background. */
  --hop-comp-button-primary-background-pressed: linear-gradient(var(--hop-primary-surface-strong-press), var(--hop-primary-surface-strong-press) 100%); /* Single-stop gradient to allow smooth CSS transition from the multi-stop gradient default background. */
  --hop-comp-button-primary-background-hover: linear-gradient(var(--hop-primary-surface-strong-hover), var(--hop-primary-surface-strong-hover) 100%); /* Single-stop gradient to allow smooth CSS transition from the multi-stop gradient default background. */
  --hop-comp-button-primary-border-color-loading: var(--hop-primary-border);
  --hop-comp-button-primary-color-loading: var(--hop-primary-icon-strong);
  --hop-comp-button-primary-icon-color-selected: var(--hop-neutral-icon-always-light);
  --hop-comp-button-primary-icon-color-press: var(--hop-neutral-icon-always-light);
  --hop-comp-button-primary-icon-color-hover: var(--hop-neutral-icon-always-light);
  --hop-comp-button-primary-icon-color: var(--hop-neutral-icon-always-light);
  --hop-comp-button-primary-text-color-selected: var(--hop-neutral-text-always-light);
  --hop-comp-button-primary-text-color-pressed: var(--hop-neutral-text-always-light);
  --hop-comp-button-primary-text-color-hover: var(--hop-neutral-text-always-light);
  --hop-comp-button-primary-text-color: var(--hop-neutral-text-always-light);
  --hop-comp-button-text-font-size-xs: var(--hop-body-xs-font-size);
  --hop-comp-button-text-font-size-sm: var(--hop-body-sm-font-size);
  --hop-comp-button-text-font-size-md: var(--hop-body-md-font-size);
  --hop-comp-button-text-font: var(--hop-body-md-font-family);
  --hop-comp-button-icon-color-disabled: var(--hop-neutral-icon-disabled);
  --hop-comp-button-text-color-disabled: var(--hop-neutral-text-disabled);
  --hop-comp-button-border-color-focus: var(--hop-primary-border-focus);
  --hop-comp-button-border-radius: var(--hop-shape-rounded-md);
  --hop-comp-badge-disabled-text-color: var(--hop-neutral-text-disabled);
  --hop-comp-badge-disabled-background: var(--hop-neutral-surface-disabled);
  --hop-comp-badge-subdued-text-color-selected: var(--hop-neutral-text-always-light);
  --hop-comp-badge-subdued-text-color-press: var(--hop-neutral-text-press);
  --hop-comp-badge-subdued-text-color-hover: var(--hop-neutral-text-hover);
  --hop-comp-badge-subdued-text-color: var(--hop-neutral-text);
  --hop-comp-badge-subdued-background-selected: var(--hop-primary-surface-strong);
  --hop-comp-badge-subdued-background-press: var(--hop-primary-surface-press);
  --hop-comp-badge-subdued-background-hover: var(--hop-primary-surface-hover);
  --hop-comp-badge-subdued-background: var(--hop-primary-surface-weak-hover);
  --hop-comp-badge-secondary-text-color-selected: var(--hop-primary-text);
  --hop-comp-badge-secondary-text-color-press: var(--hop-primary-text-strong);
  --hop-comp-badge-secondary-text-color-hover: var(--hop-primary-text-strong-hover);
  --hop-comp-badge-secondary-text-color: var(--hop-primary-text-strong);
  --hop-comp-badge-secondary-background-selected: var(--hop-primary-surface-weak);
  --hop-comp-badge-secondary-background-press: var(--hop-primary-surface-strong-press);
  --hop-comp-badge-secondary-background-hover: var(--hop-primary-surface-strong-hover);
  --hop-comp-badge-secondary-background: var(--hop-primary-surface-strong);
  --hop-comp-badge-primary-text-color-selected: var(--hop-secondary-text);
  --hop-comp-badge-primary-text-color-press: var(--hop-neutral-text-strong);
  --hop-comp-badge-primary-text-color-hover: var(--hop-neutral-text-strong);
  --hop-comp-badge-primary-text-color: var(--hop-neutral-text-always-light);
  --hop-comp-badge-primary-background-selected: var(--hop-secondary-surface-strong-selected);
  --hop-comp-badge-primary-background-press: var(--hop-secondary-surface-strong-press);
  --hop-comp-badge-primary-background-hover: var(--hop-secondary-surface-strong-hover);
  --hop-comp-badge-primary-background: var(--hop-secondary-surface-strong);
  --hop-comp-avatar-description-color: var(--hop-neutral-text-always-light-weak);
}