/* One component palette for product cards and ranking tables.
   OS preference changes colors only when the operator explicitly selects auto. */
:is(.mga-box, .ranking-table-maker-root) {
    color-scheme: light;
    --mg-commerce-bg: #ffffff;
    --mg-commerce-border: #e3e6eb;
    --mg-commerce-text: #1e1e1e;
    --mg-commerce-text-muted: #6b7280;
    --mg-commerce-price: #c0392b;
    --mg-commerce-meta: #666666;
    --mg-commerce-rank: #b12704;
    --mg-commerce-feature: #333333;
    --mg-commerce-chip-bg: #f0f0f1;
    --mg-commerce-chip-text: #6b6b6b;
    --mg-commerce-accent-bg: #f0f9ff;
}
@media (prefers-color-scheme: dark) {
    :is(.mga-box, .ranking-table-maker-root)[data-theme="auto"] {
        color-scheme: dark;
        --mg-commerce-bg: #1f2430;
        --mg-commerce-border: #39414f;
        --mg-commerce-text: #e7e9ee;
        --mg-commerce-text-muted: #9aa3b2;
        --mg-commerce-price: #f87171;
        --mg-commerce-meta: #c2c8d2;
        --mg-commerce-rank: #f0a37a;
        --mg-commerce-feature: #d2d7e0;
        --mg-commerce-chip-bg: #2c3340;
        --mg-commerce-chip-text: #9aa3b2;
        --mg-commerce-accent-bg: #25304a;
    }
}
:is(.mga-box, .ranking-table-maker-root)[data-theme="dark"] {
    color-scheme: dark;
    --mg-commerce-bg: #1f2430;
    --mg-commerce-border: #39414f;
    --mg-commerce-text: #e7e9ee;
    --mg-commerce-text-muted: #9aa3b2;
    --mg-commerce-price: #f87171;
    --mg-commerce-meta: #c2c8d2;
    --mg-commerce-rank: #f0a37a;
    --mg-commerce-feature: #d2d7e0;
    --mg-commerce-chip-bg: #2c3340;
    --mg-commerce-chip-text: #9aa3b2;
    --mg-commerce-accent-bg: #25304a;
}