/* ============================================================
   Сканди ЭкоДом — Design Tokens (warm-dark + gold)
   Источник: внутренний бланк расчёта.
   Менять токены тут — все остальные стили опираются на них.
   ============================================================ */

:root {
  /* ---------- Цвета: тёплые тёмные фоны (мягче чем pure black) ---------- */
  --c-bg-body:      #1a1410;   /* warm dark — основной фон header/footer */
  --c-bg-card:      #2a1f17;   /* фон карточек, чуть светлее body */
  --c-bg-sub:       #221710;   /* sub-блоки */
  --c-bg-hover:     #322617;   /* hover/active состояния */
  --c-bg-deep:      #0c0805;   /* особо глубокий dark — для accent inset */

  /* ---------- Цвета: границы ---------- */
  --c-border:       #4a3a28;
  --c-border-strong:#5a4830;

  /* ---------- Цвета: текст ---------- */
  --c-text:         #ebe3d8;   /* основной off-white */
  --c-text-2:       #a89c8a;   /* вторичный */
  --c-text-3:       #786e60;   /* подсказки/мета */

  /* ---------- Золото (бренд) ---------- */
  --c-gold-dark:    #a67c3a;
  --c-gold:         #c19a5b;
  --c-gold-light:   #d4a574;
  --c-gold-grad:    linear-gradient(135deg, #a67c3a 0%, #c19a5b 100%);

  /* ---------- Статусы ---------- */
  --c-ok:           #10b981;
  --c-warn:         #f59e0b;
  --c-err:          #ef4444;
  --c-info:         #3b82f6;

  /* ---------- Светлая тема (для админки/превью) ---------- */
  --c-light-bg:     #ffffff;
  --c-light-bg-2:   #f9fafb;
  --c-light-text:   #1a1410;
  --c-light-gold:   #b8860b;

  /* ---------- Тёплый крем — ОСНОВНОЙ фон сайта (cream-dominant) ----------
     Тёмное (--c-bg-*) применяем точечно: header/footer + step2(цены) + whitebox.
     Всё остальное — на этих кремовых поверхностях. */
  --c-cream:        #f6f1e7;   /* фон страницы */
  --c-cream-2:      #efe6d6;   /* чередование секций / чуть глубже */
  --c-cream-card:   #fffdf8;   /* карточки на креме */
  --c-cream-panel:  #faf4e8;   /* мягкая панель (формы, info-блоки) */
  --c-ink:          #1e130a;   /* основной текст на креме */
  --c-ink-2:        #6b5d49;   /* вторичный текст на креме */
  --c-ink-3:        #9a8b76;   /* мета/подсказки на креме */
  --c-cream-border: rgba(166, 124, 58, 0.22);  /* gold hairline на креме */
  --c-cream-hover:  rgba(166, 124, 58, 0.08);

  /* ---------- Шрифт Manrope — один на весь сайт, premium warm sans ---------- */
  --font-display: 'Manrope', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-ui:      'Manrope', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-num:     'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ---------- Типографическая шкала ---------- */
  --t-cap:        12px;     /* uppercase tracked, gold */
  --t-label:      13px;     /* form labels, мелкие кнопки */
  --t-body:       15px;     /* основной body text */
  --t-row:        16px;     /* table rows, links */
  --t-h2:         20px;     /* category h2 */
  --t-h1:         24px;     /* H1 шапки */
  --t-section:    28px;     /* group headers (Cormorant gold) */
  --t-final:      44px;     /* финальный итог (Mono) */
  --t-hero:       clamp(48px, 7vw, 96px); /* эксклюзивно для лендинга */

  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.55;
  --lh-relaxed: 1.7;

  --ls-cap:    0.14em;     /* uppercase caption */
  --ls-tight: -0.01em;     /* display headings */

  /* ---------- Spacing (4px-grid) ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;

  /* ---------- Радиусы ---------- */
  --r-chip:  8px;
  --r-ctrl:  12px;   /* buttons, inputs */
  --r-card:  16px;
  --r-pill:  9999px;

  /* ---------- Тени ---------- */
  --sh-card:  0 12px 28px rgba(0, 0, 0, 0.5),
              0 1px 0 rgba(255, 255, 255, 0.04) inset;
  --sh-card-soft: 0 6px 18px rgba(0, 0, 0, 0.35);
  --sh-glow:  0 8px 24px rgba(193, 154, 91, 0.4);
  --sh-focus: 0 0 0 3px rgba(193, 154, 91, 0.35);

  /* ---------- Motion ---------- */
  --ease:        cubic-bezier(0.22, 1, 0.36, 1);     /* «вылет наружу» */
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --d-fast:  180ms;
  --d-base:  320ms;
  --d-slow:  600ms;

  /* ---------- Layout ---------- */
  --container-max: 1280px;
  --container-narrow: 720px;       /* для статей и описаний проектов */
  --header-h:      80px;
  --header-h-mobile: 64px;
  --z-header:    100;
  --z-modal:     500;
  --z-tooltip:   600;
  --z-toast:     700;

  /* ---------- Edge-line (фирменный 3px gold слева) ---------- */
  --edge-w: 3px;
  --edge-grad: linear-gradient(180deg, var(--c-gold) 0%, var(--c-gold-dark) 100%);
}

/* Уважаем системные настройки пользователя — отключаем анимации */
@media (prefers-reduced-motion: reduce) {
  :root {
    --d-fast: 0ms;
    --d-base: 0ms;
    --d-slow: 0ms;
  }
}