/* ============================================================
   THEMES — Light / Dark mode transitions
   ============================================================ */

/* Smooth transition when switching theme */
body,
.navbar,
.footer,
.dish-card,
.card,
.contact__icon,
.about__badge {
  transition:
    background-color var(--duration-slow) var(--ease-out),
    color            var(--duration-slow) var(--ease-out),
    border-color     var(--duration-slow) var(--ease-out);
}

/* ── Theme toggle icon states ────────────────────────────── */
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }

[data-theme="dark"] .theme-toggle .icon-sun  { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* ── Dark mode surface adjustments ──────────────────────── */
[data-theme="dark"] .menu { background: var(--color-surface); }
[data-theme="dark"] .contact { background: var(--color-bg); }

[data-theme="dark"] .menu__filter-btn {
  background: var(--color-surface-2);
  border-color: transparent;
}

[data-theme="dark"] .navbar__drawer { background: var(--color-primary); }

/* ── System preference auto-detect ──────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg:         #111110;
    --color-surface:    #1C1C1A;
    --color-surface-2:  #242420;
    --color-text:       #F0EDE6;
    --color-text-muted: #9A9A90;
    --color-text-light: #6A6A60;
    --color-border:     rgba(240,237,230,0.10);
    --color-overlay:    rgba(0,0,0,0.70);
  }
}