/* =====================================================
   Design tokens: Вектор Сборки
   visual-director v1 / 2026-04-23
   ===================================================== */

:root {

  /* --------------------------------------------------
     Colors
     -------------------------------------------------- */

  /* Base */
  --color-bg:          #F0EDE6; /* пергамент — основной фон страниц */
  --color-surface:     #FAF8F4; /* бумага — карточки, модальные окна */
  --color-deep:        #16130F; /* глубокий уголь — hero dark, footer */

  /* Text */
  --color-text:        #1E1C1A; /* антрацит — заголовки и основной текст */
  --color-text-dim:    #6A6560; /* тёплая зола — мета, подписи, вторичный */
  --color-text-inv:    #FAF8F4; /* инверсный — текст на тёмном фоне */

  /* Accents */
  --color-accent:      #A85C42; /* терракота — CTA primary, подчёркивания */
  --color-accent-2:    #3D5C6B; /* аспидный синий — ссылки, hover, второй акцент */

  /* Border */
  --color-border:      #D9D4CB; /* пыльная бежевость — разделители, обводки */
  --color-border-dim:  rgba(30, 28, 26, 0.08); /* сверхтонкий border */

  /* --------------------------------------------------
     Typography
     -------------------------------------------------- */

  --font-display:  "Unbounded", system-ui, sans-serif;
  --font-body:     "Golos Text", "PT Sans", system-ui, sans-serif;
  --font-accent:   "Cormorant Garamond", Georgia, serif; /* только для pull-quote */

  /* Scale */
  --text-hero:  72px;
  --text-h1:    52px;
  --text-h2:    36px;
  --text-h3:    24px;
  --text-h4:    18px;
  --text-base:  16px;
  --text-sm:    14px;
  --text-xs:    12px;

  /* Line height */
  --lh-tight:   1.05;  /* hero, крупные дисплейные */
  --lh-heading: 1.15;  /* h1–h2 */
  --lh-snug:    1.3;   /* h3–h4 */
  --lh-body:    1.65;  /* основной текст — важно для кириллицы */
  --lh-caption: 1.5;   /* подписи, xs */

  /* Letter spacing */
  --ls-hero:    -0.03em;
  --ls-h1:      -0.02em;
  --ls-h2:      -0.01em;
  --ls-h3:      -0.01em;
  --ls-body:     0em;
  --ls-caption:  0.01em;
  --ls-label:    0.04em; /* all-caps лейблы */

  /* --------------------------------------------------
     Spacing (base unit: 8px)
     -------------------------------------------------- */

  --space-xs:   8px;
  --space-sm:   16px;
  --space-md:   32px;
  --space-lg:   64px;
  --space-xl:   120px;
  --space-2xl:  200px;

  /* --------------------------------------------------
     Border radius
     -------------------------------------------------- */

  --radius-sm:    4px;   /* теги, мелкие элементы */
  --radius-md:    8px;   /* карточки, кнопки */
  --radius-lg:    16px;  /* модальные окна, секции */
  --radius-full:  9999px; /* pill-теги */

  /* --------------------------------------------------
     Shadows
     -------------------------------------------------- */

  --shadow-sm:  0 1px 4px rgba(22, 19, 15, 0.06);
  --shadow-md:  0 4px 16px rgba(22, 19, 15, 0.10);
  --shadow-lg:  0 8px 32px rgba(22, 19, 15, 0.14);

  /* --------------------------------------------------
     Borders
     -------------------------------------------------- */

  --border:       1px solid var(--color-border);
  --border-dim:   1px solid var(--color-border-dim);
  --border-accent: 1px solid var(--color-accent);

  /* --------------------------------------------------
     Aliases (for inside.css compatibility)
     -------------------------------------------------- */

  --color-text-secondary: var(--color-text-dim);
  --color-accent-warm:    var(--color-accent);
  --font-heading:         var(--font-display);

  /* --------------------------------------------------
     Transitions
     -------------------------------------------------- */

  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;

  /* --------------------------------------------------
     Layout
     -------------------------------------------------- */

  --container-max:   1240px;
  --container-text:  720px;  /* max-width для читаемых колонок */
  --container-pad:   var(--space-md);

}

/* --------------------------------------------------
   Mobile overrides (max-width: 768px)
   -------------------------------------------------- */

@media (max-width: 768px) {
  :root {
    --text-hero:  40px;
    --text-h1:    32px;
    --text-h2:    24px;
    --text-h3:    20px;
    --text-h4:    16px;
    --text-base:  15px; /* min 15px для кириллицы */

    --space-xl:   72px;
    --space-2xl:  120px;

    --container-pad: var(--space-sm);
  }
}

/* --------------------------------------------------
   Utility classes (минимальный набор)
   -------------------------------------------------- */

.text-display {
  font-family: var(--font-display);
  letter-spacing: var(--ls-hero);
  line-height: var(--lh-tight);
}

.text-body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-body);
}

.text-accent-quote {
  font-family: var(--font-accent);
  font-style: italic;
  line-height: 1.4;
}

.label-caps {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--color-text-dim);
}

/* --------------------------------------------------
   Component: CTA buttons
   -------------------------------------------------- */

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 14px 28px;
  background: var(--color-accent);
  color: var(--color-text-inv);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  text-decoration: none;
}

.btn-primary:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 13px 27px;
  background: transparent;
  color: var(--color-accent);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: var(--radius-md);
  border: var(--border-accent);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  text-decoration: none;
}

.btn-secondary:hover {
  background: var(--color-accent);
  color: var(--color-text-inv);
}

.btn-ghost-inv {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 13px 27px;
  background: transparent;
  color: var(--color-text-inv);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: var(--radius-md);
  border: 1px solid rgba(250, 248, 244, 0.4);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
  text-decoration: none;
}

.btn-ghost-inv:hover {
  border-color: var(--color-text-inv);
  background: rgba(250, 248, 244, 0.08);
}

/* --------------------------------------------------
   Component: Card
   -------------------------------------------------- */

.card {
  background: var(--color-surface);
  border: var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* --------------------------------------------------
   Component: Pull-quote
   -------------------------------------------------- */

.pull-quote {
  border-left: 2px solid var(--color-accent);
  padding-left: var(--space-md);
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 22px;
  line-height: 1.45;
  color: var(--color-text);
}

/* --------------------------------------------------
   Component: Tag / Badge
   -------------------------------------------------- */

.tag {
  display: inline-block;
  padding: 4px 10px;
  background: var(--color-border);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  border-radius: var(--radius-sm);
  letter-spacing: var(--ls-caption);
}

/* --------------------------------------------------
   Section: Deep (тёмный фон)
   -------------------------------------------------- */

.section-deep {
  background: var(--color-deep);
  color: var(--color-text-inv);
}

.section-deep .text-dim {
  color: var(--color-text-dim);
}