/* ==========================================================================
   VERTEX — ТОКЕНЫ, БАЗОВЫЕ СТИЛИ И ДОСТУПНОСТЬ (tokens.css)
   Концепция «Timber atelier»: WCAG AA (контраст >= 4.5:1), 200-400 строк
   ========================================================================== */

:root {
  /* Цветовая палитра */
  --ink:          #1A1D1A;  /* Основной текст на светлом фоне (14.9:1 к paper) */
  --paper:        #F4EFE6;  /* Основной светлый фон (тёплая бумага) */
  --paper-2:      #EAE3D6;  /* Вторичный фон секций и карточек */
  --paper-3:      #DFD7C7;  /* Границы и бейджи на светлом фоне */
  --muted:        #5C6158;  /* Вторичный текст (5.5:1 на paper, 5.0:1 на paper-2) */
  --forest:       #141A16;  /* Тёмные секции: hero, футер, чертёж */
  --forest-card:  #1C241F;  /* Карточки на тёмном фоне */
  --oak:          #8A5A2B;  /* Акцент на светлом фоне (5.1:1 на paper) */
  --oak-light:    #D4B07E;  /* Акцент на тёмном, кнопки (8.7:1 к forest) */
  --oak-hover:    #E0C296;  /* Hover для акцентных кнопок */
  --sage:         #A9B3A6;  /* Вторичный текст на тёмном фоне (8.2:1 к forest) */
  --wa-green:     #1F7A45;  /* Кнопки WhatsApp (5.4:1 с белым текстом) */
  --wa-green-hover: #17663A;
  --line:         rgb(26 29 26 / 0.12);       /* Разделители на светлом */
  --line-dark:    rgb(212 176 126 / 0.18);    /* Разделители на тёмном */
  --line-strong:  rgb(26 29 26 / 0.24);

  /* Типографика */
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans:  'Manrope', system-ui, -apple-system, sans-serif;

  /* Шкала размеров шрифта через clamp() */
  --text-hero:  clamp(2.75rem, 5vw + 1rem, 5.5rem);
  --text-h2:    clamp(2rem, 3.2vw + 0.6rem, 3.75rem);
  --text-h3:    clamp(1.25rem, 1.6vw + 0.4rem, 1.75rem);
  --text-base:  1.0625rem; /* 17px */
  --text-sm:    0.9375rem; /* 15px */
  --text-xs:    0.8125rem; /* 13px */
  --text-label: 0.75rem;   /* 12px (минимальный допустимый кегль на сайте) */

  /* Геометрия */
  --container-max: 1320px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;

  /* Тени */
  --shadow-sm: 0 2px 8px rgb(20 26 22 / 0.05);
  --shadow-md: 0 8px 24px rgb(20 26 22 / 0.08);
  --shadow-lg: 0 16px 40px rgb(20 26 22 / 0.12);

  /* Движение */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 180ms;
  --duration-normal: 350ms;
  --duration-slow: 650ms;
}

/* Сброс стилей */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: var(--font-sans);
  font-size: 16px;
  background-color: var(--paper);
  color: var(--ink);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  line-height: 1.6;
  font-weight: 400;
  overflow-x: hidden;
  background-color: var(--paper);
  color: var(--ink);
}

body.menu-open {
  overflow: hidden;
}

img, svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button, input, textarea {
  font: inherit;
  color: inherit;
  border: none;
  background: none;
}

/* Доступный фокус */
:focus-visible {
  outline: 2px solid var(--oak);
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 3vw, 2.5rem);
}

.tabular-num {
  font-variant-numeric: tabular-nums lining-nums;
}

/* Анимация плавного появления при скролле */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
}

.reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

/* Отключение анимаций при prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
  
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}