/* =========================================================
   Petit Lune — Dark Mode Styles
   Applies when html[data-theme="dark"] is set (JS toggle)
   and via system-level prefers-color-scheme: dark.
   Loaded on all pages alongside style.css.
   ========================================================= */

/* --- CSS custom property overrides for dark theme --- */
html[data-theme="dark"] {
  --bg: #131114;
  --surface: #1b181c;
  --surface-2: #231f25;
  --text: #f6f1ec;
  --text-soft: #b3a9a3;
  --border: #332d34;
  --accent: #dcb37a;
  --accent-ink: #1a1518;
  --deep: #2a2130;
  --deep-ink: #f6f1ec;
  --shadow-m: 0 18px 40px -20px rgba(0, 0, 0, .7);
  --shadow-l: 0 40px 90px -40px rgba(0, 0, 0, .85);
}

/* --- Map iframe: invert colors for dark mode readability --- */
html[data-theme="dark"] .map__frame iframe {
  filter: invert(90%) hue-rotate(180deg) contrast(1.1);
}

/* --- Header theme toggle icon states --- */
html[data-theme="dark"] .header__theme-icon--moon {
  opacity: 0;
  transform: rotate(60deg) scale(.6);
}

html[data-theme="dark"] .header__theme-icon--sun {
  opacity: 1;
  transform: rotate(0) scale(1);
}

/* --- Age card text: explicit dark mode overrides via media query --- */
@media (prefers-color-scheme: dark) {
  .age__no {
    color: var(--text-main, #ffffff);
  }

  .age__label {
    color: var(--text-soft, rgba(255, 255, 255, 0.65));
  }

  .age:hover .age__no {
    color: var(--accent, #e5c992);
  }
}

/* --- Why choose us & art icons in dark mode --- */
html[data-theme="dark"] .why__ico--leaf,
html[data-theme="dark"] .why__ico--organic {
  color: #72b578;
}

html[data-theme="dark"] .why__ico--scissors,
html[data-theme="dark"] .why__ico--craft {
  color: #c973b0;
}

html[data-theme="dark"] .why__ico--infinity,
html[data-theme="dark"] .why__ico--heirloom {
  color: #63a4e8;
}

html[data-theme="dark"] .why__ico--truck,
html[data-theme="dark"] .why__ico--returns {
  color: #f09b50;
}

html[data-theme="dark"] .why__ico--gift {
  color: #e5c992;
}

html[data-theme="dark"] .why__ico--heart {
  color: #f28b9b;
}

html[data-theme="dark"] .age__art {
  color: var(--accent, #dcb37a);
}