feat: добавлен навык design-system-generator и дизайн-системы

- Новый навык: .opencode/skills/design-system-generator/SKILL.md
  Генератор дизайн-систем из описания проекта
- Документация текущего стиля: design_project/photoplaces_first_style-design-system.md
  Описание всех текущих стилевых решений проекта
- Концепция развития: design_project/photoplaces_twilight-design-system.md
  Полная дизайн-система в концепции Twilight (golden/blue hour)
- README.md с описанием обеих дизайн-систем
- Исправление текста в deploy/deploy-remote.sh

.opencode/skills/design-system-generator/SKILL.md

@@ -0,0 +1,312 @@
+---
+name: design-system-generator
+description: >
+  Use when user needs to generate a comprehensive design system from a project
+  description. Generates UI/UX + Branding design systems with color palette,
+  typography, spacing, components, animations, CSS/Tailwind code, and JSON tokens
+  for Figma integration. Communicates in Russian. Creates detailed,
+  well-documented design systems understandable by anyone.
+  Example project: photoplaces_twilight (PhotoPlaces Twilight design concept).
+---
+
+# Design System Generator
+
+Ты — Эксперт по дизайну и UX с 15+ лет опыта.
+Твоя задача — превращать описание проекта в комплексную, продуманную дизайн-систему.
+
+## Твой подход
+
+1. **Глубокий анализ** — не просто подбираешь цвета, а понимаешь бизнес, аудиторию и эмоции
+2. **Обоснованность** — каждое решение имеет причину и альтернативы
+3. **Практичность** — всё сразу готово к использованию (код, токены, спецификации)
+4. **Accessibility** — WCAG AA минимум, контрасты, фокусы, скринридеры
+5. **Расширяемость** — дизайн-система должна расти вместе с продуктом
+
+## Формат работы
+
+Когда пользователь описывает проект, выполняй последовательно:
+
+### 1. АНАЛИЗ ПРОЕКТА
+
+Определи и напиши:
+- **Целевую аудиторию**: возраст, интересы, боли, привычки
+- **Эмоциональный посыл**: 3-5 ключевых эмоций, которые должен вызывать дизайн
+- **Ключевые ценности бренда**: 3-5 слов-якорей
+- **Визуальный характер**: минимализм / максимализм / корпоративный / игривый / элегантный / техничный / тёплый / etc.
+- **Конекст индустрии**: что принято в нише, как выделиться
+
+### 2. ЦВЕТОВАЯ ПАЛИТРА
+
+Предоставь:
+- **Primary** — главный цвет бренда (hex, RGB, HSL) + обоснование
+- **Secondary** — дополнительный цвет + как работает с primary
+- **Accent** — цвет для акцентов и CTA
+- **Neutrals** — 3-5 оттенков (фон, поверхность, границы, текст)
+- **Functional** — success, warning, error, info (с hex)
+- **Accessibility** — контрастные пары (text на фоне) с указанием ratio
+
+Формат для каждого цвета:
+```
+Название: #HEX | RGB(r, g, b) | HSL(h, s%, l%)
+Назначение: где используется
+Контраст: пары с какими цветами работает (ratio >= 4.5:1)
+```
+
+### 3. ТИПОГРАФИКА
+
+- **Заголовки** — шрифт + обоснование (почему этот, а не другой)
+- **Основной текст** — шрифт + обоснование
+- **Monospace** (если нужен) — для кода/чисел
+- **Масштабная шкала**:
+
+| Токен | Размер | Line-height | Letter-spacing | Где используется |
+|-------|--------|-------------|----------------|------------------|
+| xs    | 12px   | 16px        | 0.01em         | caption, labels  |
+| sm    | 14px   | 20px        | 0.01em         | small text       |
+| base  | 16px   | 24px        | 0em            | body             |
+| lg    | 18px   | 28px        | -0.01em        | large body       |
+| xl    | 20px   | 28px        | -0.01em        | h4, h5           |
+| 2xl   | 24px   | 32px        | -0.02em        | h3               |
+| 3xl   | 30px   | 36px        | -0.02em        | h2               |
+| 4xl   | 36px   | 40px        | -0.03em        | h1               |
+
+### 4. СЕТКА И ОТСТУПЫ
+
+- **Базовая единица**: 4px (или 8px для крупных элементов)
+- **Spacing scale**:
+
+| Токен | Значение | Пример использования |
+|-------|----------|---------------------|
+| 0     | 0        | Отсутствие отступа   |
+| 1     | 4px      | Минимальный зазор    |
+| 2     | 8px      | Between紧密 элементов |
+| 3     | 12px     | Внутренние отступы   |
+| 4     | 16px     | Стандартный отступ   |
+| 5     | 20px     | Между секциями       |
+| 6     | 24px     | Карточки, блоки      |
+| 8     | 32px     | Между группами       |
+| 10    | 40px     | Отступы секций       |
+| 12    | 48px     | Крупные разделители  |
+| 16    | 64px     | Hero-секции          |
+
+- **Сетка**: 12 колонок (десктоп), 4 колонки (мобайл)
+- **Breakpoints**: sm(640), md(768), lg(1024), xl(1280), 2xl(1536)
+- **Контейнеры**: max-width 1280px, padding 16-32px
+
+### 5. КОМПОНЕНТЫ
+
+Для каждого компонента предоставляй:
+
+#### Структура описания:
+```
+## ComponentName
+
+### Описание (простым языком)
+Что это и зачем нужно пользователю.
+
+### Визуал
+ASCII-арт или詳細ное текстовое описание внешнего вида.
+
+### Variants
+- primary: ...
+- secondary: ...
+- ghost: ...
+- destructive: ...
+
+### Размеры
+- sm: высота Xpx, padding Ypx, шрифт Zpx
+- md: высота Xpx, padding Ypx, шрифт Zpx
+- lg: высота Xpx, padding Ypx, шрифт Zpx
+
+### Состояния
+- Default
+- Hover
+- Active / Pressed
+- Focus ( outline)
+- Disabled
+- Loading (если применимо)
+
+### CSS-классы / Tailwind
+Готовый код для использования.
+
+### Доступность
+- aria-labels
+- role
+- keyboard navigation
+```
+
+#### Обязательные компоненты:
+1. **Button** — primary, secondary, ghost, icon-only, loading
+2. **Input / TextField** — с лейблом, placeholder, ошибкой, иконкой
+3. **Select / Dropdown** — single, multi, searchable
+4. **Checkbox / Radio** — с визуальным фидбэком
+5. **Card** — базовая, интерактивная, с медиа
+6. **Badge / Tag** — цветовые варианты
+7. **Modal / Dialog** — размеры, backdrop
+8. **Toast / Notification** — success, error, info, warning
+9. **Navigation** — horizontal, vertical, mobile
+10. **Header** — с лого, навигацией, actions
+11. **Footer** — links, social, copyright
+12. **Table** — с сортировкой, пагинацией
+13. **Tabs** — горизонтальные, вертикальные
+14. **Accordion** — expand/collapse
+15. **Tooltip / Popover** — позиционирование
+
+### 6. АНИМАЦИИ И ПЕРЕХОДЫ
+
+- **Длительность**:
+  - micro: 100-150ms (hover, focus)
+  - base: 200-300ms (page transitions)
+  - slow: 400-500ms (modals, complex)
+
+- **Кривые**:
+  - ease: стандартная
+  - ease-in-out: плавные переходы
+  - spring: пружинная (для bounce-эффектов)
+
+- **Анимации по компонентам**:
+  - Button: scale при нажатии
+  - Modal: fade + scale
+  - Toast: slide-in справа
+  - Dropdown: fade + translateY
+  - Skeleton: shimmer-эффект
+
+### 7. ПРАВИЛА И ПРИНЦИПЫ
+
+Сформулируй 3-5 ключевых принципов:
+
+Примеры:
+- **Clarity over cleverness** — понятность важнее красивости
+- **Consistency builds trust** — единообразие создаёт доверие
+- **Accessible by default** — доступность не опциональна
+- **Content-first** — контент важнее декора
+- **Progressive disclosure** — показывай по мере необходимости
+
+Для каждого принципа дай пример "До" и "После":
+```
+Прinciple: Clarity over cleverness
+
+Плохо (До): Кнопка с иконкой-стрелкой без текста
+Хорошо (После): Кнопка "Далее →" с иконкой
+```
+
+## Формат вывода
+
+Для каждого раздела предоставляй 4 уровня:
+
+### 1. Описание (для нетехнических людей)
+Простым языком, без терминов. Что это, зачем, как выглядит.
+
+### 2. Рекомендации (для дизайнеров)
+Почему выбрано именно это, какие были альтернативы, когда менять.
+
+### 3. Код (для разработчиков)
+
+#### CSS Custom Properties:
+```css
+:root {
+  /* Colors */
+  --color-primary: #HEX;
+  /* ... */
+  
+  /* Typography */
+  --font-heading: 'Font Name', sans-serif;
+  /* ... */
+  
+  /* Spacing */
+  --space-1: 4px;
+  /* ... */
+  
+  /* Border Radius */
+  --radius-sm: 4px;
+  /* ... */
+  
+  /* Shadows */
+  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
+  /* ... */
+  
+  /* Transitions */
+  --transition-fast: 150ms ease;
+  /* ... */
+}
+```
+
+#### Tailwind Config:
+```javascript
+// tailwind.config.js
+module.exports = {
+  theme: {
+    extend: {
+      colors: { /* ... */ },
+      fontFamily: { /* ... */ },
+      spacing: { /* ... */ },
+      borderRadius: { /* ... */ },
+      boxShadow: { /* ... */ },
+      transitionDuration: { /* ... */ },
+    },
+  },
+}
+```
+
+### 4. Токены (для Figma/инструментов)
+
+JSON-структура для Tokens Studio:
+```json
+{
+  "colors": {
+    "primary": { "50": "#...", "500": "#...", "900": "#..." }
+  },
+  "typography": {
+    "h1": { "fontSize": "2.25rem", "fontWeight": "700", "lineHeight": "1.2" }
+  },
+  "spacing": {
+    "0": "0px", "1": "4px", "2": "8px", "4": "16px"
+  },
+  "borderRadius": {
+    "sm": "4px", "md": "8px", "lg": "12px", "full": "9999px"
+  },
+  "shadows": {
+    "sm": "0 1px 2px rgba(0,0,0,0.05)"
+  }
+}
+```
+
+## Важные правила
+
+1. **Никогда не перечисляй просто список** — объясняй СВЯЗЬ между решениями
+2. **Каждый выбор должен иметь обоснование** — "потому что красиво" не принимается
+3. **Учитывай accessibility** — контрасты, фокусы, aria, keyboard
+4. **Предлагай альтернативы** — " можно было X, но выбрал Y потому что Z"
+5. **Думай о расширяемости** — design system должна расти
+6. **Общайся на языке проекта** — русский или английский как указано
+7. **Форматируй код** — всегда готовый к копированию
+8. **Помни про dark mode** — предлагай обе темы или уточняй
+9. **Учитывай responsive** — мобильный, планшет, десктоп
+10. **Давай actionable результат** — чтобы можно было сразу начать использовать
+
+## Пример ввода от пользователя
+
+```
+Название: MedTrack
+Описание: Мобильное приложение для отслеживания здоровья и медикаментов
+Индустрия: Медтех / Здоровье
+Аудитория: 25-45 лет, следят за здоровьем, хотят контролировать приём лекарств
+Эмоции: Надёжность, спокойствие, забота, профессионализм
+Конкуренты: MyFitnessPal, Apple Health
+Язык: Русский + Английский
+```
+
+## Контрольный чеклист перед выдачей результата
+
+- [ ] Анализ проекта с ЦА и эмоциями
+- [ ] Полная палитра с hex/RGB/HSL
+- [ ] Типографика со шкалой
+- [ ] Сетка и отступы
+- [ ] Минимум 10 компонентов с variants и состояниями
+- [ ] Анимации и переходы
+- [ ] 3-5 принципов с примерами
+- [ ] CSS переменные
+- [ ] Tailwind конфиг
+- [ ] JSON токены
+- [ ] Accessibility-рекомендации
+- [ ] Dark mode (рекомендация или реализация)

deploy/deploy-remote.sh

@@ -89,7 +89,7 @@ setup_repo() {
         log_info "Клонирую репозиторий..."
         if ! git clone --branch "$BRANCH" "$REPO_URL" "$PROJECT_DIR" 2>&1; then
             log_err "Не удалось клонировать репозиторий. Возможно, он приватный."
-            log_info "Создайте токен доступа в Gitea (Settings → Applications → Generate Token)"
+            log_info "Создайте токен доступа в Git"
             log_info "И запустите: git clone http://TOKEN@192.168.88.96:10880/foxtime/photoplaces.git $PROJECT_DIR"
             exit 1
         fi

design_project/README.md

@@ -0,0 +1,126 @@
+# Design Project — PhotoPlaces
+
+> Две дизайн-системы: текущий стиль (first_style) и концепция развития (twilight).
+
+## Структура проекта
+
+```
+design_project/
+├── README.md                                  # Этот файл
+├── photoplaces_first_style-design-system.md   # Текущий стиль (документация)
+└── photoplaces_twilight-design-system.md      # Концепция развития (новая)
+```
+
+## photoplaces_first_style — Текущий стиль
+
+Документация того, что уже реализовано в коде:
+
+| Раздел | Содержимое |
+|--------|------------|
+| Архитектура | Tailwind-only, без модульного CSS |
+| Цвета | Тёмная тема, зелёный brand (`#22c55e`) |
+| Шрифт | Системный стек (-apple-system, Segoe UI) |
+| Паттерны | Стандартные инпуты, кнопки, модалки |
+| Компоненты | Header, Modal, Card, Badge, Admin |
+
+### Ключевые особенности
+- **Glassmorphism** — `bg-white/10 backdrop-blur-md`
+- **Brand-цвет** — зелёный (`#22c55e`)
+- **Тёмная тема** — `#060606` → `#0f172a` → `#1e293b`
+- **Стандартный инпут** — `border-white/10 bg-white/5 focus:border-green-500`
+
+---
+
+## photoplaces_twilight — Концепция развития
+
+> **photoplaces_twilight** — концепция дизайна, вдохновлённая магией сумерек: когда golden hour переходит в blue hour, и каждый кадр наполнен тёплым светом и креативностью.
+
+| Концепция | Цвет | Значение |
+|-----------|------|----------|
+| **Golden Hour** | `#F59E0B` (янтарный) | Тёплые акценты, закатный свет |
+| **Blue Hour** | `#6366F1` (индиго) | Основной цвет, вечернее небо |
+| **Night Contrast** | `#09090B` (чёрный) | Тёмный фон для фотографий |
+
+## Что содержит дизайн-система twilight
+
+### 1. Анализ проекта
+- Целевая аудитория
+- Эмоциональный посыл
+- Ключевые ценности
+- Визуальный характер
+
+### 2. Цветовая палитра
+- Primary (индиго `#6366F1`)
+- Secondary (янтарный `#F59E0B`)
+- Accent (бирюзовый `#06B6D4`)
+- Neutrals (тёмная и светлая темы)
+- Functional colors (success, warning, error, info)
+- Accessibility (контрастные пары WCAG AA)
+
+### 3. Типографика
+- Шрифты (Inter + JetBrains Mono)
+- Масштабная шкала (12px → 48px)
+- Иерархия текста
+
+### 4. Сетка и отступы
+- Базовая единица: 4px
+- Spacing scale
+- 12-колоночная сетка
+- Breakpoints
+- Border radius
+- Shadows
+
+### 5. Компоненты (10+)
+- Button (primary, secondary, ghost, danger)
+- Input / TextField
+- Card (для локаций)
+- Badge / Tag
+- Modal / Dialog
+- Navigation (Header)
+- Footer
+- Toast / Notification
+- Tabs
+- Tooltip / Popover
+- Table
+
+### 6. Анимации и переходы
+- Длительности (fast, normal, slow, slower)
+- Кривые (default, in, out, spring)
+- Примеры keyframes
+
+### 7. Правила и принципы
+1. Content First
+2. Clarity Over Cleverness
+3. Accessible by Default
+4. Consistent Rhythm
+5. Progressive Disclosure
+
+### 8. Токены для Figma
+- JSON-структура для Tokens Studio
+
+### 9. CSS-переменные
+- Light/dark темы
+- Все токены
+
+### 10. Tailwind Config
+- Готовый конфиг для использования
+
+## Использование
+
+### Для дизайнеров (Figma)
+1. Импортируй JSON-токены через Tokens Studio
+2. Все цвета, типографика и отступы автоматически создадутся как variables
+
+### Для разработчиков
+1. Скопируй CSS-переменные в `globals.css`
+2. Используй Tailwind config из раздела 10
+3. Применяй Tailwind-классы из описания компонентов
+
+### Для нетехнических людей
+- Читай разделы "Описание" и "Рекомендации" для понимания логики дизайна
+
+## Контакты
+
+- Проект: PhotoPlaces Twilight
+- Дата создания: 02.07.2026
+- Версия: 1.0

design_project/photoplaces_first_style-design-system.md

@@ -0,0 +1,477 @@
+# PhotoPlaces First Style — Дизайн-система
+
+> **photoplaces_first_style** — документация текущих стилевых решений проекта PhotoPlaces. Описывает то, что уже реализовано в коде.
+
+---
+
+## 1. ОБЩИЙ ПОДХОД
+
+### Архитектура стилей
+- **Tailwind-only** — стили задаются исключительно utility-классами прямо в JSX
+- CSS-переменные в `globals.css` **объявлены, но фактически не используются** в компонентах
+- Конфигурация Tailwind **не расширена** — только стандартные классы
+- **Нет модульного CSS**, CSS-in-JS или отдельных файлов стилей компонентов
+
+### Тема оформления
+- **Полностью тёмная тема** — нет светлого режима
+- **Glassmorphism** — активно используется `bg-white/10 backdrop-blur-md`
+- **Brand-цвет** — зелёный (`#22c55e` / `#16a34a`)
+
+---
+
+## 2. ЦВЕТОВАЯ ПАЛИТРА
+
+### Фоны (иерархия)
+
+| Значение | Tailwind-класс | Назначение |
+|----------|----------------|------------|
+| `#060606` | `bg-[#060606]` | Фон страницы (body) |
+| `#0f172a` | `bg-[#0f172a]` | Фон страниц (формы, списки) |
+| `#1e293b` | `bg-[#1e293b]` | Поверхности (карточки, модалки, панели) |
+| `#15291C` | `bg-[#15291C]` | Select в RegisterModal |
+
+### Brand-цвета (зелёный)
+
+| Класс | Hex | Назначение |
+|-------|-----|------------|
+| `bg-green-700` | `#15803d` | Кнопки "Восстановить", "Удалить навсегда" |
+| `bg-green-600` | `#16a34a` | CTA кнопки, активные фильтры, теги |
+| `bg-green-600/70` | `#16a34a` (70%) | Кнопка "Регистрация" в Header |
+| `bg-green-600/20` | `#16a34a` (20%) | Активный пункт навигации в admin sidebar |
+| `bg-green-600/15` | `#16a34a` (15%) | Фон модалки RegisterModal |
+| `bg-green-500` | `#22c55e` | Hover-состояния кнопок |
+| `bg-green-500/20` | `#22c55e` (20%) | Badge "Активен" |
+| `bg-green-500/10` | `#22c55e` (10%) | Сообщения-уведомления |
+| `text-green-400` | `#4ade80` | Ссылки, статусы, успешные сообщения |
+| `text-green-300` | `#86efac` | Hover ссылки, badge "это вы" |
+| `focus:border-green-500` | `#22c55e` | Focus-состояние всех инпутов |
+
+### Прозрачный белый (glassmorphism)
+
+| Класс | Назначение |
+|-------|------------|
+| `bg-white/5` | Фон инпутов |
+| `bg-white/10` | Вторичные кнопки, навигация, теги, фильтры, Header блок |
+| `bg-white/20` | Hover вторичных кнопок |
+| `text-white` | Основной текст, кнопки |
+| `text-white/80` | Приглушённый текст |
+| `text-white/60` | Подписи, лейблы, placeholder |
+| `text-white/40` | Статусы, неактивные элементы |
+| `text-white/30` | Версия в футере |
+| `text-white/20` | Копирайт в футере |
+| `border-white/10` | Стандартный бордер инпутов |
+| `border-white/20` | Бордер кнопки "Сохранить черновик" |
+| `placeholder-white/40` | Placeholder инпутов |
+
+### Функциональные цвета
+
+| Цвет | Классы | Назначение |
+|------|--------|------------|
+| **Красный** | `bg-red-600`, `bg-red-600/80`, `bg-red-700`, `bg-red-500/10`, `bg-red-500/5`, `bg-red-500/20`, `bg-red-900/90`, `text-red-400`, `text-red-300/60`, `border-red-500/20` | Ошибки, удаление, блокировка |
+| **Жёлтый** | `bg-yellow-500/10`, `bg-yellow-500/20`, `bg-yellow-600`, `bg-yellow-600/80`, `text-yellow-400`, `focus:border-yellow-500` | Предупреждения, модерация, доработка |
+| **Синий** | `bg-blue-500/20`, `text-blue-400` | Информационные сообщения, тип "Место" |
+| **Фиолетовый** | `bg-purple-500/20`, `text-purple-400` | Тип "Студия" |
+| **Оранжевый** | `bg-orange-600/80`, `text-orange-400` | Статус "На доработке", кнопка "Отозвать" |
+
+### Красный (кнопка "Выйти")
+
+| Класс | Hex |
+|-------|-----|
+| `hover:bg-[#ff5656]` | `#ff5656` |
+
+### SVG-иконки
+
+| Класс | Hex | Назначение |
+|-------|-----|------------|
+| `#FF4B4B` | `#FF4B4B` | Маркер на карте (Leaflet) |
+
+---
+
+## 3. ТИПОГРАФИКА
+
+### Шрифт
+
+```css
+font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+```
+
+Системный стек — без подгрузки внешних шрифтов.
+
+### Размеры шрифтов
+
+| Класс | Размер | Назначение |
+|-------|--------|------------|
+| `text-2xl` | 24px | Заголовки страниц (h1), модальные заголовки |
+| `text-xl` | 20px | Заголовки карточек, заголовки секций |
+| `text-lg` | 18px | Заголовок "PhotoPlaces" в Header |
+| `text-sm` | 14px | Основной размер текста (лейблы, кнопки, описания, статусы) |
+| `text-xs` | 12px | Бейджи, теги, ID, копирайт, версия |
+
+### Веса шрифтов
+
+| Класс | Назначение |
+|-------|------------|
+| `font-bold` | Заголовки h1, h2, h3, название бренда |
+| `font-semibold` | Заголовки карточек мест |
+| `font-medium` | Текст кнопок, текст в навигации |
+
+---
+
+## 4. ОТСТУПЫ
+
+### Padding элементов
+
+| Класс | Значение | Назначение |
+|-------|----------|------------|
+| `p-8` | 32px | Модальные окна (LoginModal, RegisterModal), пустые состояния |
+| `p-6` | 24px | PlaceForm, PlaceCardModal, модальные окна подтверждения |
+| `p-4` | 16px | PlaceCard, ErrorReporter, admin sidebar, карточки admin places |
+| `px-4 py-3` | 16/12px | Стандартный padding инпутов и кнопок CTA |
+| `px-3 py-2` | 12/8px | Вторичные кнопки, small inputs, теги в админке |
+| `px-3 py-1.5` | 12/6px | Теги (tags), кнопки фильтров |
+| `px-3 py-1` | 12/4px | Кнопки в Header |
+| `px-6 py-3` | 24/12px | Баннер гостя на карте |
+| `px-6 py-2` | 24/8px | Кнопка "На карту" |
+| `px-4 py-2` | 16/8px | Кнопки в MapPicker, кнопки в модалках |
+
+### Gap (расстояние между элементами)
+
+| Класс | Значение | Назначение |
+|-------|----------|------------|
+| `gap-8` | 32px | Две колонки в admin/tags |
+| `gap-4` | 16px | Grid координат, grid цена/час, flex кнопки действий |
+| `gap-3` | 12px | Flex-группы кнопок, Header nav items |
+| `gap-2` | 8px | Теги, фильтры, flex-группы |
+| `gap-1` | 4px | Admin nav items |
+
+### Space-y (вертикальный gap)
+
+| Класс | Значение | Назначение |
+|-------|----------|------------|
+| `space-y-6` | 24px | PlaceForm секции, admin sidebar |
+| `space-y-4` | 16px | Модальные окна, список мест |
+| `space-y-3` | 12px | Форма CreateUserModal |
+| `space-y-2` | 8px | Успешные сообщения, список пользователей |
+| `space-y-1` | 4px | Список тегов/характеристик |
+
+### Margin
+
+| Класс | Значение | Назначение |
+|-------|----------|------------|
+| `mb-6` | 24px | Заголовки секций перед контентом |
+| `mb-4` | 16px | Элементы перед списками, кнопками |
+| `mb-2` | 8px | Текст перед группами |
+| `mb-1` | 4px | Лейблы перед инпутами |
+| `mt-2` | 8px | Preview изображения |
+| `mt-4` | 16px | Кнопка "На карту" в пустом состоянии |
+| `pt-16` | 64px | Отступ сверху на страницах с формами |
+| `pt-20` | 80px | Отступ сверху на страницах my/edit |
+| `pt-10` | 40px | Модалка EditModal |
+
+---
+
+## 5. BORDER RADIUS
+
+| Класс | Значение | Назначение |
+|-------|----------|------------|
+| `rounded-2xl` | 16px | Модальные окна (LoginModal, RegisterModal, AddLocationModal) |
+| `rounded-t-2xl` | 16px (верх) | PlaceCardModal в MapView |
+| `rounded-xl` | 12px | Карточки мест (PlaceCard), модальные окна подтверждения, EditModal |
+| `rounded-lg` | 8px | **Самый частый** — инпуты, кнопки, теги-фильтры, навигация, бейджи |
+| `rounded-full` | 9999px | Теги при выборе, бейджи статусов/типов |
+| `rounded` | 4px | Кнопка "Закрыть" в ErrorReporter |
+
+---
+
+## 6. ТЕНИ
+
+| Класс/стиль | Назначение |
+|-------------|------------|
+| `shadow-xl` | Все модальные окна (EditModal, DeleteModal, ReworkModal, CreateUserModal, PlaceCardModal, admin modals) |
+| `drop-shadow(0 1px 3px rgba(0,0,0,0.5))` | SVG-иконка маркера на карте (MapPicker) |
+
+**Тени используются только на всплывающих/модальных элементах.**
+
+---
+
+## 7. СТАНДАРТНЫЕ ПАТТЕРНЫ
+
+### 7.1. Паттерн инпута
+
+```html
+<input
+  className="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-3 text-white
+    placeholder-white/40 outline-none focus:border-green-500"
+  placeholder="..."
+/>
+```
+
+### 7.2. Паттерн кнопки CTA
+
+```html
+<button className="rounded-lg bg-green-600 px-4 py-3 font-medium text-white hover:bg-green-500 transition">
+  Текст кнопки
+</button>
+```
+
+### 7.3. Паттерн кнопки вторичной
+
+```html
+<button className="rounded-lg bg-white/10 px-4 py-2 text-sm text-white hover:bg-white/20 transition">
+  Текст кнопки
+</button>
+```
+
+### 7.4. Паттерн фильтра/тега
+
+**Активный:**
+```html
+<button className="rounded-lg bg-green-600 px-3 py-1.5 text-sm text-white">
+  Тег
+</button>
+```
+
+**Неактивный:**
+```html
+<button className="rounded-lg bg-white/10 px-3 py-1.5 text-sm text-white/60 hover:bg-white/20">
+  Тег
+</button>
+```
+
+### 7.5. Паттерн модалки
+
+```html
+<!-- Overlay -->
+<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm">
+  <!-- Контент -->
+  <div
+    className="w-full max-w-md rounded-2xl bg-[#1e293b] p-8"
+    onClick={(e) => e.stopPropagation()}
+  >
+    <!-- Заголовок -->
+    <h2 className="text-center text-2xl font-bold text-white">Заголовок</h2>
+
+    <!-- Форма / Содержимое -->
+
+    <!-- Кнопки -->
+    <div className="mt-6 flex justify-end gap-3">
+      <button className="secondary">Отмена</button>
+      <button className="primary">Подтвердить</button>
+    </div>
+  </div>
+</div>
+```
+
+### 7.6. Паттерн ошибки
+
+```html
+<div className="rounded-lg bg-red-500/10 p-3 text-sm text-red-400">
+  Текст ошибки
+</div>
+```
+
+### 7.7. Паттерн пустого состояния
+
+```html
+<div className="flex flex-col items-center justify-center py-16 text-center">
+  <p className="text-white/40">Нет данных</p>
+</div>
+```
+
+### 7.8. Disabled state
+
+```html
+<button disabled className="... disabled:opacity-50">
+```
+
+### 7.9. Transition
+
+```html
+<!-- Стандартный переход -->
+<button className="... transition">
+
+<!-- Переход только цветов -->
+<button className="... transition-colors">
+```
+
+---
+
+## 8. Z-INDEX ИЕРАРХИЯ
+
+| Z-index | Элемент |
+|---------|---------|
+| `z-0` | Карта |
+| `z-10` | Баннер гостя |
+| `z-20` | PlaceCardModal (bottom sheet) |
+| `z-30` | Header |
+| `z-40` | Футер |
+| `z-50` | Модальные окна |
+| `z-[60]` | MapPicker (полноэкранный) |
+
+---
+
+## 9. РАЗМЕРЫ КОНТЕЙНЕРОВ
+
+| Класс | Ширина | Назначение |
+|-------|--------|------------|
+| `max-w-sm` | 384px | Модалки авторизации (Login, Register) |
+| `max-w-md` | 448px | Модалки подтверждения (Delete, Rework) |
+| `max-w-2xl` | 672px | Формы создания/редактирования (PlaceForm, ServiceForm, EditModal, AddLocationModal) |
+| `max-w-3xl` | 768px | Список мест (MyPlaces) |
+
+---
+
+## 10. КОМПОНЕНТЫ
+
+### Header
+
+- Позиционирование: `absolute top-0`, `z-30`
+- Логотип: `text-lg font-bold text-white` — текст "PhotoPlaces"
+- Навигация авторизованного пользователя: `inline-flex items-center gap-3 rounded-lg bg-white/10 backdrop-blur-md px-4 py-2`
+- Кнопка "+" для добавления локации: `rounded-lg bg-white/10 backdrop-blur-md px-3 py-1`
+- Кнопка "Выйти": `hover:bg-[#ff5656]`
+- Ссылки: `text-sm text-white hover:text-green-400`
+
+### LoginModal
+
+- Overlay: `bg-black/40`
+- Контейнер: `rounded-2xl bg-white/10 backdrop-blur-md p-8`
+- Заголовок: `text-center text-2xl font-bold text-white`
+- Инпуты: стандартный паттерн
+- Максимальная ширина: `max-w-sm`
+
+### RegisterModal
+
+- Overlay: `bg-black/40`
+- Контейнер: `rounded-2xl bg-green-600/15 backdrop-blur-md p-8` — **зеленоватый оттенок**
+- Select: `bg-[#15291C]` — темно-зелёный фон
+- Три роли: Заказчик, Арендодатель, Исполнитель
+
+### AddLocationModal
+
+- Overlay: `bg-black/60 backdrop-blur-sm`
+- Контейнер: `rounded-2xl bg-[#1e293b]` без padding
+- Форма внутри: PlaceForm
+
+### PlaceCard
+
+- Контейнер: `rounded-xl bg-[#1e293b] overflow-hidden`
+- Изображение: `aspect-[4/3] object-cover`
+- Hover: `hover:shadow-xl hover:-translate-y-1 transition-all duration-300`
+- Заголовок: `text-lg font-semibold text-white`
+- Описание: `text-sm text-white/60 line-clamp-2`
+- Действия: `text-green-400 hover:text-green-300`
+
+### PlaceCardModal (Bottom Sheet)
+
+- Позиционирование: `fixed bottom-0 left-0 right-0 z-20`
+- Контейнер: `rounded-t-2xl bg-[#1e293b]`
+- Max-height: `max-h-[70vh] overflow-y-auto`
+
+### MapView
+
+- Контейнер: `fixed inset-0 z-0`
+- Кнопка "На карту": `rounded-lg bg-green-600 px-6 py-2`
+- Баннер гостя: `rounded-xl bg-white/10 backdrop-blur-md px-6 py-3`
+
+### MapPicker (Полноэкранный)
+
+- Позиционирование: `fixed inset-0 z-[60]`
+- Фон: `bg-[#0f172a]`
+- Заголовок: `bg-[#1e293b] border-b border-white/10`
+- Кнопки: `bg-white/10 hover:bg-white/20`
+
+### Admin Sidebar
+
+- Ширина: `w-64`
+- Фон: `bg-[#1e293b] border-r border-white/10`
+- Навигация: `rounded-lg hover:bg-white/10`
+- Активный: `bg-green-600/20 text-green-400`
+
+### Admin Page
+
+- Фон: `bg-[#0f172a]`
+- Статистика: `rounded-xl bg-[#1e293b] p-6`
+- Кнопки модерации: `bg-yellow-600`, `bg-red-600/80`, `bg-green-600`
+
+### ErrorBoundary
+
+- Контейнер: `min-h-screen bg-red-500/5 flex items-center justify-center`
+- Карточка: `rounded-xl border border-red-500/20 bg-[#1e293b] p-8`
+- Заголовок: `text-red-300/60`
+- Кнопка: `bg-red-600 hover:bg-red-700`
+
+### ErrorReporter
+
+- Позиционирование: `fixed bottom-4 right-4 z-50`
+- Контейнер: `rounded bg-red-900/90 p-4`
+- Максимальная ширина: `max-w-md`
+
+### Footer
+
+- Фон: `bg-[#0f172a]`
+- Граница: `border-t border-white/10`
+- Ссылки: `text-white/60 hover:text-white/80`
+- Копирайт: `text-white/20`
+- Версия: `text-white/30`
+
+---
+
+## 11. КАРТЫ (Leaflet)
+
+- Тайлы: **CartoDB Dark All** (`basemaps.cartocdn.com/dark_all`) с `opacity: 0.92`
+- Маркер: SVG `#FF4B4B` с `drop-shadow(0 1px 3px rgba(0,0,0,0.5))`
+- Контейнер карты: `fixed inset-0 z-0`
+
+---
+
+## 12. CSS-ПЕРЕМЕННЫЕ (объявлены, но не используются)
+
+```css
+:root {
+  --color-primary: #22c55e;
+  --color-primary-dark: #16a34a;
+  --color-bg: #060606;
+  --color-surface: #1e293b;
+  --color-text: #f1f5f9;
+  --color-text-muted: #94a3b8;
+  --color-border: #334155;
+}
+```
+
+---
+
+## 13. TAILWIND CONFIG (текущий)
+
+```javascript
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./src/**/*.{ts,tsx}'],
+  theme: {
+    extend: {},  // Без расширений
+  },
+  plugins: [],  // Без плагинов
+}
+```
+
+---
+
+## 14. РЕКОМЕНДАЦИИ ПО УЛУЧШЕНИЮ
+
+### Что стоит сделать
+
+1. **Использовать CSS-переменные** — они объявлены, но не применяются
+2. **Расширить Tailwind config** — вынести повторяющиеся паттерны в кастомные классы
+3. **Добавить светлую тему** — сейчас только тёмная
+4. **Стандартизировать компоненты** — создать переиспользуемые UI-компоненты
+5. **ДобавитьGLIGENCE-анимации** — сейчас `transition` без параметров
+6. **Оптимизировать z-index** — использовать CSS-переменные для иерархии
+
+### Паттерны для выноса в компоненты
+
+- `Button` (primary, secondary, ghost, danger)
+- `Input` (с лейблом, ошибкой)
+- `Modal` (overlay + контент)
+- `Badge` (статусы, типы)
+- `Card` (для локаций)
+- `Alert` (ошибки, успех)

design_project/photoplaces_twilight-design-system.md

@@ -0,0 +1,1260 @@
+# PhotoPlaces Twilight — Дизайн-система
+
+> **photoplaces_twilight** — концепция дизайна, вдохновлённая магией сумерек: когда golden hour переходит в blue hour, и каждый кадр наполнен тёплым светом и креативностью.
+
+## 1. АНАЛИЗ ПРОЕКТА
+
+### Что это
+PhotoPlaces Twilight — маркетплейс фотолокаций. Пользователи находят места и студии для фотосъёмок, бронируют, общаются с фотографами.
+
+### Целевая аудитория
+- **Фотографы** (25-40 лет): ищут новые локации, хотят впечатлить клиентов
+- **Владельцы студий/локаций**: хотят привлечь клиентов, показать пространство
+- **Заказчики съёмок** (20-35 лет): свадьбы, любительские, коммерческие съёмки
+
+### Эмоциональный посыл
+1. **Вдохновение** — хочется снимать, открывать новые места
+2. **Надёжность** — можно доверять бронирование
+3. **Профессионализм** — серьёзный подход к фотосъёмке
+4. **Открытость** — дружелюбное сообщество
+
+### Ключевые ценности
+Вдохновение • Надёжность • Красота • Сообщество
+
+### Визуальный характер
+**Современный минимализм с акцентом на визуальный контент.**
+Фотографии — главные герои. Интерфейс — рамка, которая не отвлекает.
+
+### Философия Twilight
+- **Golden Hour** — тёплые янтарные акценты (secondary `#F59E0B`)
+- **Blue Hour** — глубокий индиго как основной цвет (primary `#6366F1`)
+- **Ночной контраст** — чистый минимализм на тёмном фоне
+- **Магия момента** — каждое фото как произведение искусства
+
+---
+
+## 2. ЦВЕТОВАЯ ПАЛИТРА
+
+### Философия Twilight
+Тёмная тема — идеальный фон для фотографий (как ночное небо). Акцентный цвет — индиго-фиолетовый, который ассоциируется с креативностью и вечерним blue hour. Тёплый янтарный secondary — отсылка к golden hour.
+
+### Primary: Индиго-фиолетовый
+
+| Формат | Значение |
+|--------|----------|
+| Hex | `#6366F1` |
+| RGB | `rgb(99, 102, 241)` |
+| HSL | `hsl(239, 84%, 67%)` |
+
+**Почему именно этот:**
+- Ассоциируется с креативностью и вечерним светом (golden hour → blue hour)
+- Хорошо читается на тёмном фоне
+- Отличается от типичного зелёного/синего в конкурентах
+- Работает как для CTA, так и для акцентов
+
+### Secondary: Тёплый янтарный
+
+| Формат | Значение |
+|--------|----------|
+| Hex | `#F59E0B` |
+| RGB | `rgb(245, 158, 11)` |
+| HSL | `hsl(38, 92%, 50%)` |
+
+**Назначение:** бейджи, рейтинг, избранные, премиум-метки
+
+### Accent: Бирюзовый
+
+| Формат | Значение |
+|--------|----------|
+| Hex | `#06B6D4` |
+| RGB | `rgb(6, 182, 212)` |
+| HSL | `hsl(189, 94%, 43%)` |
+
+**Назначение:** ссылки, интерактивные элементы, ховер-состояния
+
+### Neutrals (тёмная тема)
+
+| Токен | Hex | Назначение |
+|-------|-----|------------|
+| `--bg` | `#09090B` | Основной фон |
+| `--bg-elevated` | `#18181B` | Поверхности (карточки, модалки) |
+| `--bg-hover` | `#27272A` | Ховер-состояния |
+| `--border` | `#3F3F46` | Границы, разделители |
+| `--border-subtle` | `#27272A` | Мягкие границы |
+| `--text-primary` | `#FAFAFA` | Основной текст |
+| `--text-secondary` | `#A1A1AA` | Вторичный текст |
+| `--text-muted` | `#71717A` | Приглушённый текст |
+
+### Neutrals (светлая тема)
+
+| Токен | Hex | Назначение |
+|-------|-----|------------|
+| `--bg` | `#FAFAFA` | Основной фон |
+| `--bg-elevated` | `#FFFFFF` | Поверхности |
+| `--bg-hover` | `#F4F4F5` | Ховер-состояния |
+| `--border` | `#E4E4E7` | Границы |
+| `--border-subtle` | `#F4F4F5` | Мягкие границы |
+| `--text-primary` | `#18181B` | Основной текст |
+| `--text-secondary` | `#52525B` | Вторичный текст |
+| `--text-muted` | `#A1A1AA` | Приглушённый текст |
+
+### Functional Colors
+
+| Состояние | Hex | Назначение |
+|-----------|-----|------------|
+| `--success` | `#22C55E` | Успешные действия, подтверждения |
+| `--warning` | `#F59E0B` | Предупреждения, ожидание |
+| `--error` | `#EF4444` | Ошибки, удаление |
+| `--info` | `#3B82F6` | Информационные сообщения |
+
+### Accessibility (контрастные пары)
+
+| Комбинация | Ratio | WCAG |
+|------------|-------|------|
+| `#FAFAFA` на `#09090B` | 19.3:1 | AAA ✓ |
+| `#6366F1` на `#09090B` | 6.8:1 | AA ✓ |
+| `#A1A1AA` на `#09090B` | 7.2:1 | AA ✓ |
+| `#18181B` на `#FAFAFA` | 19.3:1 | AAA ✓ |
+| `#6366F1` на `#FFFFFF` | 4.7:1 | AA ✓ |
+
+---
+
+## 3. ТИПОГРАФИКА
+
+### Шрифты
+
+| Роль | Шрифт | Обоснование |
+|------|-------|-------------|
+| **Заголовки** | Inter | Геометрический, чистый, отлично читается на экране |
+| **Основной текст** | Inter | Единообразие, хорошая читаемость |
+| **Mono** | JetBrains Mono | Для кода, ID, технической информации |
+
+Почему Inter:
+- Бесплатный (Google Fonts)
+- Оптимизирован для экранов
+- Отличная поддержка кириллицы
+- Множество начертаний (от Thin до Black)
+
+### Масштабная шкала
+
+| Токен | Размер | Line-height | Letter-spacing | Использование |
+|-------|--------|-------------|----------------|---------------|
+| `--text-xs` | 12px | 16px | 0.01em | Метки, капшены |
+| `--text-sm` | 14px | 20px | 0.01em | Small text, описания |
+| `--text-base` | 16px | 24px | 0em | Основной текст |
+| `--text-lg` | 18px | 28px | -0.01em | Крупный body text |
+| `--text-xl` | 20px | 28px | -0.01em | h5, h4 |
+| `--text-2xl` | 24px | 32px | -0.02em | h3 |
+| `--text-3xl` | 30px | 36px | -0.02em | h2 |
+| `--text-4xl` | 36px | 40px | -0.03em | h1 |
+| `--text-5xl` | 48px | 48px | -0.03em | Hero заголовки |
+
+### Иерархия текста
+
+```
+Hero (text-5xl, font-bold)
+  └── Подзаголовок (text-lg, text-secondary)
+
+Раздел (text-3xl, font-semibold)
+  └── Описание (text-base, text-secondary)
+
+Карточка заголовок (text-xl, font-medium)
+  └── Карточка описание (text-sm, text-secondary)
+
+Метка (text-xs, font-medium, uppercase, tracking-wider)
+  └── Значение (text-base, font-semibold)
+```
+
+---
+
+## 4. СЕТКА И ОТСТУПЫ
+
+### Базовая единица: 4px
+
+### Spacing Scale
+
+| Токен | Значение | Использование |
+|-------|----------|---------------|
+| `--space-0` | 0px | Нет отступа |
+| `--space-0.5` | 2px | Минимальный зазор |
+| `--space-1` | 4px | Минимальный отступ |
+| `--space-1.5` | 6px | Between иконок |
+| `--space-2` | 8px | Внутренний padding кнопок |
+| `--space-3` | 12px | Between элементов в строке |
+| `--space-4` | 16px | Стандартный padding |
+| `--space-5` | 20px | Между секциями |
+| `--space-6` | 24px | Карточки, блоки |
+| `--space-8` | 32px | Между группами |
+| `--space-10` | 40px | Отступы секций |
+| `--space-12` | 48px | Крупные разделители |
+| `--space-16` | 64px | Hero-секции |
+| `--space-20` | 80px | Между страницами |
+
+### Сетка
+
+| Параметр | Значение |
+|----------|----------|
+| Колонки (desktop) | 12 |
+| Колонки (tablet) | 8 |
+| Колонки (mobile) | 4 |
+| Gutter | 24px (desktop), 16px (mobile) |
+| Max-width | 1280px |
+| Padding | 32px (desktop), 16px (mobile) |
+
+### Breakpoints
+
+| Имя | Минимальная ширина | Описание |
+|-----|-------------------|----------|
+| `sm` | 640px | Мобильный (альбом) |
+| `md` | 768px | Планшет |
+| `lg` | 1024px | Десктоп |
+| `xl` | 1280px | Широкий десктоп |
+| `2xl` | 1536px | Экстрабольшой |
+
+### Border Radius
+
+| Токен | Значение | Использование |
+|-------|----------|---------------|
+| `--radius-sm` | 6px | Кнопки, инпуты |
+| `--radius-md` | 8px | Карточки, модалки |
+| `--radius-lg` | 12px | Крупные блоки |
+| `--radius-xl` | 16px | Hero-элементы |
+| `--radius-2xl` | 24px | Аватары, круглые элементы |
+| `--radius-full` | 9999px | Пилюли, бейджи |
+
+### Shadows (тёмная тема)
+
+| Токен | Значение |
+|-------|----------|
+| `--shadow-sm` | `0 1px 2px rgba(0,0,0,0.4)` |
+| `--shadow-md` | `0 4px 6px -1px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3)` |
+| `--shadow-lg` | `0 10px 15px -3px rgba(0,0,0,0.4), 0 4px 6px rgba(0,0,0,0.3)` |
+| `--shadow-xl` | `0 20px 25px -5px rgba(0,0,0,0.4), 0 8px 10px rgba(0,0,0,0.3)` |
+| `--shadow-glow` | `0 0 20px rgba(99,102,241,0.3)` |
+
+### Shadows (светлая тема)
+
+| Токен | Значение |
+|-------|----------|
+| `--shadow-sm` | `0 1px 2px rgba(0,0,0,0.05)` |
+| `--shadow-md` | `0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06)` |
+| `--shadow-lg` | `0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05)` |
+| `--shadow-xl` | `0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px rgba(0,0,0,0.04)` |
+
+---
+
+## 5. КОМПОНЕНТЫ
+
+---
+
+### Button
+
+#### Описание
+Основной интерактивный элемент. Визуально — чистый, с чёткими состояниями.
+
+#### Variants
+
+**Primary**
+```css
+background: var(--primary);
+color: white;
+font-weight: 600;
+```
+
+**Secondary**
+```css
+background: transparent;
+border: 1px solid var(--border);
+color: var(--text-primary);
+```
+
+**Ghost**
+```css
+background: transparent;
+color: var(--text-secondary);
+```
+
+**Danger**
+```css
+background: var(--error);
+color: white;
+```
+
+#### Размеры
+
+| Размер | Высота | Padding | Шрифт | Border-radius |
+|--------|--------|---------|-------|---------------|
+| `sm` | 32px | 8px 12px | 13px | 6px |
+| `md` | 40px | 10px 16px | 14px | 8px |
+| `lg` | 48px | 12px 24px | 16px | 8px |
+| `xl` | 56px | 16px 32px | 18px | 12px |
+
+#### Состояния
+
+| Состояние | Изменение |
+|-----------|-----------|
+| Default | Базовый вид |
+| Hover | `brightness(1.1)`, `transform: translateY(-1px)` |
+| Active | `brightness(0.95)`, `transform: translateY(0)` |
+| Focus | `outline: 2px solid var(--primary)`, `outline-offset: 2px` |
+| Disabled | `opacity: 0.5`, `cursor: not-allowed` |
+| Loading | Спиннер вместо текста, `pointer-events: none` |
+
+#### Tailwind-классы
+
+```tsx
+// Primary
+<button className="bg-indigo-600 text-white font-semibold rounded-lg
+  hover:bg-indigo-500 active:bg-indigo-700
+  focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-zinc-900
+  disabled:opacity-50 disabled:cursor-not-allowed
+  transition-all duration-150
+  px-4 py-2 text-sm">
+
+// Secondary
+<button className="bg-transparent border border-zinc-700 text-zinc-100 font-medium rounded-lg
+  hover:bg-zinc-800 active:bg-zinc-700
+  focus:outline-none focus:ring-2 focus:ring-zinc-500 focus:ring-offset-2 focus:ring-offset-zinc-900
+  disabled:opacity-50 disabled:cursor-not-allowed
+  transition-all duration-150
+  px-4 py-2 text-sm">
+
+// Ghost
+<button className="bg-transparent text-zinc-400 font-medium rounded-lg
+  hover:bg-zinc-800 hover:text-zinc-100 active:bg-zinc-700
+  focus:outline-none focus:ring-2 focus:ring-zinc-500 focus:ring-offset-2 focus:ring-offset-zinc-900
+  disabled:opacity-50 disabled:cursor-not-allowed
+  transition-all duration-150
+  px-4 py-2 text-sm">
+```
+
+#### Доступность
+- `aria-label` для кнопок с иконками
+- `aria-disabled="true"` вместо `disabled` для семантики
+- `role="button"` для div-кнопок (но лучше использовать `<button>`)
+
+---
+
+### Input / TextField
+
+#### Описание
+Поле ввода с лейблом, плейсхолдером и состояниями ошибки.
+
+#### Визуал
+```
+┌─────────────────────────────────┐
+│ Лейбл (обязательный)            │
+├─────────────────────────────────┤
+│ Иконка │ Placeholder/Value      │
+└─────────────────────────────────┘
+│ Текст ошибки (если есть)        │
+```
+
+#### Размеры
+
+| Размер | Высота | Padding | Шрифт |
+|--------|--------|---------|-------|
+| `sm` | 32px | 8px 12px | 13px |
+| `md` | 40px | 10px 14px | 14px |
+| `lg` | 48px | 12px 16px | 16px |
+
+#### Состояния
+
+| Состояние | Визуал |
+|-----------|--------|
+| Default | `border-zinc-700`, `bg-zinc-900` |
+| Focus | `border-indigo-500`, `ring-2 ring-indigo-500/20` |
+| Error | `border-red-500`, `ring-2 ring-red-500/20` |
+| Disabled | `opacity-50`, `cursor-not-allowed` |
+
+#### Tailwind-классы
+
+```tsx
+<div className="flex flex-col gap-1.5">
+  <label className="text-sm font-medium text-zinc-300">
+    Лейбл
+  </label>
+  <input
+    className="h-10 px-3 rounded-lg
+      bg-zinc-900 border border-zinc-700 text-zinc-100
+      placeholder:text-zinc-500
+      focus:outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20
+      disabled:opacity-50 disabled:cursor-not-allowed
+      transition-colors duration-150
+      text-sm"
+    placeholder="Введите значение"
+  />
+  <span className="text-xs text-red-400">
+    Текст ошибки
+  </span>
+</div>
+```
+
+#### Доступность
+- `aria-label` или `aria-labelledby` для лейбла
+- `aria-invalid="true"` при ошибке
+- `aria-describedby` для связи с текстом ошибки
+- `aria-required="true"` для обязательных полей
+
+---
+
+### Card
+
+#### Описание
+Карточка для отображения локаций, студий, профилей. Главная фича — крупное фото.
+
+#### Визуал
+
+```
+┌─────────────────────────────────┐
+│                                 │
+│         [ФОТО / IMAGE]          │
+│                                 │
+├─────────────────────────────────┤
+│ Заголовок карточки              │
+│ Описание (2 строки)             │
+│                                 │
+│ ★ 4.8  ·  Москва  ·  Студия    │
+├─────────────────────────────────┤
+│ [Забронировать]     [Избранное ♡]│
+└─────────────────────────────────┘
+```
+
+#### Варианты
+
+| Вариант | Использование |
+|---------|---------------|
+| Default | Карточка локации в каталоге |
+| Compact | Карточка в боковой панели |
+| Featured | Крупная карточка в hero-секции |
+| Minimal | Карточка в списке результатов |
+
+#### Tailwind-классы
+
+```tsx
+<div className="group rounded-xl bg-zinc-900 border border-zinc-800
+  overflow-hidden hover:border-zinc-700
+  transition-all duration-300 hover:shadow-xl hover:shadow-black/20
+  hover:-translate-y-1">
+
+  {/* Изображение */}
+  <div className="aspect-[4/3] overflow-hidden">
+    <img
+      className="w-full h-full object-cover
+        group-hover:scale-105 transition-transform duration-500"
+      src="..."
+      alt="..."
+    />
+  </div>
+
+  {/* Контент */}
+  <div className="p-4">
+    <h3 className="text-lg font-semibold text-zinc-100 mb-1">
+      Название
+    </h3>
+    <p className="text-sm text-zinc-400 line-clamp-2 mb-3">
+      Описание локации
+    </p>
+
+    {/* Мета-информация */}
+    <div className="flex items-center gap-2 text-xs text-zinc-500">
+      <span className="flex items-center gap-1">
+        <StarIcon className="w-3.5 h-3.5 text-amber-400" />
+        4.8
+      </span>
+      <span>·</span>
+      <span>Москва</span>
+      <span>·</span>
+      <span>Студия</span>
+    </div>
+  </div>
+
+  {/* Действия */}
+  <div className="px-4 pb-4 flex items-center justify-between">
+    <button className="text-sm font-medium text-indigo-400 hover:text-indigo-300">
+      Забронировать
+    </button>
+    <button className="text-zinc-500 hover:text-rose-400 transition-colors">
+      <HeartIcon className="w-5 h-5" />
+    </button>
+  </div>
+</div>
+```
+
+#### Доступность
+- `role="article"` или `<article>`
+- `alt` для изображений
+- `aria-label` для кнопок действий
+
+---
+
+### Badge / Tag
+
+#### Описание
+Метки для категорий, статусов, тегов.
+
+#### Варианты
+
+| Вариант | Цвет | Использование |
+|---------|------|---------------|
+| Default | `bg-zinc-800 text-zinc-300` | Обычные теги |
+| Primary | `bg-indigo-500/20 text-indigo-400` | Основные категории |
+| Success | `bg-emerald-500/20 text-emerald-400` | Доступно, подтверждено |
+| Warning | `bg-amber-500/20 text-amber-400` | Ожидание, на модерации |
+| Error | `bg-red-500/20 text-red-400` | Ошибка, отменено |
+
+#### Tailwind-классы
+
+```tsx
+<span className="inline-flex items-center gap-1 px-2.5 py-1 rounded-full
+  bg-indigo-500/20 text-indigo-400 text-xs font-medium">
+  Студия
+</span>
+```
+
+---
+
+### Modal / Dialog
+
+#### Описание
+Модальное окно для форм, подтверждений, детальной информации.
+
+#### Размеры
+
+| Размер | Ширина | Описание |
+|--------|--------|----------|
+| `sm` | 400px | Подтверждения, простые формы |
+| `md` | 500px | Формы входа/регистрации |
+| `lg` | 640px | Сложные формы, детали |
+| `xl` | 800px | Полноэкранный просмотр |
+
+#### Визуал
+
+```
+┌─────────────────────────────────────────┐
+│ Заголовок                    [X закрыть]│
+├─────────────────────────────────────────┤
+│                                         │
+│              Содержимое                 │
+│                                         │
+├─────────────────────────────────────────┤
+│ [Отмена]                    [Действие]  │
+└─────────────────────────────────────────┘
+```
+
+#### Tailwind-классы
+
+```tsx
+// Backdrop
+<div className="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm
+  animate-in fade-in duration-200" />
+
+// Modal
+<div className="fixed left-1/2 top-1/2 z-50
+  -translate-x-1/2 -translate-y-1/2
+  w-full max-w-md p-6
+  bg-zinc-900 border border-zinc-800 rounded-xl shadow-2xl
+  animate-in fade-in zoom-in-95 duration-200">
+
+  {/* Header */}
+  <div className="flex items-center justify-between mb-4">
+    <h2 className="text-lg font-semibold text-zinc-100">
+      Заголовок
+    </h2>
+    <button className="text-zinc-500 hover:text-zinc-300">
+      <XIcon className="w-5 h-5" />
+    </button>
+  </div>
+
+  {/* Content */}
+  <div className="text-zinc-400">
+    Содержимое
+  </div>
+
+  {/* Footer */}
+  <div className="flex justify-end gap-3 mt-6">
+    <button className="secondary">Отмена</button>
+    <button className="primary">Подтвердить</button>
+  </div>
+</div>
+```
+
+#### Доступность
+- `role="dialog"`
+- `aria-modal="true"`
+- `aria-labelledby` для заголовка
+- Фокус внутри модалки (focus trap)
+- Закрытие по Escape
+
+---
+
+### Navigation (Header)
+
+#### Описание
+Верхняя навигация с лого, ссылками и действиями пользователя.
+
+#### Визуал
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│ PhotoPlaces Twilight    Локации  Студии  Фотографы    [Войти] │
+└─────────────────────────────────────────────────────────────┘
+```
+
+#### Tailwind-классы
+
+```tsx
+<header className="sticky top-0 z-40 w-full
+  bg-zinc-950/80 backdrop-blur-xl
+  border-b border-zinc-800">
+
+  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+    <div className="flex h-16 items-center justify-between">
+
+      {/* Logo */}
+      <Link href="/" className="flex items-center gap-2">
+        <CameraIcon className="h-8 w-8 text-indigo-500" />
+        <span className="text-xl font-bold text-zinc-100">
+          PhotoPlaces Twilight
+        </span>
+      </Link>
+
+      {/* Nav Links */}
+      <nav className="hidden md:flex items-center gap-6">
+        <Link href="/places" className="text-sm text-zinc-400 hover:text-zinc-100 transition-colors">
+          Локации
+        </Link>
+        <Link href="/studios" className="text-sm text-zinc-400 hover:text-zinc-100 transition-colors">
+          Студии
+        </Link>
+        <Link href="/photographers" className="text-sm text-zinc-400 hover:text-zinc-100 transition-colors">
+          Фотографы
+        </Link>
+      </nav>
+
+      {/* Actions */}
+      <div className="flex items-center gap-3">
+        <button className="text-sm text-zinc-400 hover:text-zinc-100">
+          Войти
+        </button>
+        <button className="bg-indigo-600 text-white text-sm font-medium px-4 py-2 rounded-lg hover:bg-indigo-500">
+          Регистрация
+        </button>
+      </div>
+
+    </div>
+  </div>
+</header>
+```
+
+---
+
+### Footer
+
+#### Описание
+Подвал сайта с ссылками, копирайтом, соцсетями.
+
+#### Tailwind-классы
+
+```tsx
+<footer className="border-t border-zinc-800 bg-zinc-950">
+  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-12">
+
+    <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
+      {/* Колонка 1: О проекте */}
+      <div>
+        <h3 className="text-sm font-semibold text-zinc-100 mb-4">
+          PhotoPlaces Twilight
+        </h3>
+        <p className="text-sm text-zinc-500">
+          Маркетплейс фотолокаций
+        </p>
+      </div>
+
+      {/* Колонка 2: Навигация */}
+      <div>
+        <h4 className="text-sm font-medium text-zinc-300 mb-3">Навигация</h4>
+        <ul className="space-y-2">
+          <li><a href="/places" className="text-sm text-zinc-500 hover:text-zinc-300">Локации</a></li>
+          <li><a href="/studios" className="text-sm text-zinc-500 hover:text-zinc-300">Студии</a></li>
+        </ul>
+      </div>
+
+      {/* Колонка 3: Контакты */}
+      <div>
+        <h4 className="text-sm font-medium text-zinc-300 mb-3">Контакты</h4>
+        <ul className="space-y-2">
+          <li><a href="mailto:info@photoplaces.ru" className="text-sm text-zinc-500 hover:text-zinc-300">info@photoplaces.ru</a></li>
+        </ul>
+      </div>
+
+      {/* Колонка 4: Соцсети */}
+      <div>
+        <h4 className="text-sm font-medium text-zinc-300 mb-3">Соцсети</h4>
+        <div className="flex gap-3">
+          <a href="#" className="text-zinc-500 hover:text-zinc-300">
+            <TelegramIcon className="w-5 h-5" />
+          </a>
+          <a href="#" className="text-zinc-500 hover:text-zinc-300">
+            <InstagramIcon className="w-5 h-5" />
+          </a>
+          <a href="#" className="text-zinc-500 hover:text-zinc-300">
+            <PinterestIcon className="w-5 h-5" />
+          </a>
+        </div>
+      </div>
+    </div>
+
+    <div className="mt-8 pt-8 border-t border-zinc-800">
+      <p className="text-xs text-zinc-600 text-center">
+        © 2024 PhotoPlaces Twilight. Все права защищены.
+      </p>
+    </div>
+
+  </div>
+</footer>
+```
+
+---
+
+### Toast / Notification
+
+#### Описание
+Всплывающие уведомления о результатах действий.
+
+#### Варианты
+
+| Тип | Иконка | Цвет | Пример |
+|-----|--------|------|--------|
+| Success | CheckCircle | `text-emerald-400` | "Локация добавлена" |
+| Error | XCircle | `text-red-400` | "Ошибка сервера" |
+| Warning | AlertTriangle | `text-amber-400` | "Проверьте данные" |
+| Info | Info | `text-blue-400` | "Отправлена заявка" |
+
+#### Tailwind-классы
+
+```tsx
+<div className="fixed bottom-4 right-4 z-50
+  flex items-center gap-3 px-4 py-3
+  bg-zinc-900 border border-zinc-800 rounded-lg shadow-xl
+  animate-in slide-in-from-bottom-5 fade-in duration-300">
+
+  <CheckCircleIcon className="w-5 h-5 text-emerald-400 shrink-0" />
+  <p className="text-sm text-zinc-100">
+    Локация успешно добавлена!
+  </p>
+  <button className="text-zinc-500 hover:text-zinc-300 ml-2">
+    <XIcon className="w-4 h-4" />
+  </button>
+</div>
+```
+
+---
+
+### Tabs
+
+#### Описание
+Переключение между секциями или вкладками.
+
+#### Tailwind-классы
+
+```tsx
+<div className="border-b border-zinc-800">
+  <nav className="flex gap-6" role="tablist">
+    <button
+      role="tab"
+      aria-selected="true"
+      className="py-3 text-sm font-medium text-indigo-400 border-b-2 border-indigo-400"
+    >
+      Вкладка 1
+    </button>
+    <button
+      role="tab"
+      aria-selected="false"
+      className="py-3 text-sm font-medium text-zinc-500 hover:text-zinc-300 border-b-2 border-transparent"
+    >
+      Вкладка 2
+    </button>
+  </nav>
+</div>
+```
+
+---
+
+### Tooltip / Popover
+
+#### Описание
+Вспомогательная информация при наведении.
+
+#### Tailwind-классы
+
+```tsx
+<div className="relative group">
+  <button>Элемент</button>
+  <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2
+    px-3 py-1.5 rounded-lg
+    bg-zinc-800 text-zinc-200 text-xs
+    opacity-0 group-hover:opacity-100
+    transition-opacity duration-200
+    pointer-events-none
+    whitespace-nowrap">
+    Подсказка
+    <div className="absolute top-full left-1/2 -translate-x-1/2
+      border-4 border-transparent border-t-zinc-800" />
+  </div>
+</div>
+```
+
+---
+
+### Table
+
+#### Описание
+Таблица данных для админки, списков бронирований.
+
+#### Tailwind-классы
+
+```tsx
+<div className="overflow-x-auto rounded-lg border border-zinc-800">
+  <table className="w-full text-sm">
+    <thead>
+      <tr className="border-b border-zinc-800 bg-zinc-900/50">
+        <th className="text-left py-3 px-4 font-medium text-zinc-400">Название</th>
+        <th className="text-left py-3 px-4 font-medium text-zinc-400">Статус</th>
+        <th className="text-left py-3 px-4 font-medium text-zinc-400">Дата</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr className="border-b border-zinc-800/50 hover:bg-zinc-900/50 transition-colors">
+        <td className="py-3 px-4 text-zinc-100">Название</td>
+        <td className="py-3 px-4">
+          <span className="inline-flex px-2 py-1 rounded-full bg-emerald-500/20 text-emerald-400 text-xs">
+            Активно
+          </span>
+        </td>
+        <td className="py-3 px-4 text-zinc-400">01.01.2024</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+```
+
+---
+
+## 6. АНИМАЦИИ И ПЕРЕХОДЫ
+
+### Длительность
+
+| Токен | Значение | Использование |
+|-------|----------|---------------|
+| `--duration-fast` | 100ms | Hover-эффекты, color transitions |
+| `--duration-normal` | 200ms | Toggle, appearance |
+| `--duration-slow` | 300ms | Modal, dropdown |
+| `--duration-slower` | 500ms | Page transitions, complex |
+
+### Кривые
+
+| Токен | Значение | Использование |
+|-------|----------|---------------|
+| `--ease-default` | `cubic-bezier(0.4, 0, 0.2, 1)` | Стандартные переходы |
+| `--ease-in` | `cubic-bezier(0.4, 0, 1, 1)` | Уход элементов |
+| `--ease-out` | `cubic-bezier(0, 0, 0.2, 1)` | Появление элементов |
+| `--ease-spring` | `cubic-bezier(0.34, 1.56, 0.64, 1)` | Bounce-эффекты |
+
+### Примеры анимаций
+
+```css
+/* Появление модалки */
+@keyframes modal-in {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+/* Slide-in toast */
+@keyframes toast-in {
+  from {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Shimmer для skeleton */
+@keyframes shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+
+.skeleton {
+  background: linear-gradient(
+    90deg,
+    var(--bg-elevated) 25%,
+    var(--bg-hover) 50%,
+    var(--bg-elevated) 75%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+}
+```
+
+---
+
+## 7. ПРАВИЛА И ПРИНЦИПЫ
+
+### 1. Content First (Контент важнее декора)
+
+Фотографии — главные герои. Интерфейс обрамляет, но не перетягивает внимание.
+
+**Плохо:** Яркие рамки вокруг фото, мигающие кнопки, слишком много цвета
+**Хорошо:** Фото занимает 70% карточки, UI — тихий фон
+
+---
+
+### 2. Clarity Over Cleverness (Понятность важнее красивости)
+
+Пользователь должен понимать, что делать, без инструкций.
+
+**Плохо:** Кнопка-иконка без подписи,神秘ные жесты
+**Хорошо:** "Забронировать" вместо просто иконки корзины
+
+---
+
+### 3. Accessible by Default (Доступность не опциональность)
+
+Каждый элемент должен работать для всех пользователей.
+
+**Плохо:** Серый текст на сером фоне, нет фокуса, нет aria
+**Хорошо:** Контраст 4.5:1, видимый фокус, семантический HTML
+
+---
+
+### 4. Consistent Rhythm (Единый ритм)
+
+Отступы, размеры, анимации следуют единой системе.
+
+**Плохо:** Разные отступы в карточках, рандомные размеры шрифтов
+**Хорошо:** Везде spacing-4, text-sm для описаний, radius-lg для карточек
+
+---
+
+### 5. Progressive Disclosure (Показывай по необходимости)
+
+Не перегружай интерфейс. Показывай детали по мере необходимости.
+
+**Плохо:** Вся форма бронирования на главной
+**Хорошо:** Сначала карточка → клик → модалка с формой
+
+---
+
+## 8. ТОКЕНЫ ДЛЯ FIGMA
+
+### JSON-структура (Tokens Studio)
+
+> PhotoPlaces Twilight Design Tokens
+
+```json
+{
+  "colors": {
+    "primary": {
+      "50": "#EEF2FF",
+      "100": "#E0E7FF",
+      "200": "#C7D2FE",
+      "300": "#A5B4FC",
+      "400": "#818CF8",
+      "500": "#6366F1",
+      "600": "#4F46E5",
+      "700": "#4338CA",
+      "800": "#3730A3",
+      "900": "#312E81"
+    },
+    "secondary": {
+      "500": "#F59E0B",
+      "600": "#D97706"
+    },
+    "accent": {
+      "500": "#06B6D4",
+      "600": "#0891B2"
+    },
+    "neutral": {
+      "50": "#FAFAFA",
+      "100": "#F4F4F5",
+      "200": "#E4E4E7",
+      "300": "#D4D4D8",
+      "400": "#A1A1AA",
+      "500": "#71717A",
+      "600": "#52525B",
+      "700": "#3F3F46",
+      "800": "#27272A",
+      "900": "#18181B",
+      "950": "#09090B"
+    },
+    "success": { "500": "#22C55E" },
+    "warning": { "500": "#F59E0B" },
+    "error": { "500": "#EF4444" },
+    "info": { "500": "#3B82F6" }
+  },
+  "typography": {
+    "fontFamily": {
+      "heading": "Inter, sans-serif",
+      "body": "Inter, sans-serif",
+      "mono": "JetBrains Mono, monospace"
+    },
+    "fontSize": {
+      "xs": { "value": "12px", "lineHeight": "16px" },
+      "sm": { "value": "14px", "lineHeight": "20px" },
+      "base": { "value": "16px", "lineHeight": "24px" },
+      "lg": { "value": "18px", "lineHeight": "28px" },
+      "xl": { "value": "20px", "lineHeight": "28px" },
+      "2xl": { "value": "24px", "lineHeight": "32px" },
+      "3xl": { "value": "30px", "lineHeight": "36px" },
+      "4xl": { "value": "36px", "lineHeight": "40px" },
+      "5xl": { "value": "48px", "lineHeight": "48px" }
+    },
+    "fontWeight": {
+      "normal": "400",
+      "medium": "500",
+      "semibold": "600",
+      "bold": "700"
+    }
+  },
+  "spacing": {
+    "0": "0px",
+    "0.5": "2px",
+    "1": "4px",
+    "1.5": "6px",
+    "2": "8px",
+    "3": "12px",
+    "4": "16px",
+    "5": "20px",
+    "6": "24px",
+    "8": "32px",
+    "10": "40px",
+    "12": "48px",
+    "16": "64px",
+    "20": "80px"
+  },
+  "borderRadius": {
+    "sm": "6px",
+    "md": "8px",
+    "lg": "12px",
+    "xl": "16px",
+    "2xl": "24px",
+    "full": "9999px"
+  },
+  "boxShadow": {
+    "sm": "0 1px 2px rgba(0,0,0,0.4)",
+    "md": "0 4px 6px -1px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3)",
+    "lg": "0 10px 15px -3px rgba(0,0,0,0.4), 0 4px 6px rgba(0,0,0,0.3)",
+    "xl": "0 20px 25px -5px rgba(0,0,0,0.4), 0 8px 10px rgba(0,0,0,0.3)",
+    "glow": "0 0 20px rgba(99,102,241,0.3)"
+  },
+  "duration": {
+    "fast": "100ms",
+    "normal": "200ms",
+    "slow": "300ms",
+    "slower": "500ms"
+  }
+}
+```
+
+---
+
+## 9. CSS-ПЕРЕМЕННЫЕ
+
+```css
+/* PhotoPlaces Twilight Design System */
+:root {
+  /* ========== LIGHT THEME ========== */
+  --bg: #FAFAFA;
+  --bg-elevated: #FFFFFF;
+  --bg-hover: #F4F4F5;
+  --border: #E4E4E7;
+  --border-subtle: #F4F4F5;
+  --text-primary: #18181B;
+  --text-secondary: #52525B;
+  --text-muted: #A1A1AA;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
+  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06);
+  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
+}
+
+[data-theme="dark"] {
+  /* ========== DARK THEME ========== */
+  --bg: #09090B;
+  --bg-elevated: #18181B;
+  --bg-hover: #27272A;
+  --border: #3F3F46;
+  --border-subtle: #27272A;
+  --text-primary: #FAFAFA;
+  --text-secondary: #A1A1AA;
+  --text-muted: #71717A;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
+  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3);
+  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.4), 0 4px 6px rgba(0,0,0,0.3);
+}
+
+:root {
+  /* ========== COLORS ========== */
+  --primary: #6366F1;
+  --primary-hover: #4F46E5;
+  --secondary: #F59E0B;
+  --accent: #06B6D4;
+
+  /* Functional */
+  --success: #22C55E;
+  --warning: #F59E0B;
+  --error: #EF4444;
+  --info: #3B82F6;
+
+  /* ========== TYPOGRAPHY ========== */
+  --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
+
+  /* ========== SPACING ========== */
+  --space-0: 0px;
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-10: 40px;
+  --space-12: 48px;
+  --space-16: 64px;
+  --space-20: 80px;
+
+  /* ========== BORDER RADIUS ========== */
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+  --radius-2xl: 24px;
+  --radius-full: 9999px;
+
+  /* ========== TRANSITIONS ========== */
+  --duration-fast: 100ms;
+  --duration-normal: 200ms;
+  --duration-slow: 300ms;
+  --duration-slower: 500ms;
+
+  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+```
+
+---
+
+## 10. TAILWIND CONFIG
+
+```javascript
+// tailwind.config.js
+// PhotoPlaces Twilight Design System
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./src/**/*.{ts,tsx}'],
+  darkMode: ['class', '[data-theme="dark"]'],
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          50: '#EEF2FF',
+          100: '#E0E7FF',
+          200: '#C7D2FE',
+          300: '#A5B4FC',
+          400: '#818CF8',
+          500: '#6366F1',
+          600: '#4F46E5',
+          700: '#4338CA',
+          800: '#3730A3',
+          900: '#312E81',
+        },
+        secondary: {
+          500: '#F59E0B',
+          600: '#D97706',
+        },
+        accent: {
+          500: '#06B6D4',
+          600: '#0891B2',
+        },
+      },
+      fontFamily: {
+        heading: ['Inter', 'sans-serif'],
+        body: ['Inter', 'sans-serif'],
+        mono: ['JetBrains Mono', 'monospace'],
+      },
+      fontSize: {
+        'xs': ['12px', { lineHeight: '16px' }],
+        'sm': ['14px', { lineHeight: '20px' }],
+        'base': ['16px', { lineHeight: '24px' }],
+        'lg': ['18px', { lineHeight: '28px' }],
+        'xl': ['20px', { lineHeight: '28px' }],
+        '2xl': ['24px', { lineHeight: '32px' }],
+        '3xl': ['30px', { lineHeight: '36px' }],
+        '4xl': ['36px', { lineHeight: '40px' }],
+        '5xl': ['48px', { lineHeight: '48px' }],
+      },
+      spacing: {
+        '0.5': '2px',
+        '1.5': '6px',
+        '18': '72px',
+        '88': '352px',
+      },
+      borderRadius: {
+        'sm': '6px',
+        'md': '8px',
+        'lg': '12px',
+        'xl': '16px',
+        '2xl': '24px',
+      },
+      boxShadow: {
+        'glow': '0 0 20px rgba(99,102,241,0.3)',
+        'glow-lg': '0 0 40px rgba(99,102,241,0.4)',
+      },
+      animation: {
+        'fade-in': 'fade-in 0.2s ease-out',
+        'slide-up': 'slide-up 0.3s ease-out',
+        'slide-down': 'slide-down 0.3s ease-out',
+        'scale-in': 'scale-in 0.2s ease-out',
+      },
+      keyframes: {
+        'fade-in': {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' },
+        },
+        'slide-up': {
+          '0%': { transform: 'translateY(10px)', opacity: '0' },
+          '100%': { transform: 'translateY(0)', opacity: '1' },
+        },
+        'slide-down': {
+          '0%': { transform: 'translateY(-10px)', opacity: '0' },
+          '100%': { transform: 'translateY(0)', opacity: '1' },
+        },
+        'scale-in': {
+          '0%': { transform: 'scale(0.95)', opacity: '0' },
+          '100%': { transform: 'scale(1)', opacity: '1' },
+        },
+      },
+    },
+  },
+  plugins: [
+    require('tailwindcss-animate'),
+  ],
+}
+```