/* LUPHYX Design Tokens — dark (default) + light theme */

:root {
  --lx-tk-bg: #12141a;
  --lx-tk-bg-elevated: #181b22;
  --lx-tk-surface: #1e2128;
  --lx-tk-text: #e2e5ea;
  --lx-tk-text-muted: #a9b1bd;
  --lx-tk-gold: #c4b48a;
  --lx-tk-gold-light: #d9ccb0;
  --lx-tk-tech: #72b8c6;
  --lx-tk-tech-dim: rgba(114, 184, 198, 0.1);
  --lx-tk-cta: #8f4f4a;
  --lx-tk-border: rgba(255, 255, 255, 0.08);
  --lx-tk-radius: 1.125rem;
  --lx-tk-shadow: 0 10px 36px rgba(0, 0, 0, 0.22);
  --lx-tk-mono: "IBM Plex Mono", "Consolas", monospace;
  --lx-tk-display: "Outfit", system-ui, sans-serif;
  --lx-tk-body: "DM Sans", system-ui, sans-serif;
}

body.lx-theme.lx-nanfu-home {
  --lx-tk-bg: #0e1526;
  --lx-tk-bg-elevated: #152038;
  --lx-tk-surface: #1a2848;
  --lx-tk-text: #f2f6fa;
  --lx-tk-text-muted: #b8c6d8;
  --lx-tk-gold: #c4b48a;
  --lx-tk-gold-light: #d9ccb0;
  --lx-tk-tech: #5ec8dc;
  --lx-tk-tech-dim: rgba(94, 200, 220, 0.1);
  --lx-tk-cta: #c45c55;
  --lx-tk-border: rgba(255, 255, 255, 0.08);
  --lx-tk-shadow: 0 10px 36px rgba(0, 0, 0, 0.22);
}

body.lx-theme-light {
  --lx-tk-bg: #f4f2ed;
  --lx-tk-bg-elevated: #ffffff;
  --lx-tk-surface: #ffffff;
  --lx-tk-text: #1a2332;
  --lx-tk-text-muted: #5c6678;
  --lx-tk-gold: #8a7a52;
  --lx-tk-gold-light: #6d6142;
  --lx-tk-tech: #3d8fa0;
  --lx-tk-tech-dim: rgba(61, 143, 160, 0.1);
  --lx-tk-cta: #9e5049;
  --lx-tk-border: rgba(26, 35, 50, 0.1);
  --lx-tk-shadow: 0 8px 28px rgba(26, 35, 50, 0.08);
  color: var(--lx-tk-text);
  background: linear-gradient(180deg, #f4f2ed 0%, #ebe8e1 50%, #f4f2ed 100%);
}

body.lx-theme-light.lx-nanfu-home .lx-header,
body.lx-theme-light .lx-header-stack {
  background: rgba(255, 255, 255, 0.88) !important;
  border-color: var(--lx-tk-border) !important;
}

body.lx-theme-light .lx-heading,
body.lx-theme-light h1,
body.lx-theme-light h2,
body.lx-theme-light h3 {
  color: var(--lx-tk-text) !important;
}

body.lx-theme-light .lx-text-muted,
body.lx-theme-light .lx-muted {
  color: var(--lx-tk-text-muted) !important;
}

body.lx-theme-light .product-card,
body.lx-theme-light .lx-card {
  background: var(--lx-tk-surface) !important;
  border-color: var(--lx-tk-border) !important;
  box-shadow: var(--lx-tk-shadow) !important;
}

body.lx-theme-light .lx-overlay {
  background: rgba(26, 35, 50, 0.35) !important;
}

body.lx-theme-light #checkout-modal > div,
body.lx-theme-light #cart-drawer > div,
body.lx-theme-light #member-modal > div,
body.lx-theme-light #orders-modal > div {
  background: #fff !important;
  color: var(--lx-tk-text) !important;
}