/* CSS Variables and Base Styles */

/* Шрифты из pattern.txt для русской версии */
@font-face {
  font-family: 'Roboto';
  src: url('/fonts/roboto-light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('/fonts/roboto-regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('/fonts/roboto-bold.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto Slab';
  src: url('/fonts/roboto-slab-regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto Slab';
  src: url('/fonts/roboto-slab-medium.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Panda';
  src: url('/fonts/Panda.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Berry';
  src: url('/fonts/Berry.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'TitleFont';
  src: url('/fonts/BngbUXZYTXPIvIBgJJSb6s3BzlRRfKOFbvjojISWaA.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Theme tokens (Azure / Sea) */
:root,
[data-theme="light"] {
  color-scheme: light;

  /* Brand */
  --primary-color: #0891b2; /* azure */
  --primary-gradient: linear-gradient(135deg, #0891b2 0%, #14b8a6 100%); /* azure -> sea */
  --accent-color: #14b8a6;

  /* Text */
  --text-primary: #062a33;   /* deep sea */
  --text-secondary: #2c5f6b; /* muted sea */

  /* Surfaces */
  --bg-white: #f6fbfc; /* page */
  --bg-gray: #eef7f8;  /* panels */
  --bg-warm: #f1fbfa;  /* warm-ish tint, still sea */
  --surface-elevated: rgba(255, 255, 255, 0.92);
  --surface-control: rgba(255, 255, 255, 0.92);
  --surface-input: rgba(255, 255, 255, 0.92);

  /* Borders & shadows */
  --border-color: rgba(8, 145, 178, 0.18);
  --shadow: 0 10px 35px rgba(6, 42, 51, 0.10);
  --shadow-hover: 0 18px 55px rgba(6, 42, 51, 0.18);
  --modal-shadow: 0 20px 60px rgba(6, 42, 51, 0.16);
  --modal-shadow-active: 0 25px 80px rgba(6, 42, 51, 0.22);
}

/* Dark mode: auto via OS preference (unless explicitly forced to light) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --primary-color: #22d3ee; /* bright cyan */
    --primary-gradient: linear-gradient(135deg, #22d3ee 0%, #14b8a6 100%);
    --accent-color: #2dd4bf;

    --text-primary: #e6fbff;
    --text-secondary: #a3cfd8;

    --bg-white: #06141a;
    --bg-gray: #0b2028;
    --bg-warm: #071a20;
    --surface-elevated: rgba(11, 32, 40, 0.92);
    --surface-control: rgba(11, 32, 40, 0.92);
    --surface-input: rgba(6, 20, 26, 0.70);

    --border-color: rgba(34, 211, 238, 0.18);
    --shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
    --shadow-hover: 0 18px 65px rgba(0, 0, 0, 0.55);
    --modal-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
    --modal-shadow-active: 0 25px 80px rgba(0, 0, 0, 0.65);
  }
}

/* Explicit dark theme (future toggle support) */
[data-theme="dark"] {
  color-scheme: dark;

  --primary-color: #22d3ee;
  --primary-gradient: linear-gradient(135deg, #22d3ee 0%, #14b8a6 100%);
  --accent-color: #2dd4bf;

  --text-primary: #e6fbff;
  --text-secondary: #a3cfd8;

  --bg-white: #06141a;
  --bg-gray: #0b2028;
  --bg-warm: #071a20;
  --surface-elevated: rgba(11, 32, 40, 0.92);
  --surface-control: rgba(11, 32, 40, 0.92);
  --surface-input: rgba(6, 20, 26, 0.70);

  --border-color: rgba(34, 211, 238, 0.18);
  --shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
  --shadow-hover: 0 18px 65px rgba(0, 0, 0, 0.55);
  --modal-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
  --modal-shadow-active: 0 25px 80px rgba(0, 0, 0, 0.65);
}

html {
  overflow-x: hidden;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color: var(--text-primary);
  background: var(--bg-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 100vh;
  cursor: default;
}

/* Убираем кастомные курсоры и точки */
* {
  cursor: inherit;
}

.cursor,
.cursor-dot,
.mouse-follower,
[class*="cursor"],
[class*="mouse"],
[class*="pointer"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Применяем шрифт Panda только к заголовкам (для английской и тайской версий) */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Panda', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Для русской версии используем TitleFont вместо Berry для заголовков */
html[lang="ru"] h1,
html[lang="ru"] h2,
html[lang="ru"] h3,
html[lang="ru"] h4,
html[lang="ru"] h5,
html[lang="ru"] h6,
html[lang="ru-RU"] h1,
html[lang="ru-RU"] h2,
html[lang="ru-RU"] h3,
html[lang="ru-RU"] h4,
html[lang="ru-RU"] h5,
html[lang="ru-RU"] h6 {
  font-family: 'TitleFont', 'Berry', 'Panda', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
}

/* Для русской версии используем Roboto для обычного текста */
html[lang="ru"] body,
html[lang="ru-RU"] body {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
}

/* Подзаголовки обычным шрифтом, тонким */
.subtitle, .info-subtitle {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 300;
}

/* Для русской версии подзаголовки с Roboto */
html[lang="ru"] .subtitle,
html[lang="ru"] .info-subtitle,
html[lang="ru-RU"] .subtitle,
html[lang="ru-RU"] .info-subtitle {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 300;
}

/* Кнопки с шрифтом Panda (только основные кнопки действий) */
.book-btn, .book-btn-inline, .submit-btn, .guest-btn, .calendar-nav-btn, .avatar-text-button, .mission-inline-btn {
  font-family: 'Panda', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Для русской версии кнопки с TitleFont вместо Berry */
html[lang="ru"] .book-btn,
html[lang="ru"] .book-btn-inline,
html[lang="ru"] .submit-btn,
html[lang="ru"] .guest-btn,
html[lang="ru"] .calendar-nav-btn,
html[lang="ru"] .avatar-text-button,
html[lang="ru"] .mission-inline-btn,
html[lang="ru-RU"] .book-btn,
html[lang="ru-RU"] .book-btn-inline,
html[lang="ru-RU"] .submit-btn,
html[lang="ru-RU"] .guest-btn,
html[lang="ru-RU"] .calendar-nav-btn,
html[lang="ru-RU"] .avatar-text-button,
html[lang="ru-RU"] .mission-inline-btn {
  font-family: 'TitleFont', 'Berry', 'Panda', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400 !important;
}

/* Для русской версии увеличиваем размер шрифта кнопок */
html[lang="ru"] .avatar-text-button,
html[lang="ru"] .avatar-text-button.mission-btn,
html[lang="ru-RU"] .avatar-text-button,
html[lang="ru-RU"] .avatar-text-button.mission-btn {
  font-size: 17px !important;
}

html[lang="ru"] .book-btn-inline,
html[lang="ru"] .book-btn-inline.mission-btn,
html[lang="ru-RU"] .book-btn-inline,
html[lang="ru-RU"] .book-btn-inline.mission-btn {
  font-size: 18px !important;
}

/* Элементы навигации в header - шрифтом тайтлов (Panda) */
.nav-link {
  font-family: 'Panda', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Для русской версии навигация с TitleFont вместо Berry */
html[lang="ru"] .nav-link,
html[lang="ru-RU"] .nav-link {
  font-family: 'TitleFont', 'Berry', 'Panda', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
}

/* Переключатель языков и бургер-меню - обычным шрифтом */
.lang-btn, .burger-menu-btn {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Для русской версии переключатели с Roboto */
html[lang="ru"] .lang-btn,
html[lang="ru"] .burger-menu-btn,
html[lang="ru-RU"] .lang-btn,
html[lang="ru-RU"] .burger-menu-btn {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
}

/* Убираем жирное начертание для выделенного текста в русской версии */
html[lang="ru"] .normal-weight,
html[lang="ru-RU"] .normal-weight {
  font-weight: 400 !important;
}

/* Запрещаем скролл для всех компонентов и секций, кроме модальных окон */
section,
.container,
.guide-profile,
.services-grid,
.service-card,
.loading-card,
.loading-components-grid,
.social-section,
.social-links,
.payment-methods,
.hero,
.full-landing-section,
.services,
.loading-components-section {
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
}

/* Карусель может иметь overflow: hidden для правильной работы */
.landing-carousel {
  overflow: hidden;
}

/* Модальные окна могут скроллиться */
.modal-content {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

