🎨 Работа с цветами

🔹 Клик по верхней части цвета — копирует CSS-переменную

🔹 Клик по нижней части цвета — копирует HEX значение

🔹 Перетаскивание — сортировка цветов и разделов

🔹 Перетащите в корзину 🗑️ чтобы удалить (корзина появляется при перетаскивании)

🔹 Ctrl+клик по разделу — удалить раздел

➕ Добавление цвета

🔹 Название автоматически → CSS переменная

🔹 Кириллица → транслит (пример: "красный" → "krasnyy")

🔹 Можно изменить CSS переменную вручную

🎯 Примеры использования CSS переменных

.button {
  background: var(--color-primary);
  color: var(--color-white);
  border: 2px solid var(--color-accent);
}

.card {
  background: var(--color-white);
  box-shadow: 0 4px 6px var(--color-gray-light);
}

.alert-success {
  background: var(--color-success);
  color: var(--color-white);
}

<div style="color: var(--color-primary)">
  Текст с основным цветом
</div>

<div style="background: var(--color-danger)">
  Опасная зона
</div>

.dark-theme {
  --color-primary: #BB86FC;
  --color-background: #121212;
}