.product-name-token {
  --product-token-main: currentColor;
  --product-token-soft: var(--product-token-main);
  --product-token-main-rendered: var(--product-token-main);
  --product-token-soft-rendered: var(--product-token-main-rendered);
  display: inline-flex;
  align-items: baseline;
  gap: 0.22em;
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;
  font: inherit;
  letter-spacing: inherit;
  vertical-align: baseline;
}

.product-name-token .product-name-word--main,
.product-name-token .product-name-word--soft {
  font: inherit;
  letter-spacing: inherit;
}

.product-name-token .product-name-word--main {
  color: var(--product-token-main-rendered);
}

.product-name-token .product-name-word--soft {
  color: var(--product-token-main-rendered);
}

.product-name-token.is-green {
  --product-token-main: var(--acid, #52ff2b);
  --product-token-main-on-bright: #183d0d;
  --product-token-soft: var(--product-token-main);
  --product-token-soft-on-bright: var(--product-token-main-on-bright);
}

.product-name-token.is-amber {
  --product-token-main: var(--amber-accent, #ffd447);
  --product-token-main-on-bright: #5b4710;
  --product-token-soft: var(--product-token-main);
  --product-token-soft-on-bright: var(--product-token-main-on-bright);
}

.product-name-token.is-violet {
  --product-token-main: var(--violet-accent, #bc13fe);
  --product-token-main-on-bright: #4d136b;
  --product-token-soft: var(--product-token-main);
  --product-token-soft-on-bright: var(--product-token-main-on-bright);
}

.product-name-token.is-red {
  --product-token-main: var(--red-accent, #ff5c5c);
  --product-token-main-on-bright: #6b1b1b;
  --product-token-soft: var(--product-token-main);
  --product-token-soft-on-bright: var(--product-token-main-on-bright);
}

.product-name-token.is-blue {
  --product-token-main: var(--blue-accent, #62a9ff);
  --product-token-main-on-bright: #173660;
  --product-token-soft: var(--product-token-main);
  --product-token-soft-on-bright: var(--product-token-main-on-bright);
}

.product-name-token.is-orange {
  --product-token-main: var(--orange-accent, #ff9c2f);
  --product-token-main-on-bright: #70430b;
  --product-token-soft: var(--product-token-main);
  --product-token-soft-on-bright: var(--product-token-main-on-bright);
}

.nav-cta .product-name-token,
.primary-btn .product-name-token {
  --product-token-main-rendered: var(--product-token-main-on-bright, var(--product-token-main));
  --product-token-soft-rendered: var(--product-token-main-rendered);
}