/* Customer storefront theme only. Loaded by frontend/user, never the admin entry.
 * Both existing theme-switcher positions retain the approved black/gold identity:
 * graphite (default) and deeper charcoal (.dark). No stored preference is changed.
 * This stylesheet changes presentation, never order/payment/visibility conditions.
 */
:root, html.dark, html .vault-scope, html body.vault-tokens {
  color-scheme: dark;
  --ui-bg-page: #151718;
  --ui-bg-elevated: #252727;
  --ui-bg-soft: #2c2d2b;
  --ui-bg-muted: #202222;
  --ui-bg-overlay: #202322ed;
  --ui-bg-overlay-strong: #242625f7;
  --ui-text-primary: #f4ede1;
  --ui-text-secondary: #d1c9bc;
  --ui-text-muted: #aaa397;
  --ui-text-on-accent: #211b12;
  --ui-border: #6b604b80;
  --ui-border-strong: #a78b5e;
  --ui-accent: #e5bd78;
  --ui-accent-hover: #f5d49b;
  --ui-accent-soft: #e5bd781a;
  --ui-accent-warm: #e7bb76;
  --ui-accent-warm-hover: #ffdfa5;
  --ui-accent-warm-soft: #e7bb761a;
  --ui-success: #98d6a0;
  --ui-success-soft: #285b382e;
  --ui-warning: #edc381;
  --ui-warning-soft: #8060292e;
  --ui-danger: #ffaaa0;
  --ui-danger-soft: #743d362e;
  --ui-info: #d7c5a5;
  --ui-info-soft: #aa8a551a;
  --ui-focus-ring: #f5d49b55;
  --ui-price-primary: #edc381;
  --ui-price-promotion: #ffb9aa;
  --ui-price-original: #aaa397;
  --ui-shadow-1: 0 6px 18px -12px #0009;
  --ui-shadow-2: 0 12px 32px -18px #000b;
  --ui-shadow-3: 0 22px 54px -22px #000c;
  --ui-shadow-soft: 0 10px 28px -18px #000a;
  --ui-shadow-card: 0 18px 40px -24px #000c;
  --bg-brand-gradient: linear-gradient(115deg, #f0d198, #d5a865);
  --bg-panel-gradient: linear-gradient(125deg, #ffffff03, #00000005);
  --bg-header: #151718f5;
  --bg-danger-fill: #a83e36;
  --bg-success-fill: #28603c;
  --bg-qr-paper: #fff;
  --bg-gold-ink: #211b12;
}
/* The optional storefront template defines its own local tokens. Keep its
 * inheritance and teleported surfaces within the same brand if enabled later. */
html .vault-scope, html body.vault-tokens, html.dark .vault-scope, html.dark body.vault-tokens {
  --bg: var(--ui-bg-page); --bg-warm: var(--ui-bg-muted);
  --surface: var(--ui-bg-elevated); --surface-2: var(--ui-bg-soft);
  --ink: var(--ui-text-primary); --ink-2: var(--ui-text-secondary); --ink-3: var(--ui-text-muted);
  --border: var(--ui-border); --border-strong: var(--ui-border-strong);
  --red: var(--ui-accent); --red-strong: var(--ui-accent-hover); --red-soft: var(--ui-accent-soft);
  --gold: var(--ui-accent-warm); --gold-strong: var(--ui-accent-warm-hover); --gold-soft: var(--ui-warning-soft);
  --teal: var(--ui-success); --teal-strong: var(--ui-success); --teal-soft: var(--ui-success-soft);
  --plum: var(--ui-accent); --plum-soft: var(--ui-accent-soft);
  --on-red: var(--bg-gold-ink); --on-gold: var(--bg-gold-ink); --on-teal: #102918;
  --success: var(--ui-success); --warning: var(--ui-warning); --danger: var(--ui-danger);
}
html.dark, html.dark .vault-scope, html.dark body.vault-tokens {
  --ui-bg-page: #101213;
  --ui-bg-elevated: #1d2020;
  --ui-bg-soft: #252725;
  --ui-bg-muted: #191c1c;
  --ui-bg-overlay: #191c1bed;
  --ui-bg-overlay-strong: #1d201ff7;
  --ui-border: #6b604b66;
  --bg-header: #101213f5;
}

html, body, #app {
  background-color: var(--ui-bg-page);
  color: var(--ui-text-primary);
  font-family: "Nunito Sans", "Microsoft YaHei", "PingFang SC", sans-serif;
}
body { -webkit-font-smoothing: antialiased; }
::selection { color: #fff7e7; background: #826236; }
body :is(input, textarea, select) { accent-color: var(--ui-accent); caret-color: var(--ui-accent); }
body :is(input, textarea)::placeholder { color: var(--ui-text-muted); opacity: 1; }
body :is(button, a, input, textarea, select, [role="button"]):focus-visible {
  outline: 2px solid var(--ui-accent-hover);
  outline-offset: 3px;
}

/* Identical brand shell on catalogue, product, checkout and all account routes. */
body #app nav.fixed.top-0 {
  background: var(--bg-header) !important;
  border-color: var(--ui-border-strong) !important;
  box-shadow: 0 2px 15px #0002;
}
body #app nav.fixed.top-0 > .container { max-width: 1600px; padding-inline: 28px; }
body #app nav.fixed.top-0 .theme-wordmark {
  border: 0; border-radius: 0; padding: 0; background: none; box-shadow: none;
}
body #app nav.fixed.top-0 .theme-wordmark-text {
  color: var(--ui-text-primary); font-size: 25px; font-weight: 900; letter-spacing: .04em;
}
body #app nav.fixed.bottom-0 { background: var(--bg-header); border-color: var(--ui-border-strong); }
body #app footer { background: var(--ui-bg-page); border-color: var(--ui-border); }
body #dj-global-back-button {
  color: var(--ui-text-secondary) !important;
  background: var(--ui-bg-overlay-strong) !important;
  border-color: var(--ui-border-strong) !important;
  box-shadow: var(--ui-shadow-1) !important;
}
html body #dj-storefront-recovery { background: var(--ui-bg-elevated); color: var(--ui-text-primary); border-color: var(--ui-border-strong); }
html body #dj-storefront-recovery p { color: var(--ui-text-secondary); }
html body #dj-storefront-recovery button { background: var(--bg-brand-gradient); color: var(--bg-gold-ink); }
html body #dj-storefront-recovery a { color: var(--ui-accent); }
html body #dj-storefront-recovery :is(button,a) { border-color: var(--ui-border-strong); }
html body #dj-storefront-recovery button:hover { background: var(--ui-accent-hover); }
html body #dj-storefront-recovery a:hover { background: var(--ui-accent-soft); }
html body #dj-storefront-recovery :is(button,a):focus-visible { outline-color: var(--ui-accent-hover); }

/* Component surfaces and primary actions, including body-teleported dialogs. */
body :is(.bg-card, .bg-popover) { background-image: var(--bg-panel-gradient); }
body :is(button, a).bg-primary {
  background-image: var(--bg-brand-gradient);
  color: var(--bg-gold-ink);
  border-color: #f0cf92;
  box-shadow: 0 2px 8px #0003, inset 0 1px #ffffff24;
}
body :is(button, a).bg-primary:hover { background-image: linear-gradient(115deg, #f7dfae, #e0ba7e); }
body :is(button, a).bg-primary:active { background-image: linear-gradient(115deg, #d8b579, #cda15f); }
body :is(button, a).bg-destructive { background-color: var(--bg-danger-fill); color: #fff5ef; }
body [role="dialog"] { border-color: var(--ui-border-strong); }
body [role="alert"] { background-color: var(--ui-bg-overlay-strong); }
body [data-reka-popper-content-wrapper] { --ui-bg-overlay: var(--ui-bg-overlay-strong); }
/* Older deployed checkout decorates the Alipay note with inline colors.
 * Scope to that branded note, retain its blue payment icon and footer. */
body #app [role="note"][style*="rgb(22, 119, 255)"] {
  background: var(--ui-bg-muted) !important;
  border-color: var(--ui-border-strong) !important;
  box-shadow: var(--ui-shadow-1) !important;
}
body #app [role="note"][style*="rgb(22, 119, 255)"] [style*="color: rgb(9, 88, 217)"] { color: #69a7ff !important; }
body #app [role="note"][style*="rgb(22, 119, 255)"] [style*="color: rgb(51, 65, 85)"] { color: var(--ui-text-secondary) !important; }

/* Rich text must remain readable without relying on the old .dark switch.
 * Do not filter, recolor or replace product, tutorial, invoice or QR images.
 */
body .prose {
  --tw-prose-body: var(--ui-text-secondary);
  --tw-prose-headings: var(--ui-text-primary);
  --tw-prose-lead: var(--ui-text-secondary);
  --tw-prose-links: var(--ui-accent);
  --tw-prose-bold: var(--ui-text-primary);
  --tw-prose-counters: var(--ui-text-muted);
  --tw-prose-bullets: var(--ui-border-strong);
  --tw-prose-hr: var(--ui-border);
  --tw-prose-quotes: var(--ui-text-primary);
  --tw-prose-quote-borders: var(--ui-border-strong);
  --tw-prose-captions: var(--ui-text-muted);
  --tw-prose-code: var(--ui-text-primary);
  --tw-prose-pre-code: var(--ui-text-primary);
  --tw-prose-pre-bg: var(--ui-bg-muted);
  --tw-prose-th-borders: var(--ui-border-strong);
  --tw-prose-td-borders: var(--ui-border);
  color: var(--ui-text-secondary);
}
body .prose :is(h1,h2,h3,h4,strong,th) { color: var(--ui-text-primary); }
body .prose a { color: var(--ui-accent); text-underline-offset: .2em; }
body .prose :is(code,pre) { color: var(--ui-text-primary); background-color: var(--ui-bg-muted); }
body .prose blockquote { color: var(--ui-text-secondary); border-color: var(--ui-border-strong); }

/* Exact legacy utility colors used in delivery, discounts, legal/auth and forms.
 * Keep status hues semantic. The utilities layer matches the historical
 * !important color adapters; unlayered !important would lose to that layer.
 */
@layer utilities {
  body :is(.text-blue-500,.text-blue-600,.text-blue-700,.text-blue-800,.text-blue-900,
    .text-sky-600,.text-sky-700,.text-sky-800,.text-indigo-600,.text-purple-600) { color: var(--ui-accent) !important; }
  body :is(.text-red-500,.text-red-600,.text-red-700,.text-rose-500,.text-rose-600,.text-rose-700) { color: var(--ui-danger) !important; }
  body :is(.text-green-600,.text-green-700,.text-emerald-600,.text-emerald-700) { color: var(--ui-success) !important; }
  body :is(.text-amber-600,.text-amber-700,.text-orange-600,.text-orange-700) { color: var(--ui-warning) !important; }
  body :is(.text-gray-800,.text-slate-900,.text-slate-800,.text-zinc-900) { color: var(--ui-text-primary) !important; }
  body :is(.text-slate-600,.text-slate-500,.text-zinc-500) { color: var(--ui-text-muted) !important; }
  body :is(.bg-blue-50,.bg-blue-100,.bg-blue-50\/50,.bg-blue-50\/70,.bg-sky-50,.bg-indigo-50,.bg-purple-50) { background-color: var(--ui-accent-soft) !important; }
  body :is(.bg-amber-50,.bg-amber-100,.bg-orange-50) { background-color: var(--ui-warning-soft) !important; }
  body :is(.bg-red-50,.bg-red-100,.bg-rose-50) { background-color: var(--ui-danger-soft) !important; }
  body :is(.bg-green-50,.bg-green-100,.bg-emerald-50) { background-color: var(--ui-success-soft) !important; }
  body :is(.bg-blue-500,.bg-blue-600,.bg-blue-700) { background-color: var(--ui-accent) !important; color: var(--bg-gold-ink) !important; }
  body :is(.hover\:bg-blue-600,.hover\:bg-blue-700):hover { background-color: var(--ui-accent-hover) !important; color: var(--bg-gold-ink) !important; }
  body .active\:bg-blue-800:active { background-color: #d5a865 !important; }
  body .bg-emerald-600 { background-color: var(--bg-success-fill) !important; color: #edffed !important; }
  body :is(.border-blue-100,.border-blue-200,.border-blue-300,.border-blue-400,.border-blue-500,.border-sky-200,.border-indigo-200) { border-color: var(--ui-border-strong) !important; }
  body :is(.border-red-200,.border-red-300,.border-red-500,.border-rose-200) { border-color: #ba685b !important; }
  body :is(.border-amber-200,.border-orange-200) { border-color: #957342 !important; }
  body :is(.border-green-200,.border-emerald-200) { border-color: #538762 !important; }
  body :is(.from-blue-50\/80,.from-blue-50,.from-indigo-50) { --tw-gradient-from: var(--ui-bg-soft) !important; }
  body .to-white { --tw-gradient-to: var(--ui-bg-elevated) !important; }
  html.dark body :is(.dark\:text-blue-200,.dark\:text-blue-300,.dark\:text-blue-400,.dark\:text-sky-300,.dark\:text-sky-400) { color: var(--ui-accent) !important; }
  html.dark body :is(.dark\:bg-blue-950\/30,.dark\:bg-blue-950\/40,.dark\:bg-blue-950\/50) { background-color: var(--ui-accent-soft) !important; }
  html.dark body :is(.dark\:border-blue-800,.dark\:border-blue-900) { border-color: var(--ui-border-strong) !important; }
  html.dark body .dark\:from-blue-950\/50 { --tw-gradient-from: var(--ui-bg-soft) !important; }
  body :is(button,a).bg-primary { color: var(--bg-gold-ink) !important; }
  body :is(button,a).bg-destructive { color: #fff5ef !important; }
  body :is(.bg-info,.bg-success).text-white { color: var(--bg-gold-ink) !important; }
  body .bg-destructive.text-white { background-color: var(--bg-danger-fill) !important; color: #fff5ef !important; }
  /* Preserve recognizable Alipay blue while keeping its label legible in both depths. */
  body .text-\[\#0958d9\] { color: #69a7ff !important; }
  body :is(.bg-white,.bg-secondary):has(> img[alt="QR Code"]),
  body :is(img[alt="QR Code"],img[alt="2FA QR"]) { background-color: var(--bg-qr-paper) !important; }
}

/* Existing static delivery and notice modules: colors only, retain all existing
 * hidden/state conditions, payload wrapping, copy controls and image exceptions.
 */
:root body .hds-delivery-priority-card { border-color: var(--ui-border-strong) !important; }
:root body .hds-cdk-label { border-color: var(--ui-border-strong); background: var(--ui-accent-soft); color: var(--ui-accent); }
:root body .hds-cdk-label__badge { background: var(--bg-brand-gradient); color: var(--bg-gold-ink); }
:root body .hds-cdk-label__hint { color: var(--ui-text-secondary); }
:root body .hds-cdk-code-card { background: var(--ui-bg-muted) !important; border-color: var(--ui-border-strong) !important; color: var(--ui-text-primary) !important; }
:root body .dj-redemption-copy button { background: var(--bg-brand-gradient); color: var(--bg-gold-ink); border-color: var(--ui-border-strong); }
:root body .dj-redemption-copy button:hover { background: var(--ui-accent-hover); border-color: var(--ui-accent); }
:root body .dj-redemption-copy button:focus-visible { outline-color: var(--ui-accent-hover); }
:root body :is([data-account-delivery-label="true"],[data-gmail-delivery-label="true"]) > div::after { color: var(--ui-accent); }
:root body .hds-group-notice-card {
  background: radial-gradient(ellipse at 10% 10%, #76533930, transparent 65%), var(--ui-bg-elevated);
  border-color: #ad7953; box-shadow: var(--ui-shadow-card);
}
:root body .hds-group-notice-card::before { background: var(--bg-brand-gradient); }
:root body .hds-group-notice-card__eyebrow { background: var(--bg-brand-gradient); color: var(--bg-gold-ink); }
:root body :is(.hds-group-notice-card__title,.hds-group-notice-card__message) { color: var(--ui-accent-hover); }
:root body .hds-group-notice-card__hint { color: var(--ui-text-secondary); }
:root body .hds-group-notice-card__image-frame { background: #fff; border-color: var(--ui-border-strong); }
:root body :is(.dj-redemption-guide,.dj-checkout-email-note) { background: var(--ui-danger-soft); color: var(--ui-danger); border-color: #ba685b; }
:root body .dj-redemption-guide__actions button { background: var(--bg-danger-fill); border-color: #bd7569; color: #fff5ef; }
:root body .dj-redemption-guide__actions button + button { background: var(--ui-bg-elevated); color: var(--ui-danger); }
:root body :is([data-dj-redemption-code],[data-dj-redemption-instructions])::before { color: var(--ui-danger); }
:root body [data-dj-redemption-address] { color: var(--ui-danger) !important; }
:root body .dj-invoice-preview { background: var(--ui-bg-elevated); color: var(--ui-text-primary); border-color: var(--ui-border-strong); }
:root body .dj-invoice-preview__header h3 { color: var(--ui-accent); }
:root body .dj-invoice-preview__close { background: var(--ui-accent-soft); color: var(--ui-accent); border-color: var(--ui-border-strong); }
:root body .dj-invoice-preview__caption { color: var(--ui-text-muted); }
:root body .dj-invoice-preview__image { background: #fff; }
:root body .dj-invoice-notice { background: var(--ui-danger-soft); color: var(--ui-danger); border-color: #aa7260; }
:root body :is(.dj-invoice-notice__details,.dj-invoice-notice__reference) { background: var(--ui-bg-soft); color: var(--ui-accent); border-color: var(--ui-border-strong); }
:root body :is(.dj-invoice-notice__details,.dj-invoice-notice__reference,.dj-invoice-preview__close):hover { background: var(--ui-bg-muted); color: var(--ui-accent-hover); }
:root body .dj-invoice-notice__request-fields { background: var(--ui-bg-muted); color: var(--ui-text-secondary); }

@media(max-width:767px) {
  body #app nav.fixed.top-0 > .container { padding-inline: 16px; }
  body #app nav.fixed.top-0 .theme-wordmark-text { font-size: 20px; }
}
@media(prefers-reduced-motion:reduce) {
  body :is(.theme-slide-up,.theme-bounce-in,.theme-skeleton) { animation: none; }
}