/* ============================================================
   DokCheck UI — дизайн-токены и компоненты.
   Направление: «Правовой документ» (docs/strategy/26_DESIGN_DIRECTION.md).
   Слой поверх Tailwind (работает и с play CDN, и со сборкой).
   Подключение: <link rel="stylesheet" href="/css/ui.css">
   ============================================================ */

:root {
  /* Поверхности и текст */
  --paper: #FDFDFB;
  --surface: #FFFFFF;
  --ink: #1A2233;
  --text: #334155;
  --text-muted: #64748B;
  --line: #E2E8F0;
  --line-strong: #CBD5E1;

  /* Семантика: язык вердикта */
  --act: #059669;        /* действие, успех, «одобрено» */
  --act-hover: #047857;
  --act-active: #065F46;
  --act-soft: #ECFDF5;
  --risk: #BE123C;       /* риск, ошибка */
  --risk-soft: #FFF1F2;
  --warn: #B45309;       /* внимание */
  --warn-soft: #FFFBEB;
  --info: #1D4ED8;
  --info-soft: #EFF6FF;

  /* Типографика */
  --font-display: 'Lora', Georgia, serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --text-hero: clamp(1.9rem, 1.2rem + 3vw, 3.75rem);
  --text-h2: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
  --text-h3: 1.375rem;
  --leading-tight: 1.1;
  --leading-body: 1.6;
  --measure: 65ch;

  /* Радиусы — три уровня, не униформно */
  --r-control: 8px;
  --r-card: 12px;
  --r-feature: 16px;

  /* Глубина: тень всегда в паре с границей */
  --shadow-1: 0 1px 2px rgb(26 34 51 / .06);
  --shadow-2: 0 4px 16px rgb(26 34 51 / .08);
  --shadow-3: 0 20px 50px rgb(26 34 51 / .16);

  /* Ритм секций — четыре ступени вместо одной */
  --rhythm-hero: clamp(3rem, 2rem + 4vw, 6rem);
  --rhythm-section: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  --rhythm-dense: clamp(1.5rem, 1rem + 2vw, 3rem);
  --rhythm-sparse: clamp(4rem, 3rem + 5vw, 8rem);

  /* Движение */
  --dur: 150ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --touch: 44px;
}

/* ---------- Глобальные состояния (чистый выигрыш, ничего не ломают) ---------- */

:focus-visible {
  outline: 2px solid var(--act);
  outline-offset: 2px;
  border-radius: 2px;
}

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

/* ---------- Кнопки ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--touch);
  padding: 0.625rem 1.25rem;
  border-radius: var(--r-control);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
  text-decoration: none;
}
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
}

.btn-primary {
  background: var(--act);
  color: #fff;
  border: 1px solid var(--act);
}
.btn-primary:hover { background: var(--act-hover); box-shadow: var(--shadow-2); transform: translateY(-1px); }
.btn-primary:active { background: var(--act-active); transform: translateY(0); box-shadow: var(--shadow-1); }

.btn-secondary {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-strong);
}
.btn-secondary:hover { background: var(--paper); border-color: var(--text-muted); box-shadow: var(--shadow-1); transform: translateY(-1px); }
.btn-secondary:active { transform: translateY(0); box-shadow: none; }

.btn-ghost {
  background: transparent;
  color: var(--act);
  border: 1px solid transparent;
}
.btn-ghost:hover { background: var(--act-soft); }
.btn-ghost:active { background: #D1FAE5; }

.btn-risk {
  background: var(--risk);
  color: #fff;
  border: 1px solid var(--risk);
}
.btn-risk:hover { filter: brightness(1.08); box-shadow: var(--shadow-2); transform: translateY(-1px); }
.btn-risk:active { transform: translateY(0); }

/* ---------- Карточки ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card-hoverable:hover {
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
  border-color: var(--line-strong);
}
.card-featured {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-feature);
  box-shadow: var(--shadow-2);
}

/* ---------- Формы ---------- */

.input {
  display: block;
  width: 100%;
  min-height: var(--touch);
  padding: 0.625rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-control);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.input:focus {
  outline: none;
  border-color: var(--act);
  box-shadow: 0 0 0 3px rgb(5 150 105 / .15);
}
.input::placeholder { color: var(--text-muted); }

/* ---------- Бейджи и алерты (язык вердикта) ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
}
.badge-act  { background: var(--act-soft);  color: var(--act); }
.badge-risk { background: var(--risk-soft); color: var(--risk); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-info { background: var(--info-soft); color: var(--info); }

.alert {
  padding: 0.75rem 1rem;
  border-radius: var(--r-card);
  border: 1px solid;
  font-size: 0.875rem;
  line-height: 1.5;
}
.alert-success { background: var(--act-soft);  border-color: #A7F3D0; color: #065F46; }
.alert-risk    { background: var(--risk-soft); border-color: #FECDD3; color: #9F1239; }
.alert-warn    { background: var(--warn-soft); border-color: #FDE68A; color: #92400E; }
.alert-info    { background: var(--info-soft); border-color: #BFDBFE; color: #1E40AF; }

/* ---------- Типографика ---------- */

.t-hero {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  overflow-wrap: normal;   /* не рвать слово без дефиса */
  hyphens: auto;           /* русские переносы с дефисом (lang="ru") */
  text-wrap: balance;      /* ровные строки заголовка */
}
.t-h2 {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.t-h3 {
  font-family: var(--font-body);
  font-size: var(--text-h3);
  font-weight: 600;
  line-height: 1.3;
}
.t-measure { max-width: var(--measure); }

/* ---------- Ритм секций ---------- */

.rhythm-hero    { padding-block: var(--rhythm-hero); }
.rhythm-section { padding-block: var(--rhythm-section); }
.rhythm-dense   { padding-block: var(--rhythm-dense); }
.rhythm-sparse  { padding-block: var(--rhythm-sparse); }

/* ---------- Фоны-утилиты (не зависят от сборки Tailwind) ---------- */

.bg-paper { background: var(--paper); }
.bar-ink  { background: var(--ink); }
.badge-new { background: rgb(16 185 129 / .15); color: #6EE7B7; }

/* ---------- «Жизненные ситуации» — маршрутизатор понимания ---------- */

.sit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: .75rem; }
.sit {
  display: block; padding: 1rem 1.15rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); text-decoration: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.sit:hover { border-color: var(--act); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.sit-t { display: block; font-weight: 600; color: var(--ink); font-size: .95rem; line-height: 1.3; }
.sit-d { display: block; font-size: .8rem; color: var(--text-muted); margin-top: .2rem; line-height: 1.4; }
.sit:hover .sit-t { color: var(--act); }