/* ============================================================================
   Гостевая книга — дизайн-токены и базовый слой (тёмная тема).
   Простой CSS, без библиотек/фреймворков.

   Токены сняты с референса Momentaru UI Kit (ADR design-tokens): фирменный
   фиолет + коралловый/бирюзовый акценты. По ТЗ «Качество» основа — ТЁМНАЯ,
   поэтому акцентная палитра референса ложится на тёмные индиго-поверхности.
   Компоненты (кнопки/карточки/чипы/инпуты) наращиваем поверх этих токенов.
   ========================================================================== */

:root {
  /* --- Бренд / акценты (из референса) --- */
  --color-primary:        #8A87F0;  /* основной фиолет: действия, актив     */
  --color-primary-strong: #6E67D2;  /* глубокий фиолет: hover/press, ссылки */
  --color-primary-soft:   #B598FB;  /* лаванда: мягкие акценты              */
  --color-accent-coral:   #FCA198;  /* лосось: хайлайты/ошибки-мягкие       */
  --color-accent-teal:    #80E2ED;  /* бирюза: инфо/декор                   */

  /* --- Тёмные поверхности --- */
  --color-bg:        #0E1018;  /* фон страницы (near-black indigo)   */
  --color-bg-elev:   #12141F;  /* чуть выше фона (секции)            */
  --color-surface:   #171A26;  /* карточки                          */
  --color-surface-2: #1F2333;  /* приподнятые/hover карточки        */
  --color-border:    #2A2F42;  /* границы, разделители, инпуты      */
  --color-overlay:   rgba(8, 9, 14, 0.72); /* подложка модалок      */

  /* --- Текст --- */
  --color-ink:      #E7E9F3;  /* заголовки/основной текст          */
  --color-ink-2:    #C3C7D6;  /* обычный текст пониже контрастом   */
  --color-muted:    #9AA0B5;  /* вторичный текст, подписи, плейсхолдер */
  --color-on-primary: #FFFFFF; /* текст на фиолете                  */

  /* --- Семантика --- */
  --color-danger:  #FCA198;  /* ошибка (мягкий коралл референса)  */
  --color-success: #80E2ED;  /* успех/инфо (бирюза)               */
  --color-focus:   #8A87F0;  /* кольцо фокуса                     */

  /* --- Тинты фиолета для тёмной темы (фон выбранного, треки) --- */
  --color-primary-tint:  rgba(138, 135, 240, 0.14);
  --color-primary-tint-2: rgba(138, 135, 240, 0.24);

  /* --- Типографика --- */
  --font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;

  --fs-display: 28px;  --lh-display: 1.25;  /* H1: заголовки экранов */
  --fs-h2:      22px;  --lh-h2:      1.3;
  --fs-h3:      18px;  --lh-h3:      1.35;
  --fs-body:    14px;  --lh-body:    1.55;  /* базовый текст */
  --fs-button:  15px;
  --fs-caption: 12px;  --lh-caption: 1.4;   /* подписи/хинты */
  --fs-label:   11px;                        /* step-label, оверлайны */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;

  --ls-label: 0.08em;  /* трекинг для UPPERCASE-меток */

  /* --- Шкала отступов (база 8px) --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;

  /* --- Радиусы --- */
  --radius-sm:   8px;    /* инпуты, мелкие элементы */
  --radius-md:   12px;   /* кнопки                  */
  --radius-lg:   16px;   /* карточки выбора         */
  --radius-xl:   24px;   /* карточки/боттом-шиты    */
  --radius-pill: 999px;  /* чипы, тумблеры, аватары */

  /* --- Тени (тёмная тема: глубже, мягкий блюр) --- */
  --shadow-sm:     0 4px 12px rgba(0, 0, 0, 0.30);
  --shadow-card:   0 12px 32px rgba(0, 0, 0, 0.40);
  --shadow-button: 0 8px 20px rgba(110, 103, 210, 0.45); /* фиолет-свечение */

  /* --- Прочее --- */
  --container-max: 480px;  /* мобайл-ориентир ширины контента */
  --transition:    160ms ease;
}

/* ------------------------------- Reset ----------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

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

html,
body {
  min-height: 100%;
}

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

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--color-primary-strong);
}

/* ------------------------------- Base ------------------------------------ */
body {
  min-height: 100vh;
  background:
    radial-gradient(1200px 600px at 50% -10%, #171a2b 0%, transparent 60%),
    var(--color-bg);
  color: var(--color-ink-2);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
  color: var(--color-ink);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h2);
}

h1 {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: -0.01em;
}

h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
}

h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-h3);
}

p {
  line-height: var(--lh-body);
}

small,
.caption {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--color-muted);
}

/* Небольшая надпись-метка над заголовками (STEP 1/7) */
.overline {
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--color-muted);
}

::selection {
  background: var(--color-primary-tint-2);
  color: var(--color-ink);
}

/* Доступный фокус на клавиатуре */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* --------------------------- Layout-контейнер ---------------------------- */
.app {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-5) var(--space-4);
}

/* Уважать «уменьшить движение» */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================================================
   Компоненты
   ========================================================================== */

/* --- Карточка --- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
}

/* --- Кнопки --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 52px;
  padding: 0 var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--fs-button);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background var(--transition), transform var(--transition),
              box-shadow var(--transition), color var(--transition);
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: var(--shadow-button);
}
.btn--primary:hover { background: var(--color-primary-strong); }

.btn--ghost {
  background: transparent;
  color: var(--color-primary);
  min-height: 40px;
  padding: 0 var(--space-3);
  box-shadow: none;
}
.btn--ghost:hover { color: var(--color-primary-strong); }

.btn--block { width: 100%; }

/* --- Поля ввода --- */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.field-label {
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--color-muted);
}
.input {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--space-4);
  background: var(--color-bg-elev);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.input::placeholder { color: var(--color-muted); opacity: 0.7; }
.input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-tint);
}
.input--error {
  border-color: var(--color-danger);
}
.input--error:focus {
  box-shadow: 0 0 0 3px rgba(252, 161, 152, 0.20);
}

/* Красное сообщение об ошибке валидации */
.field-error {
  color: var(--color-danger);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
}
.field-error[hidden] { display: none; }

/* --- Экран логина --- */
.auth-screen {
  min-height: calc(100vh - var(--space-5) * 2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-card {
  width: 100%;
  padding: var(--space-6) var(--space-5);
}
.auth-title {
  margin-top: var(--space-2);
}
.auth-subtitle {
  margin-top: var(--space-1);
}
.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.auth-form .btn--block { margin-top: var(--space-2); }
.auth-hint {
  margin-top: var(--space-4);
  text-align: center;
  color: var(--color-muted);
}

/* --- Экран ленты (минимальный) --- */
.feed-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.feed-title { font-size: var(--fs-h2); }
.feed-empty {
  text-align: center;
  padding: var(--space-7) var(--space-5);
}
.feed-empty-text { color: var(--color-muted); }

/* --- Форма добавления записи --- */
.composer {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.textarea {
  min-height: 88px;
  padding: var(--space-3) var(--space-4);
  resize: vertical;
  line-height: var(--lh-body);
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}
.btn:disabled:hover {
  background: var(--color-primary);
}

/* --- Список записей --- */
.feed-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.entry {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4) var(--space-5);
}
.entry-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.entry-author {
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
}
.entry-time {
  color: var(--color-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.entry-text {
  color: var(--color-ink-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ============================================================================
   Адаптив — узкие экраны (телефоны, ≤400px)
   Базовая раскладка и так одноколоночная (flex-column + центрированный
   контейнер), поэтому «разъехаться» нечему; здесь лишь уплотняем поля и
   слегка уменьшаем крупный заголовок, чтобы контент дышал на 390px.
   ========================================================================== */
@media (max-width: 400px) {
  :root {
    --fs-display: 26px;   /* H1 чуть компактнее на узком экране */
  }
  .app {
    padding: var(--space-4) var(--space-4); /* ровные поля 16px */
  }
  .auth-card {
    padding: var(--space-5) var(--space-4); /* карточка логина уплотняется */
  }
  .entry-head {
    /* автор и время — в столбик, если вместе не помещаются на очень узком */
    flex-wrap: wrap;
    row-gap: var(--space-1);
  }
}