/* ==========================================================================
   Tillit — дизайн-система, brand-book v1.0 (2026)
   Единый источник правды для match-app.ru: публичный сайт и раздел /team.

   Правила бренд-бука, которые здесь закодированы:
   — цвет: кремовый фон, терракота как единственный акцент, зелёного нет;
   — тип: Lora (заголовки) + Golos Text (интерфейс);
   — границы: вкладная линия 1px, внешних теней в системе нет;
   — радиусы: карточки всегда 16px, кнопки 8–12px, теги — пилюля;
   — фон: только плоские поля, без градиентов, текстур и фото;
   — тон: без эмодзи, без геймификации, без превосходных степеней.
   ========================================================================== */

/* Шрифты хостятся локально: без обращения к сторонним сервисам
   и без лишнего запроса на отрисовку первого экрана. */

@font-face {
  font-family: 'Golos Text';
  src: url('/assets/fonts/golos-text-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Golos Text';
  src: url('/assets/fonts/golos-text-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Golos Text';
  src: url('/assets/fonts/golos-text-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Golos Text';
  src: url('/assets/fonts/golos-text-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lora';
  src: url('/assets/fonts/lora-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lora';
  src: url('/assets/fonts/lora-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lora';
  src: url('/assets/fonts/lora-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lora';
  src: url('/assets/fonts/lora-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lora';
  src: url('/assets/fonts/lora-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ── Палитра ─────────────────────────────────────────── */
  --color-white: #FFFEFB;
  --color-dark: #1C1A16;
  --color-cream: #F7F3EA;
  --color-beige: #E4DCCB;
  --color-terra-900: #4A463E;
  --color-terra-700: #A8623F;
  --color-terra-500: #C08561;
  --color-terra-100: #F3E3D7;

  --color-text-primary: #1C1A16;
  --color-text-secondary: #4A463E;
  --color-text-tertiary: #8C8577;
  --color-text-disabled: #B9B2A2;

  --color-border-light: #E4DCCB;
  --color-border-dark: #4A463E;

  /* ── Семантические алиасы ────────────────────────────── */
  --surface-page: var(--color-cream);
  --surface-card: var(--color-white);
  --surface-accent-soft: var(--color-terra-100);
  --surface-dark: var(--color-dark);

  --brand-primary: var(--color-terra-700);
  --brand-primary-light: var(--color-terra-500);
  --brand-accent: var(--color-terra-900);

  --text-body: var(--color-text-primary);
  --text-muted: var(--color-text-secondary);
  --text-faint: var(--color-text-tertiary);
  --text-on-brand: var(--color-white);
  --text-on-dark: var(--color-cream);
  --text-on-dark-muted: rgba(247, 243, 234, .62);

  --border-default: var(--color-border-light);
  --border-strong: var(--color-border-dark);
  --border-on-dark: rgba(247, 243, 234, .14);

  /* ── Тёмные поверхности ──────────────────────────────
     Бренд-бук допускает тёмное поле; шкала выведена из Ink,
     чтобы плотные схемы читались, оставаясь в палитре. */
  --dark-page: #1C1A16;
  --dark-panel: #232019;
  --dark-panel-raised: #2A2620;
  --dark-border: #332F28;
  --dark-border-soft: #272420;
  --text-dark-primary: #F7F3EA;
  --text-dark-muted: rgba(247, 243, 234, .62);
  --text-dark-faint: rgba(247, 243, 234, .38);

  /* Категории в схемах: различаются насыщенностью, а не оттенком —
     в системе один акцент, дополнительных цветов не вводим. */
  --cat-1: #A8623F;
  --cat-2: #C08561;
  --cat-3: #8C8577;
  --cat-4: #E4DCCB;

  /* ── Типографика ─────────────────────────────────────── */
  --font-serif: 'Lora', Georgia, 'Times New Roman', serif;
  --font-sans: 'Golos Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Consolas, monospace;

  /* ── Шкала отступов: «почти удвоение, а не строгая сетка 8» ── */
  --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;

  /* ── Радиусы ─────────────────────────────────────────── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;
}

/* ==========================================================================
   База
   ========================================================================== */

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

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-serif); font-weight: 600; margin: 0; text-wrap: balance; }
h1 { font-size: 40px; line-height: 1.1; }
h2 { font-size: 32px; line-height: 1.15; }
h3 { font-size: 24px; font-weight: 500; line-height: 1.2; }
h4 { font-family: var(--font-sans); font-size: 18px; font-weight: 600; line-height: 1.3; margin: 0; }
p { margin: 0; }

a { color: var(--brand-primary); }

::selection { background: var(--surface-accent-soft); color: var(--brand-accent); }

:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

/* ==========================================================================
   Типографические роли
   ========================================================================== */

.t-display { font-family: var(--font-serif); font-size: 56px; font-weight: 600; line-height: 1.05; letter-spacing: -.015em; }
.t-h1 { font-family: var(--font-serif); font-size: 40px; font-weight: 600; line-height: 1.1; }
.t-h2 { font-family: var(--font-serif); font-size: 32px; font-weight: 600; line-height: 1.15; }
.t-h3 { font-family: var(--font-serif); font-size: 24px; font-weight: 500; line-height: 1.2; }
.t-h4 { font-family: var(--font-sans); font-size: 18px; font-weight: 600; line-height: 1.3; }
.t-body-l { font-size: 16px; line-height: 1.5; }
.t-body { font-size: 14px; line-height: 1.5; }
.t-caption { font-size: 12px; line-height: 1.5; }

/* Единственное место с прописными — «бровка» над заголовком секции */
.t-label,
.eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--brand-primary);
}

.text-muted { color: var(--text-muted); }
.text-faint { color: var(--text-faint); }

/* ==========================================================================
   Логотип
   ========================================================================== */

.logo-wordmark { display: block; height: 28px; width: auto; }
.logo-icon { display: block; height: 32px; width: auto; }

/* ==========================================================================
   Кнопки — инфинитив или императив, коротким глаголом
   ========================================================================== */

.btn {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  padding: 12px 24px;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: opacity .15s ease, transform .1s ease;
}
.btn:hover { opacity: .88; }
.btn:active { transform: scale(.97); }

.btn-lg { font-size: 16px; font-weight: 600; padding: 16px 32px; border-radius: var(--radius-lg); }

.btn-primary { background: var(--brand-primary); color: var(--text-on-brand); }
.btn-secondary { background: var(--surface-card); color: var(--text-body); box-shadow: inset 0 0 0 1px var(--border-default); }
.btn-accent { background: var(--brand-accent); color: var(--text-on-brand); }
.btn-ghost { background: transparent; color: var(--text-muted); box-shadow: inset 0 0 0 1px var(--border-default); }
.btn:disabled,
.btn-disabled { background: var(--color-beige); color: var(--text-faint); cursor: not-allowed; }
.btn:disabled:hover,
.btn-disabled:hover { opacity: 1; }

/* На тёмной поверхности */
.on-dark .btn-secondary { background: transparent; color: var(--text-on-dark); box-shadow: inset 0 0 0 1px var(--border-on-dark); }
.on-dark .btn-ghost { color: var(--text-on-dark-muted); box-shadow: inset 0 0 0 1px var(--border-on-dark); }

/* ==========================================================================
   Карточки — радиус всегда 16px, граница вкладная, тени отсутствуют
   ========================================================================== */

.card {
  background: var(--surface-card);
  border-radius: var(--radius-xl);
  box-shadow: inset 0 0 0 1px var(--border-default);
  padding: var(--space-5);
}

.card-soft {
  background: var(--surface-accent-soft);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
}

/* Обоснование матча — обязательное поле карточки по бренд-буку */
.reason {
  background: var(--surface-accent-soft);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--brand-primary);
}

/* ==========================================================================
   Теги — всегда пилюля, только факты, без геймификации
   ========================================================================== */

.tag {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  background: var(--surface-accent-soft);
  color: var(--brand-primary);
}
.tag-strong { background: var(--surface-accent-soft); color: var(--brand-accent); }
.tag-quiet { background: var(--color-beige); color: var(--text-muted); }

/* ==========================================================================
   Поля ввода
   ========================================================================== */

.input,
.textarea {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  width: 100%;
  border: none;
  outline: none;
  border-radius: var(--radius-md);
  padding: 0 14px;
  background: var(--surface-card);
  color: var(--text-body);
  box-shadow: inset 0 0 0 1px var(--border-default);
  transition: box-shadow .15s ease;
}
.input { height: 48px; }
.textarea { padding: 12px 14px; min-height: 48px; line-height: 1.5; resize: vertical; }

.input::placeholder,
.textarea::placeholder { color: var(--text-faint); }

/* Мягкое внешнее кольцо в терракоте — единственное «свечение» в системе */
.input:focus,
.textarea:focus {
  box-shadow: inset 0 0 0 1px var(--brand-primary), 0 0 0 3px var(--surface-accent-soft);
}

.input:disabled,
.textarea:disabled { background: var(--surface-page); color: var(--color-text-disabled); }

/* ==========================================================================
   Разметка страницы-документа (раздел /team)
   ========================================================================== */

.wrap { max-width: 880px; margin: 0 auto; padding: var(--space-8) var(--space-5) var(--space-9); }
.wrap-wide { max-width: 1120px; }

.back {
  display: inline-block;
  font-size: 13px;
  color: var(--text-faint);
  text-decoration: none;
  margin-bottom: var(--space-6);
}
.back:hover { color: var(--text-body); }

.page-header { margin-bottom: var(--space-7); }
.page-header .eyebrow { margin-bottom: var(--space-3); }
.page-header h1 { margin-bottom: var(--space-2); }
.page-header .subtitle { color: var(--text-faint); font-size: 16px; max-width: 64ch; }

.section { margin-bottom: var(--space-7); }
.section > h2 { margin-bottom: var(--space-5); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-default); }

.page-footer {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-default);
  font-size: 13px;
  color: var(--text-faint);
}

/* ==========================================================================
   Таблицы
   ========================================================================== */

.table-wrap {
  overflow-x: auto;
  background: var(--surface-card);
  border-radius: var(--radius-xl);
  box-shadow: inset 0 0 0 1px var(--border-default);
}

.table { width: 100%; border-collapse: collapse; }
.table th,
.table td {
  text-align: left;
  vertical-align: top;
  padding: 14px 18px;
  font-size: 14px;
  border-bottom: 1px solid var(--border-default);
}
.table tr:last-child td { border-bottom: none; }
.table th {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-faint);
  background: var(--surface-page);
}
.table td { color: var(--text-muted); }
.table th:first-child,
.table td:first-child { font-weight: 600; color: var(--text-body); background: var(--surface-page); }
.table .num { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Утилиты
   ========================================================================== */

.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.grid { display: grid; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}