@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap');

:root {
  --color-dark: #3a2a20;
  --color-darker: #2A1F14;
  --color-white: #ffffff;
  --color-white-secondary: #E8E8E8;
  --color-gray: #a09080;
  --color-gray-dark: #6b5040;
  --color-gold: #c49448;
  --color-gold-light: #d4a85a;
  --color-gold-dark: #a67c3a;
  --color-accent: #c49448;
  
  /* Светлая тема */
  --color-light: #F5F0E8;
  --color-light-secondary: #EDE8E0;
  --color-light-tertiary: #E5DFD5;
  --color-text-dark: #2A1F14;
  --color-text-medium: #5A4F45;
  --color-text-light: rgba(255, 255, 255, 0.9);
  --color-text-light-secondary: rgba(255, 255, 255, 0.7);
  
  --font-heading: 'Playfair Display', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
  
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --radius: 12px;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: var(--font-body);
  background-color: var(--color-dark);
  color: var(--color-white-secondary);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.2;
}

/* Текст на тёмном фоне - белый */
.section--dark,
.hero,
.about,
.services,
.promo,
.masters,
.gallery,
.seminars,
.masters-preview,
.brand {
  color: var(--color-text-light);
}
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4,
.hero h1,
.hero h2,
.hero h3,
.hero h4,
.about h1,
.about h2,
.about h3,
.about h4,
.services h1,
.services h2,
.services h3,
.services h4,
.promo h1,
.promo h2,
.promo h3,
.promo h4,
.masters h1,
.masters h2,
.masters h3,
.masters h4,
.gallery h1,
.gallery h2,
.gallery h3,
.gallery h4,
.seminars h1,
.seminars h2,
.seminars h3,
.seminars h4,
.masters-preview h1,
.masters-preview h2,
.masters-preview h3,
.masters-preview h4,
.brand h1,
.brand h2,
.brand h3,
.brand h4 {
  color: var(--color-white);
}

/* Текст на светлом фоне - тёмный */
.advantages,
.reviews,
.contacts,
.directions,
.gallery-preview,
.popular-services {
  color: var(--color-text-dark);
}
.advantages h1,
.advantages h2,
.advantages h3,
.advantages h4,
.reviews h1,
.reviews h2,
.reviews h3,
.reviews h4,
.contacts h1,
.contacts h2,
.contacts h3,
.contacts h4,
.directions h1,
.directions h2,
.directions h3,
.directions h4,
.gallery-preview h1,
.gallery-preview h2,
.gallery-preview h3,
.gallery-preview h4,
.popular-services h1,
.popular-services h2,
.popular-services h3,
.popular-services h4 {
  color: var(--color-text-dark);
}
a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition);
}
button {
  cursor: pointer;
  border: none;
  font-family: var(--font-body);
}
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
}
@media (max-width: 768px) {
.container {
    padding: 0 20px;
}
}
.section {
  padding: 100px 0;
}

/* Заголовки секций - адаптивный цвет в зависимости от фона */
.section-title {
  font-size: clamp(32px, 5vw, 52px);
  text-align: center;
  margin-bottom: 20px;
  letter-spacing: -0.5px;
}

/* На светлом фоне - тёмный текст */
.section--light .section-title,
.advantages .section-title,
.reviews .section-title,
.contacts .section-title,
.directions .section-title,
.gallery-preview .section-title,
.popular-services .section-title {
  color: var(--color-text-dark) !important;
}

/* На тёмном фоне - белый текст */
.section--dark .section-title,
.hero .section-title,
.about .section-title,
.services .section-title,
.promo .section-title,
.masters .section-title,
.gallery .section-title,
.seminars .section-title,
.masters-preview .section-title,
.brand .section-title {
  color: var(--color-white) !important;
}
.section-subtitle {
  font-size: clamp(14px, 2vw, 18px);
  text-align: center;
  margin-bottom: 60px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  font-family: var(--font-heading);
}

/* Подзаголовки - адаптивный цвет */
.section--light .section-subtitle,
.advantages .section-subtitle,
.reviews .section-subtitle,
.contacts .section-subtitle,
.directions .section-subtitle,
.gallery-preview .section-subtitle,
.popular-services .section-subtitle {
  color: var(--color-text-medium);
}
.section--dark .section-subtitle,
.hero .section-subtitle,
.about .section-subtitle,
.services .section-subtitle,
.promo .section-subtitle,
.masters .section-subtitle,
.gallery .section-subtitle,
.seminars .section-subtitle,
.masters-preview .section-subtitle,
.brand .section-subtitle {
  color: var(--color-text-light-secondary);
}
.section--dark .section-title {
  color: var(--color-white);
}
.section--dark .section-subtitle {
  color: var(--color-gray);
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 32px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: none;
  transition: var(--transition);
  border-radius: var(--radius);
  font-family: var(--font-body);
  background: #c49448;
  color: white;
}
.btn:hover {
  background: #b3863f;
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(196, 148, 72, 0.3);
}
.btn-secondary {
  background: rgba(196, 148, 72, 0.15);
  color: #c49448;
  border: 1px solid #c49448;
}
.btn-secondary:hover {
  border-color: #c49448;
  color: var(--color-dark);
  background: #c49448;
}
.btn-dark {
  background: var(--color-dark);
  color: var(--color-white);
  border: 1px solid var(--color-dark);
}
.btn-dark:hover {
  background: var(--color-dark);
  border-color: var(--color-gold);
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--color-dark);
}
::-webkit-scrollbar-thumb {
  background: var(--color-gray-dark);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-gold);
}