@layer components {
  [data-bonus-category="registration"], [data-bonus-summary="registration"] {
    --bonus-card-bg: #245c48;
    --bonus-card-border: #39785f;
    --bonus-card-accent: #85e4b0;
  }
  [data-bonus-category="promotions"], [data-bonus-summary="promotions"] {
    --bonus-card-bg: #284f79;
    --bonus-card-border: #4273a6;
    --bonus-card-accent: #96caff;
  }
  [data-bonus-category="loyalty"], [data-bonus-summary="loyalty"] {
    --bonus-card-bg: #62427e;
    --bonus-card-border: #8960a9;
    --bonus-card-accent: #e0b8ff;
  }
  [data-bonus-category] article.card, [data-bonus-summary].card {
    background: var(--bonus-card-bg);
    border-color: var(--bonus-card-border);
  }
  [data-bonus-category] article.card > .absolute.h-1 {
    background: var(--bonus-card-accent) !important;
  }
  [data-bonus-category] article.card > .bg-surface {
    background: #ffffff;
    border-color: var(--bonus-card-border);
  }
  [data-bonus-category] article.card .text-muted,
  [data-bonus-category] article.card .text-soft,
  [data-bonus-summary] .text-muted {
    color: #e1e8ef;
  }
  [data-bonus-summary] .text-accent {
    color: var(--bonus-card-accent);
  }
  [data-bonus-category] article.card,
  [data-bonus-category] article.card .text-ink,
  [data-bonus-category] article.card .text-ink-2,
  [data-bonus-summary].card .text-ink {
    color: #ffffff;
  }
  [data-bonus-category] article.card .text-accent,
  [data-bonus-category] article.card .text-accent-2,
  [data-bonus-category] article.card .text-brand {
    color: var(--bonus-card-accent);
  }
  [data-bonus-category] article.card > .bg-surface .text-ink,
  [data-bonus-category] article.card > .bg-surface .text-ink-2 {
    color: #172b45;
  }
  [data-bonus-category] article.card > .bg-surface .text-muted,
  [data-bonus-category] article.card > .bg-surface .text-soft {
    color: #4b596b;
  }
  [data-bonus-category] article.card > .bg-surface .text-accent-2 {
    color: #12643d;
  }
  [data-bonus-category] article.card .btn-accent,
  [data-bonus-category] article.card .btn-primary {
    background: #ffd166;
    border-color: #ffd166;
    color: #172b45;
    box-shadow: 0 3px 10px rgb(0 0 0 / 15%);
  }
  [data-bonus-category] article.card .btn-ghost {
    background: #ffffff;
    border-color: #ffffff;
    color: #172b45;
  }
  [data-bonus-category] article.card .btn-accent:hover,
  [data-bonus-category] article.card .btn-primary:hover {
    background: #ffe29b;
    border-color: #ffe29b;
  }
  [data-bonus-category] article.card .btn-ghost:hover {
    background: #e8eef5;
    border-color: #e8eef5;
  }
  [data-bonus-category] article.card a:focus-visible,
  [data-bonus-category] article.card summary:focus-visible {
    outline: 3px solid #ffd166;
    outline-offset: 3px;
  }
  [data-bonus-category] article.card :is(h3, h4, p, summary, li, .eyebrow, .text-ink, .text-ink-2, .text-ink-3, .text-muted, .text-soft),
  [data-bonus-summary].card :is(.text-ink, .text-muted) {
    color: #ffffff !important;
  }
  [data-bonus-category] article.card > :is(.bg-surface, .bg-emerald-50) :is(h3, h4, p, span, div, li, .text-ink, .text-ink-2, .text-muted, .text-soft) {
    color: #172b45 !important;
  }
  [data-bonus-category] article.card > :is(.bg-surface, .bg-emerald-50) .text-accent-2 {
    color: #12643d !important;
  }
  [data-bonus-category] article.card :is(.btn-accent, .btn-primary, .btn-ghost),
  [data-bonus-category] article.card :is(.btn-accent, .btn-primary, .btn-ghost) * {
    color: #172b45 !important;
  }
  [data-bonus-category] article.card .chip,
  [data-bonus-summary].card .chip {
    color: #ffffff !important;
    background: rgb(0 0 0 / 18%) !important;
    border-color: rgb(255 255 255 / 45%) !important;
  }
  [data-bonus-category] article.card .chip * {
    color: inherit !important;
  }

}