/*
 * Единая цветовая палитра для CoffeeRanks
 * ЭТАП 5: Централизованная система цветов
 * Дата: 2025-07-07
 */

/* =============================================================================
   CSS ПЕРЕМЕННЫЕ - ЦВЕТОВАЯ ПАЛИТРА
   ============================================================================= */

:root {
  /* ==========================================================================
     ОСНОВНЫЕ ЦВЕТА БРЕНДА
     ========================================================================== */
  
  /* Кофейная палитра */
  --primary-coffee: #C0592A;        /* Насыщенный кофейный - основной цвет */
  --secondary-coffee: #8B4513;      /* Темный кофейный - второстепенный */
  --accent-gold: #FFD700;           /* Золотистый акцент - премиум элементы */
  --neutral-cream: #F5F1E9;         /* Кремовый фон - мягкий фон */
  --dark-roast: #2C1E10;           /* Темно-коричневый - заголовки */
  --light-roast: #D2B48C;          /* Светло-коричневый - дополнительный */
  
  /* Нейтральные цвета */
  --white: #FFFFFF;
  --gray-50: #F8F9FA;
  --gray-100: #F5F1E9;
  --gray-200: #E9ECEF;
  --gray-300: #DEE2E6;
  --gray-400: #CED4DA;
  --gray-500: #ADB5BD;
  --gray-600: #6C757D;
  --gray-700: #495057;
  --gray-800: #343A40;
  --gray-900: #212529;
  --black: #000000;

  /* ==========================================================================
     ТЕКСТОВЫЕ ЦВЕТА
     ========================================================================== */
  
  --text-primary: #2C1E10;          /* Основной текст - темно-коричневый */
  --text-secondary: #666666;        /* Второстепенный текст */
  --text-tertiary: #999999;         /* Вспомогательный текст */
  --text-light: #FFFFFF;            /* Светлый текст на темном фоне */
  --text-muted: #ADB5BD;            /* Приглушенный текст */
  --text-placeholder: #6C757D;      /* Placeholder текст */
  
  /* Ссылки */
  --link-color: #C0592A;            /* Цвет ссылок */
  --link-hover: #8B4513;            /* Цвет ссылок при hover */
  --link-visited: #7B4173;          /* Цвет посещенных ссылок */

  /* ==========================================================================
     СОСТОЯНИЯ И УВЕДОМЛЕНИЯ
     ========================================================================== */
  
  /* Успех */
  --success: #28A745;               /* Зеленый - успешные операции */
  --success-light: #D4EDDA;         /* Светло-зеленый фон */
  --success-dark: #155724;          /* Темно-зеленый текст */
  
  /* Предупреждение */
  --warning: #FFC107;               /* Желтый - предупреждения */
  --warning-light: #FFF3CD;         /* Светло-желтый фон */
  --warning-dark: #856404;          /* Темно-желтый текст */
  
  /* Ошибка */
  --error: #DC3545;                 /* Красный - ошибки */
  --error-light: #F8D7DA;           /* Светло-красный фон */
  --error-dark: #721C24;            /* Темно-красный текст */
  
  /* Информация */
  --info: #17A2B8;                  /* Голубой - информация */
  --info-light: #D1ECF1;            /* Светло-голубой фон */
  --info-dark: #0C5460;             /* Темно-голубой текст */

  /* ==========================================================================
     ВКУСОВЫЕ НОТЫ
     ========================================================================== */
  
  /* Фруктовые ноты */
  --taste-fruity: #E8F5E8;          /* Фон фруктовых нот */
  --taste-fruity-text: #2E7D32;     /* Текст фруктовых нот */
  --taste-fruity-border: #4CAF50;   /* Граница фруктовых нот */
  
  /* Ореховые ноты */
  --taste-nutty: #FFF3E0;           /* Фон ореховых нот */
  --taste-nutty-text: #F57C00;      /* Текст ореховых нот */
  --taste-nutty-border: #FF9800;    /* Граница ореховых нот */
  
  /* Шоколадные ноты */
  --taste-chocolate: #EFEBE9;       /* Фон шоколадных нот */
  --taste-chocolate-text: #5D4037;  /* Текст шоколадных нот */
  --taste-chocolate-border: #8D6E63; /* Граница шоколадных нот */
  
  /* Цветочные ноты */
  --taste-floral: #F3E5F5;          /* Фон цветочных нот */
  --taste-floral-text: #7B1FA2;     /* Текст цветочных нот */
  --taste-floral-border: #9C27B0;   /* Граница цветочных нот */
  
  /* Пряные ноты */
  --taste-spicy: #FFF3E0;           /* Фон пряных нот */
  --taste-spicy-text: #FF8F00;      /* Текст пряных нот */
  --taste-spicy-border: #FFA000;    /* Граница пряных нот */
  
  /* Карамельные ноты */
  --taste-caramel: #FFF8E1;         /* Фон карамельных нот */
  --taste-caramel-text: #F9A825;    /* Текст карамельных нот */
  --taste-caramel-border: #FFC107;  /* Граница карамельных нот */
  
  /* Цитрусовые ноты */
  --taste-citrus: #FFF8E1;          /* Фон цитрусовых нот */
  --taste-citrus-text: #F57F17;     /* Текст цитрусовых нот */
  --taste-citrus-border: #FF9800;   /* Граница цитрусовых нот */
  
  /* Винные ноты */
  --taste-wine: #FCE4EC;            /* Фон винных нот */
  --taste-wine-text: #C2185B;       /* Текст винных нот */
  --taste-wine-border: #E91E63;     /* Граница винных нот */
  
  /* Земляные ноты */
  --taste-earthy: #F3E5F5;          /* Фон земляных нот */
  --taste-earthy-text: #795548;     /* Текст земляных нот */
  --taste-earthy-border: #A1887F;   /* Граница земляных нот */

  /* ==========================================================================
     ИНТЕРФЕЙСНЫЕ ЭЛЕМЕНТЫ
     ========================================================================== */
  
  /* Кнопки */
  --btn-primary-bg: #C0592A;        /* Фон основной кнопки */
  --btn-primary-text: #FFFFFF;      /* Текст основной кнопки */
  --btn-primary-hover: #A04726;     /* Фон основной кнопки при hover */
  --btn-primary-active: #8B3E1F;    /* Фон основной кнопки при active */
  
  --btn-secondary-bg: #8B4513;      /* Фон второстепенной кнопки */
  --btn-secondary-text: #FFFFFF;    /* Текст второстепенной кнопки */
  --btn-secondary-hover: #703419;   /* Фон второстепенной кнопки при hover */
  
  --btn-outline-border: #C0592A;    /* Граница контурной кнопки */
  --btn-outline-text: #C0592A;      /* Текст контурной кнопки */
  --btn-outline-hover-bg: #C0592A;  /* Фон контурной кнопки при hover */
  --btn-outline-hover-text: #FFFFFF; /* Текст контурной кнопки при hover */
  
  /* Формы */
  --input-border: #CED4DA;          /* Граница полей ввода */
  --input-border-focus: #C0592A;    /* Граница полей ввода при фокусе */
  --input-bg: #FFFFFF;              /* Фон полей ввода */
  --input-text: #2C1E10;            /* Текст полей ввода */
  --input-placeholder: #6C757D;     /* Placeholder полей ввода */
  
  /* Навигация */
  --nav-bg: #FFFFFF;                /* Фон навигации */
  --nav-text: #2C1E10;              /* Текст навигации */
  --nav-link-hover: #C0592A;        /* Цвет ссылок навигации при hover */
  --nav-border: #DEE2E6;            /* Граница навигации */
  
  /* Карточки */
  --card-bg: #FFFFFF;               /* Фон карточек */
  --card-border: #DEE2E6;           /* Граница карточек */
  --card-shadow: rgba(0, 0, 0, 0.1); /* Тень карточек */
  --card-hover-shadow: 0 0 0 4px rgba(192, 89, 42, 0.2); /* Тень карточек при hover */

  /* ==========================================================================
     РЕЙТИНГИ И ЗВЕЗДЫ
     ========================================================================== */
  
  --star-active: #FFD700;           /* Цвет активных звезд */
  --star-inactive: #E9ECEF;         /* Цвет неактивных звезд */
  --rating-text: #666666;           /* Цвет текста рейтинга */

  /* ==========================================================================
     БЕЙДЖИ И МЕТКИ
     ========================================================================== */
  
  --badge-new-bg: #28A745;          /* Фон бейджа "Новинка" */
  --badge-new-text: #FFFFFF;        /* Текст бейджа "Новинка" */
  
  --badge-popular-bg: #FFC107;      /* Фон бейджа "Популярное" */
  --badge-popular-text: #856404;    /* Текст бейджа "Популярное" */
  
  --badge-limited-bg: #DC3545;      /* Фон бейджа "Ограниченная серия" */
  --badge-limited-text: #FFFFFF;    /* Текст бейджа "Ограниченная серия" */

  /* ==========================================================================
     ФОНЫ И СЕКЦИИ
     ========================================================================== */
  
  --section-bg: #FFFFFF;            /* Основной фон секций */
  --section-alt-bg: #F8F9FA;        /* Альтернативный фон секций */
  --hero-bg: linear-gradient(135deg, #F5F1E9 0%, #FFFFFF 100%); /* Фон hero секции */
  --footer-bg: #2C1E10;             /* Фон подвала */
  --footer-text: #FFFFFF;           /* Текст подвала */

  /* ==========================================================================
     ТЕНИ И ЭФФЕКТЫ
     ========================================================================== */
  
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);

  /* ==========================================================================
     ПЕРЕХОДЫ И АНИМАЦИИ
     ========================================================================== */
  
  --transition-fast: 0.15s ease-in-out;    /* Быстрые переходы */
  --transition-normal: 0.3s ease-in-out;   /* Обычные переходы */
  --transition-slow: 0.45s ease-in-out;    /* Медленные переходы */

  /* ==========================================================================
     РАЗМЕРЫ И ОТСТУПЫ
     ========================================================================== */
  
  --border-radius-sm: 4px;          /* Маленький радиус скругления */
  --border-radius-md: 8px;          /* Средний радиус скругления */
  --border-radius-lg: 12px;         /* Большой радиус скругления */
  --border-radius-xl: 16px;         /* Очень большой радиус скругления */
  
  --spacing-xs: 0.25rem;            /* 4px */
  --spacing-sm: 0.5rem;             /* 8px */
  --spacing-md: 1rem;               /* 16px */
  --spacing-lg: 1.5rem;             /* 24px */
  --spacing-xl: 2rem;               /* 32px */
  --spacing-2xl: 3rem;              /* 48px */
}

/* =============================================================================
   ТЕМНАЯ ТЕМА (ОПЦИОНАЛЬНО)
   ============================================================================= */

@media (prefers-color-scheme: dark) {
  :root {
    /* Инвертированные цвета для темной темы */
    --text-primary: #F5F1E9;
    --text-secondary: #ADB5BD;
    --section-bg: #212529;
    --section-alt-bg: #343A40;
    --card-bg: #343A40;
    --nav-bg: #2C1E10;
    
    /* Сохраняем акцентные цвета */
    --primary-coffee: #C0592A;
    --secondary-coffee: #8B4513;
  }
}

/* =============================================================================
   ACCESSIBILITY - ВЫСОКИЙ КОНТРАСТ
   ============================================================================= */

@media (prefers-contrast: high) {
  :root {
    /* Увеличиваем контрастность для людей с нарушениями зрения */
    --text-primary: #000000;
    --text-secondary: #333333;
    --btn-primary-bg: #000000;
    --card-border: #000000;
  }
}