/* ========================================
   SCARFACE - ЦВЕТОВАЯ ПАЛИТРА САЙТА
   ======================================== */

/* Основные цвета */
:root {
  /* Основная палитра */
  --primary-color: #00ffcc;           /* Бирюзовый акцент */
  --primary-dark: #00cc99;           /* Темно-бирюзовый */
  --primary-light: #33ffdd;          /* Светло-бирюзовый */
  
  /* Фоновые цвета секций */
  --bg-hero: #000000;                /* Главная - чисто черный */
  --bg-about: #111111;               /* О компании - очень темно-серый */
  --bg-partners: #222222;            /* Партнеры - темно-серый */
  --bg-projects: #000000;            /* Проекты - черный как главная */
  --bg-team: #444444;                /* Команда - средне-серый */
  --bg-contact: #555555;             /* Контакты - светло-серый */
  
  /* Текстовые цвета */
  --text-primary: #ffffff;           /* Основной белый текст */
  --text-secondary: #cccccc;        /* Вторичный серый текст */
  --text-muted: #999999;             /* Приглушенный текст */
  --text-accent: #00ffcc;            /* Акцентный бирюзовый */
  
  /* Градиенты */
  --gradient-primary: linear-gradient(135deg, #00ffcc 0%, #00cc99 100%);
  --gradient-dark: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%);
  --gradient-hero: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  
  /* Прозрачности */
  --overlay-light: rgba(255, 255, 255, 0.1);
  --overlay-medium: rgba(255, 255, 255, 0.2);
  --overlay-dark: rgba(0, 0, 0, 0.3);
  --overlay-primary: rgba(0, 255, 204, 0.1);
  
  /* Тени */
  --shadow-light: 0 4px 15px rgba(0, 0, 0, 0.2);
  --shadow-medium: 0 8px 25px rgba(0, 0, 0, 0.3);
  --shadow-heavy: 0 12px 35px rgba(0, 0, 0, 0.4);
  --shadow-primary: 0 8px 25px rgba(0, 255, 204, 0.3);
  --shadow-glow: 0 0 20px rgba(0, 255, 204, 0.5);
  
  /* Границы */
  --border-light: 1px solid rgba(255, 255, 255, 0.1);
  --border-medium: 1px solid rgba(255, 255, 255, 0.2);
  --border-primary: 1px solid rgba(0, 255, 204, 0.3);
  --border-accent: 2px solid rgba(0, 255, 204, 0.5);
  
  /* Состояния */
  --hover-bg: rgba(0, 255, 204, 0.1);
  --active-bg: rgba(0, 255, 204, 0.2);
  --focus-ring: 0 0 0 3px rgba(0, 255, 204, 0.3);
  
  /* Статусы */
  --success-color: #00ff88;          /* Зеленый успех */
  --warning-color: #ffaa00;          /* Оранжевый предупреждение */
  --error-color: #ff4444;            /* Красный ошибка */
  --info-color: #4488ff;             /* Синий информация */
}

/* ========================================
   КОМПОНЕНТЫ С ЦВЕТОВОЙ СТИЛИСТИКОЙ
   ======================================== */

/* Кнопки */
.btn-primary {
  background: var(--gradient-primary);
  color: var(--text-primary);
  border: var(--border-primary);
  box-shadow: var(--shadow-primary);
}

.btn-primary:hover {
  background: var(--primary-dark);
  box-shadow: var(--shadow-glow);
  transform: translateY(-2px);
}

.btn-secondary {
  background: transparent;
  color: var(--text-primary);
  border: var(--border-medium);
}

.btn-secondary:hover {
  background: var(--hover-bg);
  border-color: var(--primary-color);
  color: var(--primary-color);
}

/* Карточки */
.card {
  background: var(--overlay-light);
  border: var(--border-light);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-light);
}

.card:hover {
  background: var(--overlay-medium);
  border-color: var(--primary-color);
  box-shadow: var(--shadow-primary);
  transform: translateY(-4px);
}

/* Навигация */
.nav-link {
  color: var(--text-primary);
  border: var(--border-light);
  background: var(--overlay-light);
}

.nav-link:hover {
  color: var(--primary-color);
  background: var(--hover-bg);
  border-color: var(--primary-color);
  box-shadow: var(--shadow-primary);
}

/* Формы */
.form-input {
  background: var(--overlay-light);
  border: var(--border-light);
  color: var(--text-primary);
}

.form-input:focus {
  border-color: var(--primary-color);
  box-shadow: var(--focus-ring);
  background: var(--overlay-medium);
}

/* Статистика */
.stat-number {
  color: var(--primary-color);
}

.stat-label {
  color: var(--text-secondary);
}

/* Логотип */
.logo-left {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  color: #000;
}

.logo-right {
  background: linear-gradient(135deg, #808080 0%, #696969 100%);
  color: #fff;
}

/* Секции */
.hero-section {
  background: var(--bg-hero);
}

.about-company-section {
  background: var(--bg-about);
}

.partners-section {
  background: var(--bg-partners);
}

.projects-section {
  background: var(--bg-projects);
}

.team-section {
  background: var(--bg-team);
}

.contact-section {
  background: var(--bg-contact);
}

/* ========================================
   УТИЛИТЫ ЦВЕТОВ
   ======================================== */

/* Текстовые цвета */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-accent { color: var(--text-accent); }

/* Фоновые цвета */
.bg-primary { background: var(--primary-color); }
.bg-dark { background: var(--bg-about); }
.bg-darker { background: var(--bg-hero); }

/* Границы */
.border-primary { border: var(--border-primary); }
.border-accent { border: var(--border-accent); }

/* Тени */
.shadow-primary { box-shadow: var(--shadow-primary); }
.shadow-glow { box-shadow: var(--shadow-glow); }

/* ========================================
   АНИМАЦИИ ЦВЕТОВ
   ======================================== */

@keyframes colorPulse {
  0%, 100% { 
    color: var(--primary-color);
    text-shadow: 0 0 5px var(--primary-color);
  }
  50% { 
    color: var(--primary-light);
    text-shadow: 0 0 15px var(--primary-color);
  }
}

@keyframes glowPulse {
  0%, 100% { 
    box-shadow: var(--shadow-primary);
  }
  50% { 
    box-shadow: var(--shadow-glow);
  }
}

/* Применение анимаций */
.animated-text {
  animation: colorPulse 2s ease-in-out infinite;
}

.animated-glow {
  animation: glowPulse 2s ease-in-out infinite;
}

/* ========================================
   АДАПТИВНЫЕ ЦВЕТА
   ======================================== */

@media (max-width: 768px) {
  :root {
    --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-medium: 0 4px 15px rgba(0, 0, 0, 0.3);
    --shadow-heavy: 0 6px 20px rgba(0, 0, 0, 0.4);
  }
}

@media (max-width: 480px) {
  :root {
    --overlay-light: rgba(255, 255, 255, 0.05);
    --overlay-medium: rgba(255, 255, 255, 0.1);
  }
}