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

/* Zmienne są już zdefiniowane w variables.css pod [data-theme="dark"].
   Tu umieszczamy overrides dla komponentów, które wymagają
   specjalnego traktowania w dark mode. */

[data-theme="dark"] {
  /* Bottom nav mocniejszy kontrast */
  .bottom-nav {
    background: rgba(0, 0, 0, 0.45);
  }

  /* Wejście bottom sheet */
  .bottom-sheet {
    background: rgba(20, 0, 0, 0.85);
  }

  /* Inputy — ciemniejsze */
  .form-input {
    background: rgba(0, 0, 0, 0.20);
    border-color: rgba(255, 255, 255, 0.12);
  }

  .form-input:focus {
    background: rgba(0, 0, 0, 0.35);
    border-color: rgba(255, 255, 255, 0.35);
  }

  /* Skeleton — nieco jasniejszy kontrast */
  .skeleton {
    background: linear-gradient(
      90deg,
      rgba(255,255,255,0.04) 25%,
      rgba(255,255,255,0.10) 50%,
      rgba(255,255,255,0.04) 75%
    );
    background-size: 200% 100%;
  }

  /* Modal overlay ciemniejszy */
  .modal-overlay {
    background: rgba(0, 0, 0, 0.75);
  }

  .modal {
    background: rgba(20, 0, 0, 0.85);
    border-color: rgba(255, 255, 255, 0.10);
  }

  /* Choice cards */
  .choice-card:hover,
  .choice-card.selected {
    background: rgba(0, 0, 0, 0.35);
  }

  /* Glass card strong */
  .glass-card-strong {
    background: rgba(0, 0, 0, 0.30);
  }
}

/* Dark mode toggle animation */
.theme-toggle-icon {
  transition: var(--transition-spring);
}

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

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

.theme-toggle-moon {
  display: none;
}