/* Ciemny motyw – nadpisuje zmienne z style.css / login.html */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #12151c;
  --surface: #1b2030;
  --text: #e6e9f0;
  --muted: #9aa4b8;
  --accent: #5b8def;
  --accent-dark: #3f6fd1;
  --border: #2c3447;
  --header-bg: #0b0e14;
}
:root[data-theme="light"] { color-scheme: light; }

:root[data-theme="dark"] .field input { background: var(--surface); }
:root[data-theme="dark"] .header__logo { background: #222a3b; }

/* Przycisk zmiany motywu */
.header__actions { display: flex; align-items: center; gap: 12px; }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  color: #fff;
  background: transparent;
  border: 1px solid #4a5570;
  border-radius: 50%;
  cursor: pointer;
}
.theme-toggle:hover { background: #2b3550; }
.theme-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.theme-toggle svg { width: 24px; height: 24px; }

/* jasny motyw -> słońce, ciemny -> księżyc */
.theme-toggle__moon { display: none; }
:root[data-theme="dark"] .theme-toggle__sun { display: none; }
:root[data-theme="dark"] .theme-toggle__moon { display: block; }