/* One palette for package cards and the current membership summary. */
:is(.membership-checkout__plan, .membership-tier-colors)[data-theme="neutral"] { --tier-accent: #d0b9f5; --tier-bright: #eee1ff; --tier-rgb: 183, 148, 232; --tier-ink: #28163f; }
:is(.membership-checkout__plan, .membership-tier-colors)[data-theme="plus"] { --tier-accent: #9fd5fb; --tier-bright: #e0f3ff; --tier-rgb: 113, 184, 237; --tier-ink: #122b40; }
:is(.membership-checkout__plan, .membership-tier-colors)[data-theme="pro"] { --tier-accent: #c6a5ff; --tier-bright: #f0e3ff; --tier-rgb: 172, 126, 250; --tier-ink: #29143f; }
:is(.membership-checkout__plan, .membership-tier-colors)[data-theme="ultra"] { --tier-accent: #85e2ca; --tier-bright: #d0fff0; --tier-rgb: 74, 196, 167; --tier-ink: #0b342e; }
:is(.membership-checkout__plan, .membership-tier-colors)[data-theme="max"] { --tier-accent: #f1c27f; --tier-bright: #fff0d3; --tier-rgb: 231, 167, 83; --tier-ink: #3e270c; }

.studio-header-popover .membership-tier-colors {
  --membership-color: var(--tier-accent);
  --membership-title: var(--tier-bright);
  --membership-muted: #b5b1bd;
}

:root[data-studio-theme="light"] .studio-header-popover .membership-tier-colors {
  --membership-muted: rgba(66, 75, 93, 1);
}
.studio-header-popover[data-canvas-floating-panel] .profile-membership.membership-tier-colors,
.studio-header-popover[data-canvas-floating-panel] .membership-tier-colors .membership-strip {
  background: linear-gradient(110deg, rgba(var(--tier-rgb), .18), rgba(var(--tier-rgb), .07)), #202123;
  border-color: rgba(var(--tier-rgb), .35);
}
:root[data-studio-theme="light"] .studio-header-popover[data-canvas-floating-panel] .profile-membership.membership-tier-colors, :root[data-studio-theme="light"] .studio-header-popover[data-canvas-floating-panel] .membership-tier-colors .membership-strip {
  background: linear-gradient(110deg, rgba(var(--tier-rgb), .18), rgba(var(--tier-rgb), .07)), rgba(255, 255, 255, 1);
}
.studio-header-popover .profile-membership.membership-tier-colors > div,
.studio-header-popover .membership-tier-colors .membership-symbol { color: var(--membership-color); }
.studio-header-popover .membership-tier-colors.profile-membership strong,
.studio-header-popover .membership-tier-colors .membership-strip strong { color: var(--membership-title); }
.studio-header-popover .membership-tier-colors.profile-membership small,
.studio-header-popover .membership-tier-colors .membership-strip small,
.studio-header-popover .membership-tier-colors .account-credit-progress__amount { color: var(--membership-muted); }
.studio-header-popover[data-canvas-floating-panel] .profile-membership.membership-tier-colors > button { color: var(--membership-color); }
.studio-header-popover[data-canvas-floating-panel] .membership-tier-colors .membership-strip > button {
  background: var(--tier-accent); color: var(--tier-ink);
}
.studio-header-popover[data-canvas-floating-panel] .membership-tier-colors .membership-strip > button:hover { background: var(--tier-bright); }
.studio-header-popover[data-canvas-floating-panel] .membership-tier-colors button:focus-visible { outline-color: var(--membership-color); }
.studio-header-popover .membership-tier-colors .account-credit-progress__label { color: var(--membership-color); }
.studio-header-popover .membership-tier-colors .account-credit-progress__track { background: rgba(var(--tier-rgb), .24); }
.studio-header-popover .membership-tier-colors .account-credit-progress__fill { background: var(--tier-accent); }
:root[data-studio-theme="light"] .studio-header-popover .membership-tier-colors {
  --membership-color: var(--tier-ink);
  --membership-title: var(--tier-ink);
  --membership-muted: #626b7b;
}
/* Legacy light-theme rules contain literal purple colors; keep the current
   tier's ink instead, with sufficient contrast on the tinted light surface. */
:root[data-studio-theme="light"] .studio-header-popover .profile-membership.membership-tier-colors > div,
:root[data-studio-theme="light"] .studio-header-popover .membership-tier-colors .membership-symbol,
:root[data-studio-theme="light"] .studio-header-popover .membership-tier-colors .account-credit-progress__label,
:root[data-studio-theme="light"] .studio-header-popover[data-canvas-floating-panel] .profile-membership.membership-tier-colors > button { color: var(--membership-color); }
:root[data-studio-theme="light"] .studio-header-popover .membership-tier-colors.profile-membership strong,
:root[data-studio-theme="light"] .studio-header-popover .membership-tier-colors .membership-strip strong { color: var(--membership-title); }
:root[data-studio-theme="light"] .studio-header-popover .membership-tier-colors.profile-membership small,
:root[data-studio-theme="light"] .studio-header-popover .membership-tier-colors .membership-strip small,
:root[data-studio-theme="light"] .studio-header-popover .membership-tier-colors .account-credit-progress__amount { color: var(--membership-muted); }
:root[data-studio-theme="light"] .studio-header-popover[data-canvas-floating-panel] .membership-tier-colors .membership-strip > button { background: var(--tier-accent); color: var(--tier-ink); }
:root[data-studio-theme="light"] .studio-header-popover[data-canvas-floating-panel] .membership-tier-colors .membership-strip > button:hover { background: var(--tier-bright); }