/* --- БАЗА ---- */
/* Тёмная тема (по умолчанию) */
:root {
  --color-bg: #121212;
  --color-text: #d7d7d7;
  --color-primary: #3BBE98; /* Основной цвет */
  --color-accent: #3BBE98;  /* Акцентный цвет */
  --color-success: #4AD4B3; 
  --color-error: #E85656;
  --color-card: #181818;
  --color-border: #2A2A2A;
  --color-primary-hover: #267d64; /* Усиленный темный цвет при наведении */
}

/* Светлая тема */
[data-theme="light"] {
  --color-bg: #FAF8F2;
  --color-text: #272727;
  --color-primary: #3BBE98;
  --color-accent: #4AD4B3;
  --color-success: #4AD4B3;
  --color-error: #D64545;
  --color-card: #FFFFFF;
  --color-border: #E0D9C8;
  --color-primary-hover: #2F9A7B; /* Усиленный темный цвет при наведении */
}

/* --- Общие стили ---- */
body {
  font-family: 'Inter', sans-serif;
  background-color: var(--color-bg);
  color: var(--color-text);
  margin: 0;
  padding: 0;
}

/* --- Кнопки ---- */
button {
  background-color: var(--color-primary);
  color: #f3f3f3;
  border: none;
  border-radius: 6px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background-color 0.2s, opacity 0.2s;
}

button:hover {
  background-color: var(--color-primary-hover); /* Теперь используется более темный цвет */
}

.del-btn:hover {
  background-color: #b23a2f; 
}

/* --- Инпуты ---- */
input, textarea {
  background-color: var(--color-card);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 10px;
  transition: border 0.3s ease;
}

input:focus, textarea:focus {
  border-color: var(--color-primary);
  outline: none;
}

/* --- Карточки ---- */
.card {
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  margin: 10px 0;
}

/* --- Иконки ---- */
.icon {
  width: 24px;
  height: 24px;
  stroke: var(--color-text);
  fill: none;
}

/* --- Сообщения ---- */
.error {
  color: var(--color-error);
}

.success {
  color: var(--color-success);
}