:root {
    color-scheme: light dark;
}

body,
.sf-body {
    background: var(--color-bg);
    color: var(--color-text);
}

.sf-header,
.sf-footer,
.sf-theme-toggle,
.sf-cart-button,
.sf-select select,
.sf-nav__link--ghost,
.sf-product__gallery,
.sf-product__info,
.sf-product-details article,
.sf-account .sf-account-card,
.sf-cookie,
.sf-cookie-modal__dialog,
.sf-cart {
    background: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border);
}

.sf-header {
    background: var(--header-surface);
}

.sf-hero__card,
.sf-empty,
.sf-trust__logos span,
.sf-cookie-option__switch input,
.sf-cart__item,
.sf-legal pre {
    background: var(--color-bg-alt);
    color: var(--color-text);
    border-color: var(--color-border);
}

.sf-cta__box {
    background:
        radial-gradient(circle at top, rgba(58, 187, 38, 0.16), transparent 58%),
        var(--color-surface);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
}

.sf-cookie-modal,
.sf-cart-overlay {
    background: var(--color-overlay);
}

.sf-cart {
    box-shadow: -18px 0 48px rgba(0, 0, 0, 0.22);
}

.sf-badge {
    background: rgba(58, 187, 38, 0.12);
    color: var(--color-accent);
}

.sf-badge--featured {
    background: var(--color-text);
    color: var(--color-surface);
}

.sf-badge--outline {
    background: transparent;
    color: var(--color-text);
}

.sf-price__omnibus,
.sf-lead,
.sf-account .sf-account-helper,
.sf-account .sf-muted,
.sf-cookie-modal__header p,
.sf-cookie-option__text p,
.sf-cart__empty {
    color: var(--color-text-muted);
}

input:focus,
select:focus,
textarea:focus,
.sf-product__thumbs button:focus,
.sf-gallery-controls button:focus,
.sf-cart__close:focus,
.sf-theme-toggle:focus,
.sf-cart-button:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

[data-theme="dark"] body,
html[data-theme="dark"] body {
    background: var(--color-bg);
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) body {
        background: var(--color-bg);
    }
}