/* Theme tokens follow the existing compact layout and Manrope typography. */

:root,[data-theme="midnight"]{
 --lime:var(--accent);--lime-dark:var(--accent-hover);
 --bg:#111827;--surface:#1b2438;--ink:#f1f5ff;--muted:#adbcd8;--line:#344564;
 --accent:#a9c7ff;--accent-hover:#c8dcff;--accent-ink:#122346;--soft:#263c60;--field:#151e31;
 --hero:#213858;--secondary:#292d4d;--tertiary:#1e3545;--hover:#24324c;
 --danger:#ffb6bf;--danger-bg:#402638;--success:#a7e8d4;--success-bg:#203b39;
 --warning:#f1d395;--warning-bg:#3b3326;--tile:#253149;--shadow:#0004;
 color-scheme:dark;
}
[data-theme="pearl"]{
 --bg:#f4f6fa;--surface:#ffffff;--ink:#1b2a43;--muted:#53637a;--line:#ced6e2;
 --accent:#255fc4;--accent-hover:#194caa;--accent-ink:#ffffff;--soft:#e4edfc;--field:#f7f9fc;
 --hero:#e6edf8;--secondary:#eeebf6;--tertiary:#e6f0ef;--hover:#edf2f9;
 --danger:#a92737;--danger-bg:#fce9ec;--success:#226346;--success-bg:#e6f4ec;
 --warning:#77500d;--warning-bg:#fbf0d8;--tile:#e7edf5;--shadow:#233f6614;
 color-scheme:light;
}


html[data-theme],html[data-theme] body{background:var(--bg);color:var(--ink)}
html[data-theme] :is(.header,.footer,.menu-row,.settings-identity,.contact-detail,.summary,.receipt-row.total,.admin-offer){border-color:var(--line)}
html[data-theme] :is(.panel,.product,.metric,.order-card,.account,.contact-card,.table-wrap,.gift-empty,.empty,.quick-link,.bottom-nav,dialog){background:var(--surface);color:var(--ink);border-color:var(--line)}
html[data-theme] :is(.product,.contact-card,.quick-link):hover{background:var(--hover);border-color:var(--accent);box-shadow:0 6px 18px var(--shadow)}
html[data-theme] :is(.search,.field input,.field select,.field textarea,.input,.amount-option,.country,.recipient-tabs,.language-picker button,.receipt,.gift-recipient,.admin-offer){background:var(--field);color:var(--ink);border-color:var(--line)}
html[data-theme] :is(input,select,textarea){color:var(--ink)}
html[data-theme] ::placeholder{color:var(--muted);opacity:1}
html[data-theme] :is(.field input,.field select,.field textarea):focus,
html[data-theme] .search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--soft)}
html[data-theme] :is(button,a,input,select,textarea,summary):focus-visible{outline-color:var(--accent)}
html[data-theme] :is(.btn,.btn.lime,.btn.white,.success-icon){background:var(--accent);color:var(--accent-ink);box-shadow:none}
html[data-theme] :is(.btn,.btn.lime,.btn.white):hover{background:var(--accent-hover);box-shadow:none}
html[data-theme] :is(.btn.outline,.btn.ghost){background:transparent;color:var(--ink);border-color:var(--line)}
html[data-theme] :is(.btn.outline,.btn.ghost):hover{background:var(--hover)}
html[data-theme] .btn.danger{color:var(--danger);background:var(--danger-bg)}
html[data-theme] :is(.desktop-nav a,.bottom-nav a,.tab,.recipient-tabs button){color:var(--muted)}
html[data-theme] :is(.desktop-nav a:hover,.tab:not(.active):hover){background:var(--hover);color:var(--ink)}
html[data-theme] :is(.desktop-nav a.active,.bottom-nav a.active,.tab.active,.amount-option.active,.country.active,.recipient-tabs button.active,.language-picker button.active){background:var(--soft);color:var(--accent);border-color:var(--accent);box-shadow:none}
html[data-theme] .bottom-nav a.active svg{background:transparent;box-shadow:none}
html[data-theme] :is(.amount-option.active strong,.amount-option.active small){color:var(--accent)}
html[data-theme] .amount-option.active:after{display:none}
html[data-theme] :is(.avatar,.profile-head .avatar,.icon-box,.contact-card .icon-box,.copy-id,.close-btn,.settings-link,.product-price .arrow,.steps b){background:var(--soft);color:var(--accent);border-color:var(--line)}
html[data-theme] .avatar{box-shadow:0 0 0 2px var(--surface),0 0 0 3px var(--line)}
html[data-theme] :is(.settings-link,.copy-id):hover{background:var(--hover);border-color:var(--accent)}
html[data-theme] :is(.compact-intro h1 span,.brand-symbol span,.footer-brand span,.catalog-more,.catalog-more:hover,.section-heading a,.settings-admin,.contact-card b,.contact-card>svg,.settings-identity>svg,.contact-detail code,.purchase-notes svg,.benefit svg,.spark,.tiny-star,.compact-shortcuts .icon-box svg,.steam-title>.brand-icon){color:var(--accent)}
html[data-theme] :is(.footer-brand,.gift-explainer summary,.page-head .back:hover){color:var(--ink)}
html[data-theme] :is(.eyebrow,.compact-intro .eyebrow,.preferences>.eyebrow,.contact-details .eyebrow,.side-pick .eyebrow,.feature-poster .eyebrow,.ref-hero .eyebrow,.hero-card .eyebrow,.account-label small,.profile-id,.recipient-account small,.settings-identity small,.recipient-result,.provider-tag,.contact-card small,.contact-detail>span,.contact-detail small,.language-picker button>span,.compact-shortcuts .chevron,.purchase-notes,.store-status,.product-info p,.ref-banner p,.gift-ribbon p,.search svg){color:var(--muted)}
html[data-theme] :is(.product-price,.compact-products .product-price,.summary strong,.order-bottom strong){color:var(--ink)}
html[data-theme] :is(.star-spotlight,.stars-hero,.feature-poster,.ref-hero,.ref-banner,.gift-ribbon){background:var(--hero);color:var(--ink);border-color:var(--line)}
html[data-theme] .star-spotlight:before{display:none}
html[data-theme] .star-spotlight:after{opacity:.25}
html[data-theme] :is(.side-pick,.feature-poster.premium){background:var(--secondary);color:var(--ink);border-color:var(--line);box-shadow:none}
html[data-theme] :is(.steam-pick,.steam-hero,.feature-poster.steam-poster){background:var(--tertiary);color:var(--ink);border-color:var(--line);box-shadow:none}
html[data-theme] .side-pick:hover{border-color:var(--accent)}
html[data-theme] :is(.spotlight-copy p,.spotlight-bottom>span,.pick-price,.steam-pick .pick-price,.hero-card p,.capsule){color:var(--muted)}
html[data-theme] .spotlight-bottom strong{color:var(--ink)}
html[data-theme] :is(.capsule,.star-ring,.star-ring:after,.orbit){border-color:var(--line)}
html[data-theme] :is(.notice,.gift-pause,.announcement,.toast){background:var(--soft);color:var(--ink);border-color:var(--line)}
html[data-theme] :is(.notice.warning,.status.pending_payment,.status.claimed){background:var(--warning-bg);color:var(--warning)}
html[data-theme] :is(.status,.delivery-note){background:var(--success-bg);color:var(--success);border-color:var(--success)}
html[data-theme] .recipient-result.verified{background:var(--soft);color:var(--text);border-color:var(--line)}
html[data-theme] :is(.status.cancelled,.status.refunded){background:var(--danger-bg);color:var(--danger)}
html[data-theme] :is(.error,.form-error,.recipient-result.error){color:var(--danger)}
html[data-theme] .recipient-preview-info strong{color:var(--text)}
html[data-theme] .recipient-preview-info small{color:var(--muted)}
html[data-theme] :is(.recipient-confirmed,.recipient-verified-mark){border-color:var(--success);background:transparent}
html[data-theme] :is(.recipient-result.checking,.recipient-retry,.steps .active){color:var(--accent)}
html[data-theme] .steps .active b{background:var(--accent);color:var(--accent-ink)}
html[data-theme] .recipient-picker input[readonly]{background:var(--soft);color:var(--ink)}
html[data-theme] .check input{accent-color:var(--accent)}
html[data-theme] .store-status.ready i{background:var(--success)}
html[data-theme] .store-status i{background:var(--muted)}
html[data-theme] th{background:var(--field);color:var(--muted)}
html[data-theme] :is(.loader,.recipient-result.checking:before){border-color:var(--line);border-top-color:var(--accent)}
html[data-theme] dialog::backdrop{background:#0b0e1870}
/* Existing art rules use !important. Keep that override local to tile surfaces. */
html[data-theme] .product-art{background:var(--tile)!important;box-shadow:inset 0 0 0 1px var(--line);color:var(--accent)}
html[data-theme] .product-art>.brand-icon,html[data-theme] .product-art>svg{filter:none}
html[data-theme="pearl"] .product-art>.brand-icon,html[data-theme="pearl"] .product-art>svg{color:var(--accent)}
html[data-theme] .steam-title>.brand-icon{filter:none}
html[data-theme] .product-art>.game-icon{box-shadow:none}

.theme-picker{padding:0;margin:26px 0 0;border:0;min-width:0}
.theme-picker legend{font-size:12px;font-weight:750;margin-bottom:12px}
.theme-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.theme-option{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:8px;min-width:0;padding:7px 7px 12px;border:1px solid var(--line);border-radius:12px;background:var(--field);text-align:left;color:var(--ink)}
.theme-option:hover{border-color:var(--accent)}
.theme-option[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);background:var(--soft)}
.theme-option strong{font-size:11px;padding:0 2px;line-height:1.4}
.theme-option small{font-size:9px;color:var(--muted);line-height:1.5;padding:0 2px;min-height:27px}
.theme-check{position:absolute;right:11px;top:11px;background:var(--accent);color:var(--accent-ink);border-radius:50%;padding:3px;opacity:0}
.theme-check svg{width:11px;height:11px}
.theme-option[aria-pressed="true"] .theme-check{opacity:1}
.theme-preview{position:relative;display:block;height:59px;border-radius:7px;background:var(--preview-bg);border:1px solid var(--preview-line);overflow:hidden}
.theme-preview:before{content:"";position:absolute;left:7px;top:8px;width:24px;height:3px;border-radius:2px;background:var(--preview-accent)}
.theme-preview i{position:absolute;left:7px;right:7px;top:20px;height:17px;background:var(--preview-surface);border:1px solid var(--preview-line);border-radius:4px}
.theme-preview b,.theme-preview em{position:absolute;left:7px;width:32%;bottom:7px;height:7px;background:var(--preview-accent);border-radius:2px}
.theme-preview em{left:47%;background:var(--preview-surface);border:1px solid var(--preview-line)}
.theme-preview-midnight{--preview-bg:#111827;--preview-surface:#263c60;--preview-accent:#a9c7ff;--preview-line:#344564}
.theme-preview-pearl{--preview-bg:#f4f6fa;--preview-surface:#e4edfc;--preview-accent:#255fc4;--preview-line:#ced6e2}
@media(prefers-reduced-motion:reduce){.theme-option{transition:none}}