/* =========================================================================
   ASYL ART · Дизайн-ядро (design tokens + базовые компоненты)
   Направление: «Воздух» — пастельно-синий минимализм, галерейная подача.
   Единый источник правды. Подключается и в style guide, и на сайте.
   ========================================================================= */

:root {
  /* ---- Палитра ------------------------------------------------------- */
  --porcelain: #F3EFE7;  /* Фарфор   · основа / фон (~60%)               */
  --ink:       #1C2B45;  /* Чернила  · текст, лого, заливка кнопок       */
  --dusty:     #9FB7CE;  /* Пыльно-синий · акцент, ссылки, орнамент      */
  --haze:      #C7D6E4;  /* Дымка    · фоны секций, разделители          */
  --silver:    #BCC4CE;  /* Серебро  · обводки, иконки, детали           */
  --carnelian: #C06A4E;  /* Сердолик · этно-искра, <5%, важные акценты   */

  /* Производные оттенки */
  --paper:     #FBFAF6;            /* почти-белый для карточек            */
  --ink-70:    rgba(28, 43, 69, .70);
  --ink-55:    rgba(28, 43, 69, .55);
  --line:      rgba(28, 43, 69, .12); /* тонкая линия по «Чернилам»       */
  --line-soft: rgba(28, 43, 69, .08);

  /* ---- Типографика --------------------------------------------------- */
  --font-display: "Bodoni Moda", "Times New Roman", Georgia, serif;
  --font-ui:      "Jost", system-ui, -apple-system, Segoe UI, sans-serif;

  --track-label:    0.24em;  /* микролейблы            */
  --track-wordmark: 0.42em;  /* словесный знак / лого  */
  --track-button:   0.18em;  /* кнопки                 */

  /* Шкала кегля */
  --fs-display: 48px;  --lh-display: 56px;
  --fs-h1:      34px;  --lh-h1:      40px;
  --fs-h2:      28px;  --lh-h2:      34px;
  --fs-h3:      20px;  --lh-h3:      28px;
  --fs-body:    16px;  --lh-body:    1.7;
  --fs-small:   14px;
  --fs-label:   11px;

  /* ---- Ритм / отступы ------------------------------------------------ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ---- Радиусы ------------------------------------------------------- */
  --r-card: 18px;
  --r-btn:  10px;
  --r-pill: 999px;

  /* ---- Тени (очень мягкие, «воздушные») ------------------------------ */
  --shadow-card: 0 1px 2px rgba(28, 43, 69, .04),
                 0 26px 50px -34px rgba(28, 43, 69, .28);

  --maxw: 1040px;

  /* ---- Лендинг: дополнительные токены -------------------------------
     Холодная палитра расширена служебными оттенками для главной страницы.
     Мобильный одностраничник: колонка 480px на фоне «--page-bg».          */
  --page-bg:    #E4EAF0;  /* фон за колонкой 480px                        */
  --ivory:      #FBFAF6;  /* = paper · карточки разделов/отзывов/CTA      */
  --ivory-line: #E4E0D6;  /* обводка ivory-карточек                       */
  --divider:    #DCD9D0;  /* тонкие разделители 1px                       */
  --muted:      #5A6776;  /* вторичный текст                             */
  --muted-2:    #6E7C8C;  /* вторичный текст (светлее)                    */
  --muted-3:    #8995A4;  /* подписи / третичный текст                    */
  --field-bg:   #FBFAF6;  /* фон полей формы                             */
  --field-line: #D8D3C8;  /* обводка полей формы                          */
  --ink-elev:   #2C3D57;  /* линии/разделители на «Чернилах» (футер)      */
  --ink-elev-2: #34455F;
  --ink-line:   #3A4B65;  /* обводка иконок на тёмном                     */
  --danger:     #C0564A;  /* ошибки валидации                            */
  --col-w:      480px;    /* ширина мобильной колонки                     */

  /* Лендинг-тени */
  --shadow-sticky: 0 8px 24px rgba(28, 43, 69, .28);
  --shadow-detail: 0 4px 12px rgba(28, 43, 69, .22);

  /* Лендинг-easing */
  --ease-out: cubic-bezier(.19, 1, .22, 1);
}

/* =========================================================================
   База
   ========================================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--porcelain);
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--dusty); text-underline-offset: 3px; }

/* =========================================================================
   Типографические утилиты
   ========================================================================= */
.display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: .01em;
  margin: 0;
}
.h1 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h1); line-height: var(--lh-h1); margin: 0; }
.h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h2); line-height: var(--lh-h2); margin: 0; }
.h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h3); line-height: var(--lh-h3); margin: 0; }

.body { font-family: var(--font-ui); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-body); }

/* Микролейбл — Jost, прописные, широкий трекинг */
.micro {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--dusty);
  margin: 0;
}
.micro--ink { color: var(--ink-55); }

/* Секционный микролейбл над тонкой линией */
.section-label {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: 0 0 var(--space-6);
}
.section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* =========================================================================
   Логотип
   ========================================================================= */
.wordmark {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--track-wordmark);
  color: var(--ink);
  white-space: nowrap;
}

/* Монограмма «A|A» в тонком круге */
.monogram {
  --d: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
  border: 1.5px solid var(--dusty);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(var(--d) * .34);
  line-height: 1;
  color: var(--ink);
  letter-spacing: .02em;
  user-select: none;
}
.monogram .bar {
  color: var(--dusty);
  font-weight: 300;
  margin: 0 .04em;
  transform: translateY(-.02em);
}
.monogram--sm { --d: 44px; }
.monogram--lg { --d: 88px; }

/* =========================================================================
   Кнопки
   ========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--fs-small);
  letter-spacing: var(--track-button);
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 30px;
  border-radius: var(--r-btn);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--ink); color: var(--porcelain); }
.btn--primary:hover { background: #14213a; }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--porcelain); }

/* =========================================================================
   Теги-пилюли
   ========================================================================= */
.pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--fs-small);
  padding: 8px 18px;
  border-radius: var(--r-pill);
  border: 1px solid var(--silver);
  color: var(--ink);
  background: transparent;
}
.pill--new { background: var(--carnelian); border-color: transparent; color: #fff; }

/* =========================================================================
   Карточка
   ========================================================================= */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--space-7);
  box-shadow: var(--shadow-card);
}

/* =========================================================================
   Орнамент (волнистая лента-меандр с точками)
   Цвет берётся из currentColor контейнера .ornament
   ========================================================================= */
.ornament {
  display: block;
  color: var(--dusty);
  width: 100%;
}
.ornament svg { display: block; width: 100%; height: auto; }
.ornament--silver { color: var(--silver); }