/* ================================================================
   variables.css — ГЛАВНЫЙ ФАЙЛ ПЕРЕМЕННЫХ
   Здесь задаётся весь дизайн сайта: цвета, шрифты, отступы.
   Если хочешь поменять цветовую схему — меняй ТОЛЬКО здесь.
   ================================================================ */

:root {

  /* ------------------------------------------------------------
     ЦВЕТА — основная палитра (dark theme)
     ✏️ РЕДАКТИРОВАТЬ: меняй цвета здесь
     ------------------------------------------------------------ */

  /* Фоны (от самого тёмного к светлому) */
  --bg-deepest:   #080B10;   /* Самый тёмный фон — hero */
  --bg-dark:      #0D1117;   /* Основной фон сайта */
  --bg-card:      #131920;   /* Фон карточек */
  --bg-card-hover:#1A2233;   /* Фон карточек при наведении */
  --bg-input:     #0F1620;   /* Фон полей ввода */

  /* Границы и разделители */
  --border:       rgba(255, 255, 255, 0.08);
  --border-accent:rgba(0, 200, 255, 0.3);

  /* Текст */
  --text-primary:   #F0F4FF;   /* Основной текст — почти белый */
  --text-secondary: #8899BB;   /* Второстепенный текст — серо-синий */
  --text-muted:     #445566;   /* Приглушённый текст */

  /* Акцентный цвет — главный фирменный цвет
     ✏️ РЕДАКТИРОВАТЬ: можно поменять на другой (синий, зелёный и т.д.) */
  --accent:        #00C8FF;    /* Электрический голубой */
  --accent-dim:    rgba(0, 200, 255, 0.15);
  --accent-glow:   rgba(0, 200, 255, 0.4);

  /* Второй акцент (для градиентов) */
  --accent2:       #0066FF;

  /* Статусные цвета */
  --success:  #00E599;
  --warning:  #FFB800;
  --danger:   #FF4455;


  /* ------------------------------------------------------------
     ШРИФТЫ
     ✏️ НЕ МЕНЯТЬ без проверки на WeChat Browser
     ------------------------------------------------------------ */

  /* Заголовочный шрифт — латиница */
  --font-display: 'Syne', sans-serif;

  /* Основной шрифт — работает для EN, ZH, RU
     Noto Sans SC покрывает китайские иероглифы */
  --font-body: 'Noto Sans SC', 'Syne', sans-serif;

  /* Моноширинный (для кода, цифр) */
  --font-mono: 'SF Mono', 'Courier New', monospace;
  body {
  font-variant-numeric: tabular-nums lining-nums;
}


  /* ------------------------------------------------------------
     РАЗМЕРЫ ШРИФТОВ (адаптивные через clamp)
     clamp(минимум, идеал, максимум)
     Автоматически масштабируются под экран
     ------------------------------------------------------------ */
  --text-xs:   clamp(10px, 1.2vw, 12px);
  --text-sm:   clamp(12px, 1.4vw, 14px);
  --text-base: clamp(14px, 1.6vw, 16px);
  --text-md:   clamp(16px, 1.8vw, 18px);
  --text-lg:   clamp(18px, 2.2vw, 22px);
  --text-xl:   clamp(22px, 3vw,   32px);
  --text-2xl:  clamp(28px, 4vw,   48px);
  --text-3xl:  clamp(36px, 6vw,   72px);
  --text-hero: clamp(48px, 9vw,  110px);


  /* ------------------------------------------------------------
     ОТСТУПЫ И РАЗМЕРЫ
     ------------------------------------------------------------ */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  32px;
  --space-xl:  64px;
  --space-2xl: 120px;

  /* Ширина контента */
  --container-max: 1200px;
  --container-pad: clamp(16px, 5vw, 60px);

  /* Радиусы скругления */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-full:999px;


  /* ------------------------------------------------------------
     ТЕНИ И ЭФФЕКТЫ
     ------------------------------------------------------------ */
  --shadow-card:  0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-accent:0 0 30px var(--accent-glow);
  --shadow-glow:  0 0 60px rgba(0, 200, 255, 0.15);

  /* Плавность анимаций */
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   600ms;


  /* ------------------------------------------------------------
     НАВБАР
     ------------------------------------------------------------ */
  --navbar-height: 64px;
  --navbar-bg:     rgba(8, 11, 16, 0.85);
}


/* ================================================================
   БАЗОВЫЙ СБРОС СТИЛЕЙ
   Убираем браузерные дефолты
   ================================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  /* Отступ сверху чтобы секции не прятались под навбар при скролле */
  scroll-padding-top: var(--navbar-height);
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-primary);
  background-color: var(--bg-dark);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Ссылки */
a {
  color: var(--accent);
  text-decoration: none;
  transition: opacity var(--duration-fast) var(--ease-smooth);
}
a:hover { opacity: 0.8; }

/* Изображения */
img {
  max-width: 100%;
  display: block;
}

/* Кнопки — сброс дефолтов */
button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

/* Canvas — убираем пробел снизу */
canvas { display: block; }