/* ===== DARK MODE ===== */

/* Honor system preference when no explicit choice is saved */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #1a1a1a;
    --color-text: #e8e4d0;
    --color-text-secondary: #c8c4b0;
    --color-text-muted: #a8a490;
    --color-border: rgba(255,255,255,.08);
    --color-border-hover: rgba(255,255,255,.2);
    --color-selection: rgba(255,255,255,.15);
    --color-link-border: rgba(255,255,255,.2);
    --color-link-border-hover: rgba(255,255,255,.5);
    --color-card-bg: rgba(255,255,255,.04);
    --color-card-bg-alt1: rgba(255,255,255,.05);
    --color-card-bg-alt2: rgba(255,255,255,.03);
    --color-card-bg-alt3: rgba(255,255,255,.06);
    --color-card-bg-hover: rgba(255,255,255,.07);
    --color-card-shadow: rgba(0,0,0,.3);
    --color-card-light: rgba(255,255,255,.06);
    --color-card-depth: rgba(0,0,0,.08);
    --color-overlay-bg: rgba(26, 26, 26, 0.97);
    --color-trigger-bg: rgba(26, 26, 26, 0.4);
    --color-trigger-bg-hover: rgba(26, 26, 26, 0.75);
    --color-trigger-bg-active: rgba(26, 26, 26, 0.85);
    --color-trigger-bg-open: rgba(26, 26, 26, 0.6);
    --color-warm: rgba(210, 180, 120, .12);
    --color-green: rgba(140, 180, 130, .12);
    --color-soft: rgba(200, 170, 130, .12);
    --color-neutral: rgba(170, 160, 140, .10);
    --color-accent: rgba(180, 150, 160, .10);
    --color-footer-border: rgba(255,255,255,.12);
    --color-hero-text: #e8e4d0;
    --color-hero-shadow: rgba(0,0,0,.45);
    --color-hero-shadow2: rgba(0,0,0,.6);
    --color-icon: #e8e4d0;
    --color-menu-price-bg: rgba(255,255,255,.06);
  }
  :root:not([data-theme="light"]) .bento-map-card iframe {
    filter: invert(0.9) hue-rotate(180deg) saturate(0.3) brightness(0.8);
  }
}

/* Explicit dark mode via toggle */
[data-theme="dark"] {
  --color-bg: #1a1a1a;
  --color-text: #e8e4d0;
  --color-text-secondary: #c8c4b0;
  --color-text-muted: #a8a490;
  --color-border: rgba(255,255,255,.08);
  --color-border-hover: rgba(255,255,255,.2);
  --color-selection: rgba(255,255,255,.15);
  --color-link-border: rgba(255,255,255,.2);
  --color-link-border-hover: rgba(255,255,255,.5);
  --color-card-bg: rgba(255,255,255,.04);
  --color-card-bg-alt1: rgba(255,255,255,.05);
  --color-card-bg-alt2: rgba(255,255,255,.03);
  --color-card-bg-alt3: rgba(255,255,255,.06);
  --color-card-bg-hover: rgba(255,255,255,.07);
  --color-card-shadow: rgba(0,0,0,.3);
  --color-card-light: rgba(255,255,255,.06);
  --color-card-depth: rgba(0,0,0,.08);
  --color-overlay-bg: rgba(26, 26, 26, 0.97);
  --color-trigger-bg: rgba(26, 26, 26, 0.4);
  --color-trigger-bg-hover: rgba(26, 26, 26, 0.75);
  --color-trigger-bg-active: rgba(26, 26, 26, 0.85);
  --color-trigger-bg-open: rgba(26, 26, 26, 0.6);
  --color-warm: rgba(210, 180, 120, .12);
  --color-green: rgba(140, 180, 130, .12);
  --color-soft: rgba(200, 170, 130, .12);
  --color-neutral: rgba(170, 160, 140, .10);
  --color-accent: rgba(180, 150, 160, .10);
  --color-footer-border: rgba(255,255,255,.12);
  --color-hero-text: #e8e4d0;
  --color-hero-shadow: rgba(0,0,0,.45);
  --color-hero-shadow2: rgba(0,0,0,.6);
  --color-icon: #e8e4d0;
  --color-menu-price-bg: rgba(255,255,255,.06);
}
[data-theme="dark"] .bento-map-card iframe {
  filter: invert(0.9) hue-rotate(180deg) saturate(0.3) brightness(0.8);
}

/* Smooth color transition on toggle */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, fill 0.35s ease !important;
}

/* Toggle button */
.dark-mode-toggle {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--color-trigger-bg);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  padding: 0;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease, box-shadow 0.3s ease;
}
.dark-mode-toggle:hover {
  transform: scale(1.1);
  background: var(--color-trigger-bg-hover);
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
}
.dark-mode-toggle:active {
  transform: scale(0.95);
  transition-duration: 0.1s;
}
.dark-mode-toggle svg {
  width: 20px;
  height: 20px;
  fill: var(--color-text);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.dark-mode-toggle .icon-sun { display: none; }
.dark-mode-toggle .icon-moon { display: block; }
[data-theme="dark"] .dark-mode-toggle .icon-sun { display: block; }
[data-theme="dark"] .dark-mode-toggle .icon-moon { display: none; }

/* System dark + no explicit theme */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dark-mode-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .dark-mode-toggle .icon-moon { display: none; }
}

/* Mobile positioning */
@media (max-width: 700px) {
  .dark-mode-toggle { top: 44px; left: 22px; width: 36px; height: 36px; border-radius: 10px; }
  .dark-mode-toggle svg { width: 18px; height: 18px; }
}