/* Motywy kolorystyczne KUFA — wspólne dla wszystkich stron (kółka wyboru koloru: motywy.js) */
:root {
  --k-bg: #f2ebe6; --k-bg-rgb: 242, 235, 230;
  --k-accent: #eb1c24; --k-accent-rgb: 235, 28, 36;
  --k-ink: #17181a; --k-ink-rgb: 23, 24, 26;
  --k-dark: #0c0d0e; --k-dark-rgb: 12, 13, 14;
  --k-bg2: #e5ddd6; --k-card: #fbf8f5; --k-input: #ffffff;
  --k-text: #2b2b2b; --k-muted: #666666;
}
html.theme-dark {
  --k-bg: #121314; --k-bg-rgb: 18, 19, 20;
  --k-accent: #ff3b3b; --k-accent-rgb: 255, 59, 59;
  --k-ink: #f2ebe6; --k-ink-rgb: 242, 235, 230;
  --k-dark: #f2ebe6; --k-dark-rgb: 242, 235, 230;
  --k-bg2: #1e1f21; --k-card: #1a1b1d; --k-input: #1a1b1d;
  --k-text: #d9d4cf; --k-muted: #9e9a96;
}
html.theme-neon {
  --k-bg: #dcff3d; --k-bg-rgb: 220, 255, 61;
  --k-accent: #5b00ff; --k-accent-rgb: 91, 0, 255;
  --k-ink: #14002e; --k-ink-rgb: 20, 0, 46;
  --k-dark: #14002e; --k-dark-rgb: 20, 0, 46;
  --k-bg2: #c9f02a; --k-card: #f1ffb3; --k-input: #ffffff;
}
html.theme-white {
  --k-bg: #ffffff; --k-bg-rgb: 255, 255, 255;
  --k-accent: #eb1c24; --k-accent-rgb: 235, 28, 36;
  --k-ink: #17181a; --k-ink-rgb: 23, 24, 26;
  --k-dark: #0c0d0e; --k-dark-rgb: 12, 13, 14;
  --k-bg2: #f0f0f0; --k-card: #f7f7f7; --k-input: #ffffff;
}
html.theme-gray {
  --k-bg: #d4d5d7; --k-bg-rgb: 212, 213, 215;
  --k-accent: #e0141c; --k-accent-rgb: 224, 20, 28;
  --k-ink: #17181a; --k-ink-rgb: 23, 24, 26;
  --k-dark: #2b2c2e; --k-dark-rgb: 43, 44, 46;
  --k-bg2: #c3c4c6; --k-card: #e6e7e8; --k-input: #f2f2f3;
}
/* Motyw ciemny: logo całkowicie białe, pola formularzy z jasnym tekstem */
html.theme-dark img[alt="KUFA design"] { filter: brightness(0) invert(1); }
html.theme-dark input, html.theme-dark textarea, html.theme-dark select { color: var(--k-ink); }
html, body { background-color: var(--k-bg); transition: background-color 0.3s ease, color 0.3s ease; }

.theme-dots { display: flex; align-items: center; gap: 6px; }
/* Aktywne kółko jest minimalnie podniesione i ma obwódkę (czarną, w motywie ciemnym białą) */
.theme-dot { width: 0.425cm; height: 0.425cm; border-radius: 50%; padding: 0; cursor: pointer; border: none; transition: transform 0.25s ease; }
.theme-dot:not(.active):hover { transform: translateY(-1px); }
.theme-dot.active { transform: translateY(-3px); box-shadow: inset 0 0 0 2px #0c0d0e; }
html.theme-dark .theme-dot.active { box-shadow: inset 0 0 0 2px #ffffff; }
.theme-dot.hop { animation: themeDotHop 0.4s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes themeDotHop { 0% { transform: translateY(0); } 55% { transform: translateY(-5px); } 100% { transform: translateY(-3px); } }
/* „Przypominajka” co 12 s: kółka po kolei podskakują (raz od lewej, raz od prawej) */
.theme-dot.wave { animation: themeDotWave 0.45s ease; }
.theme-dot.active.wave { animation: themeDotWaveActive 0.45s ease; }
@keyframes themeDotWave { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-4px); } }
@keyframes themeDotWaveActive { 0%, 100% { transform: translateY(-3px); } 45% { transform: translateY(-7px); } }
.theme-dot[data-theme="light"] { background: #f2ebe6; }
.theme-dot[data-theme="white"] { background: #ffffff; }
.theme-dot[data-theme="gray"] { background: #d4d5d7; }
.theme-dot[data-theme="dark"] { background: #121314; }
.theme-dot[data-theme="neon"] { background: #dcff3d; }