/**
 * global.css — глобальный сброс, CSS-токены и базовые стили проекта.
 * Подключается первым в base.html.
 */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ── CSS-переменные (токены) ── */

:root {
  /* Цвета текста */
  --color-dark:        #181E2C;
  --color-dark-alt:    #1d2435;
  --color-text:        #2D2D2D;
  --color-text-body:   rgba(35, 31, 32, 0.9);
  --color-text-muted:  rgba(35, 31, 32, 0.75);
  --color-grey:        #b4b4b4;
  --color-grey-bg:     #d9d9d9;
  --color-img-bg:      #d8d8d8;
  --color-img-bg-alt:  #c4c4c4;

  /* Золотые цвета */
  --color-gold:         #C0A14A;
  --color-gold-hover:   #8f7832;
  --color-gold-mid:     #b39255;
  --color-gold-light:   #e0b85b;
  --color-gold-divider: rgba(192, 161, 74, 0.7);

  /* Шапка: собственные токены (немного отличаются по тону) */
  --header-gold:         #b29739;
  --header-gold-bg:      rgba(178, 151, 57, 0.95);
  --header-gold-light:   #c9a95f;
  --header-text-dark:    #3C4E58;
  --header-text-on-gold: rgba(35, 31, 32, 0.9);

  /* Фоны секций */
  --color-bg-dark:          #2C2C2C;
  --color-bg-light:         #F8F9FA;

  /* Текст */
  --color-text-dark:        #2D2D2D;
  --color-text-secondary:   #5E5E5E;

  /* Шрифты */
  --font-primary:   "Playfair Display", serif;
  --font-primary-sc: "Playfair Display SC", serif;
  --font-secondary: "Open Sans";
  --font-raleway:   "Raleway", sans-serif;
  --font-ui:        "Inter", sans-serif;
  --font-body:      "Roboto", sans-serif;
  --font-meta:      "Lato", sans-serif;

  /* Переходы */
  --transition-opacity: opacity 0.2s ease;
  --transition-color:   color 0.2s ease;
  --transition-bg:      background 0.2s ease;

  /* Скругления */
  --radius-card:       4px;
  --radius-btn:        27px;
  --radius-pagination: 6px;

  /* Форма консультации */
  --color-form-bg:    #ECF1F3;
  --color-form-line:  #D0D0D0;
  --color-success:    #3A7A3A;
  --color-error:      #B03030;
}

/* ── Базовые стили документа ── */

body {
  font-family: var(--font-body);
  line-height: 1.6;
  color: var(--color-dark);
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
}