/* ========================================
   VARS.CSS - Переменные и настройки
   Тема: Bestiffany - Камерный арт-салон (Premium Dark & Gold)
   ======================================== */

/* ========================================
   1. ЦВЕТОВЫЕ ПЕРЕМЕННЫЕ
   ======================================== */
:root {
  /* === Основные цвета бренда (Графит и Слива) === */
  --color-primary: #1d1b24;        /* Глубокий темно-сливовый графит (Основной фон) */
  --color-primary-dark: #141218;   /* Почти черный (для футера и теней) */
  --color-primary-light: #2d2a36;  /* Светлый графит (для панелей) */
  
  --color-secondary: #3a342c;      /* Теплый серо-коричневый (Дополнительный) */
  
  /* === Акценты (Античное золото / Витражный свет) === */
  --color-accent: #c5a059;         /* Благородная бронза (Кнопки, иконки, ссылки) */
  --color-accent-hover: #e2bd78;   /* Светлое золото (Ховеры) */
  
  /* === Нейтральные цвета (Бежевая гамма) === */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gray-100: #fdfbf7;      /* Молочный */
  --color-gray-200: #f5f1e7;      /* Базовый беж */
  --color-gray-300: #e2d5c3;      /* Песочный */
  --color-gray-400: #cbbba4;
  --color-gray-500: #a89985;
  --color-gray-600: #867968;
  --color-gray-700: #5c5346;
  --color-gray-800: #3a342c;
  --color-gray-900: #211d18;
  
  /* === Цвета текста === */
  --color-text: #2c2824;           /* Основной текст на бежевом фоне */
  --color-text-light: #e2d5c3;     /* Светлый текст на темном фоне */
  --color-text-primary: #1d1b24;   /* Заголовки */
  --color-text-muted: #867968;     /* Неактивный текст */
  --color-link: var(--color-accent);
  
  /* === Фоновые цвета и Спецэффекты === */
  --bg-body: var(--color-primary); /* Темная база сайта */
  --bg-content-beige: rgba(245, 241, 231, 0.92); /* Полупрозрачный беж (Content Area) */
  --bg-light: #f5f1e7; 
  --bg-glass-white: rgba(255, 255, 255, 0.05); /* Для карточек на темном фоне */
  
  /* === Цвета состояний === */
  --color-success: #3e5a47;        /* Приглушенный хвойный */
  --color-danger: #8b3a3a;         /* Глубокий винный */
  --color-warning: #c5a059;
  --color-info: #4a6a8a;
  
  /* === Границы и Скроллбар === */
  --color-border: rgba(197, 160, 89, 0.2); /* Бронзовая полупрозрачная граница */
  --color-scrollbar-thumb: var(--color-accent);
}

/* ========================================
   2. ГРАДИЕНТЫ И ФИЛЬТРЫ
   ======================================== */
:root {
  /* Градиент для кнопок (Эффект свечения бронзы) */
  --gradient-btn-custom: linear-gradient(135deg, #c5a059 0%, #8e6d31 100%);
  --gradient-btn-custom-hover: linear-gradient(135deg, #e2bd78 0%, #c5a059 100%);
  
  /* Градиент для глубокого футера */
  --gradient-footer: linear-gradient(to bottom, #1d1b24, #0a090c);
  
  /* Эффект матового стекла */
  --filter-blur: blur(12px);
}

/* ========================================
   3. ТИПОГРАФИКА
   ======================================== */
:root {
  /* Заголовочный: Антиква (нужно подключить Playfair Display или аналогичный) */
  --font-family-heading: 'Playfair Display', serif; 
  /* Основной: Гротеск (Montserrat или Roboto) */
  --font-family-base: 'Montserrat', -apple-system, sans-serif;
  
  --font-size-base: 1rem;       /* 16px */
  --font-size-lg: 1.125rem;    /* 18px */
  --font-size-xl: 1.5rem;      /* 24px */
  --font-size-xxl: 2.5rem;     /* 40px */
  
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 600;
  
  --line-height-base: 1.6;
}

/* ========================================
   4. РАЗМЕРЫ И ОТСТУПЫ
   ======================================== */
:root {
  --spacing-base: 1rem;
  --container-max-width: 1240px;
  --header-height: 100px;
  
  --border-radius: 4px;        /* Острые углы выглядят строже и дороже */
  --border-radius-lg: 8px;
  --border-radius-full: 9999px;
}

/* ========================================
   5. ТЕНИ И ЭФФЕКТЫ
   ======================================== */
:root {
  /* Тени стали более мягкими и "тяжелыми" */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 15px 50px rgba(0, 0, 0, 0.4);
  
  --transition-base: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================
   6. Z-ИНДЕКСЫ
   ======================================== */
:root {
  --z-index-header: 1000;
  --z-index-modal: 2000;
}

/* ========================================
   УТИЛИТЫ ДЛЯ ТЕСТОВОГО ДВИЖКА
   ======================================== */

/* Тот самый "Стеклянный" блок контента */
.content-glass-panel {
  background-color: var(--bg-content-beige);
  backdrop-filter: var(--filter-blur);
  -webkit-backdrop-filter: var(--filter-blur);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: var(--shadow-lg);
  color: var(--color-text);
  padding: 3rem;
  border-radius: var(--border-radius-lg);
}

/* Настройки для заголовков */
.heading-art {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.03em;
  color: var(--color-primary);
}

/* Акцентная кнопка */
.btn-premium {
  background: var(--gradient-btn-custom);
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: var(--font-weight-bold);
  padding: 12px 30px;
  border: none;
  transition: var(--transition-base);
  cursor: pointer;
}

.btn-premium:hover {
  background: var(--gradient-btn-custom-hover);
  box-shadow: 0 0 15px rgba(197, 160, 89, 0.4);
}