/*  Міст між старими компонентами й новим дизайном.
    ------------------------------------------------------------------
    Функціональні сторінки (кабінет, оплата, демо тощо) зверстані на
    класах site.css, а їхній JS генерує розмітку з тими самими класами.
    Замість переписувати кожну сторінку ми лишаємо розмітку як є і
    підміняємо ТОКЕНИ: site.css малює ті самі компоненти, але фарбами й
    шрифтами нового дизайну (styles.css задає --brand, --hairline тощо).
    Підключати ПІСЛЯ site.css.  */

:root {
  --bg: var(--background);
  --fg: var(--foreground);
  --accent: var(--brand);
  --accent-d: var(--brand-strong);
  --accent-hover: var(--ink);
  --muted: var(--muted-foreground);
  --muted2: var(--muted-foreground);
  --faint: #94a3b8;
  --feat: #334155;
  --line: var(--hairline);
  --line-head: var(--hairline);
  --line-code: #edf1f7;
  --divider: #edf1f7;
  --mint: var(--brand-soft);
  --mint-line: #d6e9fb;
  --mint-bg: rgba(243, 250, 255, 0.8);
  --tint: #8ec5ff;
  --tint2: #c4e0ff;
  --glass: rgba(255, 255, 255, 0.8);
  --code-str: #a16207;
  --sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --head: "Manrope", "Golos Text", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--sans);
}

/*  Шапка нового дизайну фіксована — вміст починається під нею.
    В інлайнових стилях сторінок відступ менший, тож !important.  */
.grow { padding-top: 6.5rem; }
main.wrap { padding-top: 7.5rem !important; }

/*  Короткі сторінки (вхід, оплата): вміст росте, підвал притиснутий до низу.  */
body { min-height: 100dvh; display: flex; flex-direction: column; }
body > main.wrap, body > .grow { flex: 1 0 auto; width: 100%; }

/*  Заокруглення під нову мову форм.  */
.btn { border-radius: 12px; }
.card { border-radius: 16px; }

/*  Статуси доплат/помилок лишаються семантичними, але в новій гамі.  */
.status.ok { color: var(--brand-strong); }

/*  site.css фарбує <a> в акцент прямим селектором — він б'є успадкований
    колір нової шапки навіть із шару. Повертаємо успадкування в ТОМУ Ж шарі
    (пізніший у шарі виграє), щоб hover-утиліти вищого шару лишилися живі.  */
@layer components {
  header nav a, .ftr a { color: inherit; }
}