/* /static/styles.css */

/* Глобальні стилі для світлої теми */
body {
  font-family: system-ui, sans-serif;
  transition: background-color 0.3s, color 0.3s;
  background-color: #ffffff; /* Явний білий фон для світлої теми */
  color: #1f2937; /* Gray-900 для тексту */
}

/* Темна тема через клас .dark */
body.dark {
  background: linear-gradient(to top right, #0f172a, #3b82f6); /* Градієнт Medunar */
  color: #ffffff;
}

/* Стилі для input, textarea, select */
input,
textarea,
select {
  padding: 0.5rem;
  border-radius: 0.375rem;
  border: 1px solid #d1d5db; /* Gray-300 */
  background-color: #ffffff; /* Білий фон */
  color: #1f2937; /* Gray-900 */
}

.dark input,
.dark textarea,
.dark select {
  background-color: #1f2937; /* Gray-800 */
  color: #ffffff;
  border-color: #4b5563; /* Gray-600 */
}

/* Мобільне меню */
#mobile-menu {
  will-change: transform;
  background-color: #ffffff; /* Білий фон для світлої теми */
}

.dark #mobile-menu {
  background-color: #1f2937; /* Gray-800 для темної теми */
}

/* Перемикачі мови та теми */
.language-switcher select,
.theme-switcher select {
  padding: 0.5rem 0.75rem;
  border: 1px solid #d1d5db; /* Gray-300 */
  border-radius: 0.375rem;
  background-color: #f9fafb; /* Gray-50 */
  color: #1f2937; /* Gray-900 */
  font-size: 0.75rem;
  width: 4rem;
  cursor: pointer;
}

.dark .language-switcher select,
.dark .theme-switcher select {
  background-color: #1f2937; /* Gray-800 */
  color: #ffffff;
  border-color: #4b5563; /* Gray-600 */
}

.language-switcher select:focus,
.theme-switcher select:focus {
  outline: none;
  border-color: #2563eb; /* Blue-600 */
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}

.dark .language-switcher select:focus,
.dark .theme-switcher select:focus {
  border-color: #60a5fa; /* Blue-400 */
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2);
}

/* Стилі для заголовка */
header {
  background-color: rgba(255, 255, 255, 0.8); /* Прозорий білий фон */
  backdrop-filter: blur(10px);
}

.dark header {
  background-color: rgba(17, 24, 39, 0.8); /* Gray-900 з прозорістю */
}

/* Стилі для кнопок */
button,
a.bg-blue-600 {
  transition: background-color 0.2s ease-in-out;
}

/* Секції */
section.bg-gray-100 {
  background-color: #f3f4f6; /* Gray-100 */
}

.dark section.bg-gray-100 {
  background-color: #1f2937; /* Gray-800 */
}

section.bg-blue-100 {
  background-color: #dbeafe; /* Blue-100 */
}

.dark section.bg-blue-100 {
  background-color: #1e40af; /* Blue-800 */
}

/* Футер */
footer {
  background-color: #e5e7eb; /* Gray-200 */
}

.dark footer {
  background-color: #111827; /* Gray-900 */
}

/* Цитати */
blockquote {
  border-left-color: #2563eb; /* Blue-600 */
}

.dark blockquote {
  border-left-color: #60a5fa; /* Blue-400 */
}

/* Картки петицій */
article.bg-white {
  background-color: #ffffff;
}

.dark article.bg-white {
  background-color: #1f2937; /* Gray-800 */
}

/* Стилі для тексту в навігації */
nav a {
  color: #1f2937; /* Gray-900 */
}

.dark nav a {
  color: #ffffff;
}

/* Стилі для тексту в секціях */
section p,
section h2,
section h3,
section h4 {
  color: #1f2937; /* Gray-900 */
}

.dark section p,
.dark section h2,
.dark section h3,
.dark section h4 {
  color: #ffffff;
}