/* ===== ЧЫРАК / MUGALIM — общие токены и компоненты ===== */

@font-face {
  font-family: 'Unbounded';
  src: url('../fonts/unbounded-cyrillic-600-normal.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Unbounded';
  src: url('../fonts/unbounded-cyrillic-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Unbounded';
  src: url('../fonts/unbounded-cyrillic-800-normal.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Golos Text';
  src: url('../fonts/golos-text-cyrillic-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Golos Text';
  src: url('../fonts/golos-text-cyrillic-500-normal.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Golos Text';
  src: url('../fonts/golos-text-cyrillic-600-normal.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Golos Text';
  src: url('../fonts/golos-text-cyrillic-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root{
  /* фон / текст */
  --paper: #EEF1F6;
  --paper-warm: #EEF0FA;  /* было тёплым кремовым — увели в холодную гамму вслед за акцентом */
  --surface: #FFFFFF;
  --ink: #1B1E2B;
  --ink-soft: #383D52;
  --muted: #656B7C;
  --line: rgba(27,30,43,.10);
  --line-strong: rgba(27,30,43,.16);

  /* акцент — было "пламя" (оранжевый), стало индиго/фиолетовый.
     Осознанно уведено в фиолетовый, а не голубой — иначе сольётся с --info ниже. */
  --flame: #5B3FE0;
  --flame-deep: #3F2AA8;
  --flame-tint: #ECE8FB;
  --flame-ink: #33227A;
  --flame-on: #FFFFFF;  /* текст поверх --flame — было тёмно-коричневым на светлом оранжевом, тут нужен белый */

  /* статусы воронки — не трогаем: --info нарочно серо-синий, чтобы не сливаться с новым акцентом */
  --info: #3B6EA5;       --info-tint: #E3ECF5;
  --upcoming: #3F7D6E;   --upcoming-tint: #E4F0EC;
  --success: #2E7D4F;    --success-tint: #E4F2E8;
  --closed: #62687A;     --closed-tint: #E9EAEE;
  --danger: #B3432F;     --danger-tint: #F7E6E2;

  --radius-lg: 20px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --radius-full: 999px;

  --shadow-card: 0 1px 2px rgba(27,30,43,.05), 0 10px 28px rgba(27,30,43,.07);
  --shadow-pop: 0 2px 6px rgba(27,30,43,.06), 0 20px 48px rgba(27,30,43,.12);

  --font-display: 'Unbounded', 'Arial Narrow', sans-serif;
  --font-body: 'Golos Text', 'Segoe UI', Arial, sans-serif;

  /* фиксированный тёмный тон — для элементов, которые должны выглядеть
     тёмными независимо от темы (.btn-dark, тёмные блоки на лендинге),
     в отличие от --ink, который в тёмной теме становится светлым */
  --night: #1B1E2B;
  --hover-tint: #FBFBFD;
}

/* тёмная тема: следует системной настройке, если пользователь не выбрал
   "светлая" вручную через переключатель темы (нижний правый угол) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #14121F;
    --paper-warm: #211D3A;
    --surface: #242838;
    --ink: #F2F1F8;
    --ink-soft: #D7D9E3;
    --muted: #B8BCC9;
    --line: rgba(255,255,255,.08);
    --line-strong: rgba(255,255,255,.16);

    /* --flame/--flame-tint/--flame-ink специально НЕ трогаем — они всегда
       используются парой (сами держат контраст) и остаются фирменными
       бейджами-«островками» вне зависимости от темы. --flame-deep — трогаем,
       он везде используется как текст прямо на фоне страницы/карточки, и
       должен посветлеть, иначе станет нечитаемым на тёмном фоне (тот же
       приём, что уже был в .impact .eyebrow) */
    --flame-deep: #9C86F5;

    --hover-tint: #242838;
  }
}

/* тёмная тема: явный выбор через переключатель — побеждает системную настройку */
:root[data-theme="dark"] {
  --paper: #14121F;
  --paper-warm: #211D3A;
  --surface: #242838;
  --ink: #F2F1F8;
  --ink-soft: #D7D9E3;
  --muted: #B8BCC9;
  --line: rgba(255,255,255,.08);
  --line-strong: rgba(255,255,255,.16);
  --flame-deep: #9C86F5;
  --hover-tint: #242838;
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ display:block; max-width:100%; }
a{ color: inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family: var(--font-display); margin:0; line-height:1.15; letter-spacing: -0.01em; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }

.container{ max-width: 1200px; margin:0 auto; padding: 0 40px; }

/* ---------- Кнопки ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family: var(--font-body); font-weight:600; font-size:15px;
  padding: 14px 26px; border-radius: var(--radius-md);
  border: 1.5px solid transparent; cursor:pointer;
}
.btn-primary{ background: var(--flame); color: var(--flame-on); box-shadow: 0 8px 20px rgba(91,63,224,.35); }
.btn-secondary{ background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn-ghost{ background: transparent; color: var(--ink); border-color: transparent; }
.btn-dark{ background: var(--night); color:#fff; }
.btn-block{ width:100%; }
.btn-sm{ padding: 10px 18px; font-size:14px; }

/* ---------- Карточки ---------- */
.card{
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}

/* ---------- Поля форм ---------- */
.field{ display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.field label{ font-size:13px; font-weight:600; color: var(--ink-soft); }
.field .hint{ font-size:13px; color: var(--muted); }
.field .req{ color: var(--flame-deep); }
.input, select.input, textarea.input{
  font-family: var(--font-body); font-size:15px; color: var(--ink);
  background: var(--paper); border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-md); padding: 13px 16px; width:100%;
  appearance:none; outline:none;
}
textarea.input{ resize:none; line-height:1.55; }
.input::placeholder{ color:#9096A6; }
.input:focus{ border-color: var(--flame); }
.select-wrap{ position:relative; }
.select-wrap:after{
  content:""; position:absolute; right:16px; top:50%; width:9px; height:9px;
  border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
  transform: translateY(-70%) rotate(45deg);
}

/* radio / checkbox */
.choice-row{ display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); }
.choice-row:last-child{ border-bottom:none; }
.choice-dot{ width:20px; height:20px; border-radius:50%; border:2px solid var(--line-strong); flex:none; position:relative; }
.choice-dot.checked{ border-color: var(--flame); }
.choice-dot.checked:after{ content:""; position:absolute; inset:4px; border-radius:50%; background:var(--flame); }
.choice-box{ width:20px; height:20px; border-radius:6px; border:2px solid var(--line-strong); flex:none; display:flex; align-items:center; justify-content:center; }
.choice-box.checked{ border-color: var(--flame); background:var(--flame); }
.choice-box.checked svg{ stroke: var(--flame-on); }

/* ---------- Значки / статусы ---------- */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:600; padding:7px 14px; border-radius: var(--radius-full);
}
.badge-dot{ width:7px; height:7px; border-radius:50%; }
.badge-info{ background: var(--info-tint); color: var(--info); }
.badge-upcoming{ background: var(--upcoming-tint); color: var(--upcoming); }
.badge-success{ background: var(--success-tint); color: var(--success); }
.badge-closed{ background: var(--closed-tint); color: var(--closed); }
.badge-danger{ background: var(--danger-tint); color: var(--danger); }
.badge-flame{ background: var(--flame-tint); color: var(--flame-ink); }

/* ---------- Прогресс ---------- */
.progress-track{ height:8px; border-radius: var(--radius-full); background: var(--line); overflow:hidden; }
.progress-fill{ height:100%; border-radius: var(--radius-full); background: linear-gradient(90deg, var(--flame-deep), var(--flame)); }

/* ---------- Навигация сайта ---------- */
.topnav{
  display:flex; align-items:center; justify-content:space-between;
  padding: 22px 40px; max-width:1200px; margin:0 auto;
}
.topnav .links{ display:flex; align-items:center; gap:36px; font-weight:600; font-size:15px; color: var(--ink-soft); }
.topnav .links a:hover{ color: var(--ink); }

/* ---------- Метки шагов ---------- */
.eyebrow{
  font-family: var(--font-body); font-weight:700; font-size:13px; letter-spacing:.08em;
  text-transform:uppercase; color: var(--flame-deep);
}

/* ---------- Утилиты ---------- */
.row{ display:flex; }
.col{ display:flex; flex-direction:column; }
.gap-8{ gap:8px; } .gap-12{ gap:12px; } .gap-16{ gap:16px; } .gap-24{ gap:24px; } .gap-32{ gap:32px; }
.muted{ color: var(--muted); }
.center{ text-align:center; }

/* ---------- Переключатель темы (плавающая кнопка, одна на все страницы) ---------- */
.theme-toggle-btn{
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--surface); border: 1.5px solid var(--line-strong);
  box-shadow: var(--shadow-pop);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-soft); cursor: pointer; padding: 0;
}
.theme-toggle-btn:hover{ color: var(--flame); border-color: var(--flame); }
.theme-toggle-btn svg{ width: 20px; height: 20px; display: none; }
html:not([data-theme]) .theme-toggle-btn .icon-auto,
html[data-theme="auto"] .theme-toggle-btn .icon-auto,
html[data-theme="light"] .theme-toggle-btn .icon-light,
html[data-theme="dark"] .theme-toggle-btn .icon-dark{ display: block; }
@media (max-width: 480px){
  .theme-toggle-btn{ right: 14px; bottom: 14px; width: 40px; height: 40px; }
}