/* Plan tier badge and tab accent tokens */

:root {
  --tier-explorer-bg: #F1EEE8;
  --tier-explorer-fg: #6F685F;
  --tier-lite-bg: #E4F0E7;
  --tier-lite-fg: #397456;
  --tier-plus-bg: #E3ECF8;
  --tier-plus-fg: #315F96;
  --tier-pro-bg: #EAE4FA;
  --tier-pro-fg: #6747C7;
  --tier-max-bg: #EEE0FF;
  --tier-max-fg: #8B3FE3;
  --tier-business-bg: #F6E2E8;
  --tier-business-fg: #A83F68;
  --tier-enterprise-bg: #F3E5C3;
  --tier-enterprise-fg: #79551B;
  --tier-enterprise-border: #D8BE7C;
}

.plan-tier-badge--explorer {
  background: var(--tier-explorer-bg);
  color: var(--tier-explorer-fg);
}

.plan-tier-badge--lite {
  background: var(--tier-lite-bg);
  color: var(--tier-lite-fg);
}

.plan-tier-badge--plus {
  background: var(--tier-plus-bg);
  color: var(--tier-plus-fg);
}

.plan-tier-badge--pro {
  background: var(--tier-pro-bg);
  color: var(--tier-pro-fg);
}

.plan-tier-badge--max {
  background: var(--tier-max-bg);
  color: var(--tier-max-fg);
}

.plan-tier-badge--business {
  background: var(--tier-business-bg);
  color: var(--tier-business-fg);
}

.plan-tier-badge--enterprise {
  background: var(--tier-enterprise-bg);
  color: var(--tier-enterprise-fg);
  border: 1px solid var(--tier-enterprise-border);
}

.tool-list-tab.is-active[data-plan-filter="explorer"] {
  color: var(--tier-explorer-fg);
  border-bottom-color: var(--tier-explorer-fg);
}

.tool-list-tab.is-active[data-plan-filter="lite-solo"],
.tool-list-tab.is-active[data-plan-filter="lite-family"] {
  color: var(--tier-lite-fg);
  border-bottom-color: var(--tier-lite-fg);
}

.tool-list-tab.is-active[data-plan-filter="plus-solo"],
.tool-list-tab.is-active[data-plan-filter="plus-family"] {
  color: var(--tier-plus-fg);
  border-bottom-color: var(--tier-plus-fg);
}

.tool-list-tab.is-active[data-plan-filter="pro-solo"],
.tool-list-tab.is-active[data-plan-filter="pro-family"] {
  color: var(--tier-pro-fg);
  border-bottom-color: var(--tier-pro-fg);
}

.tool-list-tab.is-active[data-plan-filter="max-solo"],
.tool-list-tab.is-active[data-plan-filter="max-family"] {
  color: var(--tier-max-fg);
  border-bottom-color: var(--tier-max-fg);
}

.tool-list-tab.is-active[data-plan-filter="business"] {
  color: var(--tier-business-fg);
  border-bottom-color: var(--tier-business-fg);
}

.tool-list-tab.is-active[data-plan-filter="enterprise"] {
  color: var(--tier-enterprise-fg);
  border-bottom-color: var(--tier-enterprise-fg);
}

.feature-modal__plan-purchase--explorer {
  background: var(--tier-explorer-bg);
  color: var(--tier-explorer-fg);
  border-color: color-mix(in srgb, var(--tier-explorer-fg) 28%, var(--line));
}

.feature-modal__plan-purchase--lite {
  background: var(--tier-lite-bg);
  color: var(--tier-lite-fg);
  border-color: color-mix(in srgb, var(--tier-lite-fg) 28%, var(--line));
}

.feature-modal__plan-purchase--plus {
  background: var(--tier-plus-bg);
  color: var(--tier-plus-fg);
  border-color: color-mix(in srgb, var(--tier-plus-fg) 28%, var(--line));
}

.feature-modal__plan-purchase--pro {
  background: var(--tier-pro-bg);
  color: var(--tier-pro-fg);
  border-color: color-mix(in srgb, var(--tier-pro-fg) 28%, var(--line));
}

.feature-modal__plan-purchase--max {
  background: var(--tier-max-bg);
  color: var(--tier-max-fg);
  border-color: color-mix(in srgb, var(--tier-max-fg) 28%, var(--line));
}

.feature-modal__plan-purchase--business {
  background: var(--tier-business-bg);
  color: var(--tier-business-fg);
  border-color: color-mix(in srgb, var(--tier-business-fg) 28%, var(--line));
}

.feature-modal__plan-purchase--enterprise {
  background: var(--tier-enterprise-bg);
  color: var(--tier-enterprise-fg);
  border-color: var(--tier-enterprise-border);
}