:root {
    --category-legend-fill: #c89543;
    --category-legend-ink: #263446;
    --category-icon-fill: #e8dec4;
    --category-icon-ink: #263446;
    --category-hero-fill: #7046a0;
    --category-hero-ink: #ffffff;
    --category-hero-accent: #bd763d;
    --category-hall-of-fut-fill: #59616b;
    --category-hall-of-fut-ink: #ffffff;
}

.shop-pack[data-pack-id="legend"],
.shop-pack-logo[data-category="legend"],
.shop-opening-stage[data-category="legend"],
.wheel-rotor [data-category="legend"],
.wheel-legend-item[data-category="legend"] {
    --category-fill: var(--category-legend-fill);
    --category-ink: var(--category-legend-ink);
}

.shop-pack[data-pack-id="icon"],
.shop-pack-logo[data-category="icon"],
.shop-opening-stage[data-category="icon"],
.wheel-rotor [data-category="icon"],
.wheel-legend-item[data-category="icon"] {
    --category-fill: var(--category-icon-fill);
    --category-ink: var(--category-icon-ink);
}

.shop-pack[data-pack-id="hero"],
.shop-pack-logo[data-category="hero"],
.shop-opening-stage[data-category="hero"],
.wheel-rotor [data-category="hero"],
.wheel-legend-item[data-category="hero"] {
    --category-fill: var(--category-hero-fill);
    --category-ink: var(--category-hero-ink);
}

.shop-pack[data-pack-id="hall-of-fut"],
.shop-pack-logo[data-category="hall-of-fut"],
.shop-opening-stage[data-category="hall-of-fut"],
.wheel-rotor [data-category="hall-of-fut"],
.wheel-legend-item[data-category="hall-of-fut"] {
    --category-fill: var(--category-hall-of-fut-fill);
    --category-ink: var(--category-hall-of-fut-ink);
}