/* Токены лендинга «Base CRM».
 *
 * ⚠️ ТЕМ ДВЕ, И СВЕТЛАЯ — ОСНОВНАЯ (решение владельца 01.09.2026). Тёмная
 * остаётся переключателем, а не исчезает: она уже собрана и кому-то ближе.
 *
 * ⚠️ ПРАВИЛО, БЕЗ КОТОРОГО ВТОРАЯ ТЕМА РАЗЪЕДЕТСЯ: цвет НИКОГДА не пишется
 * по месту, только токеном. Разметка не знает, светлая сейчас страница или
 * тёмная, — знают только эти два блока. Первая версия страницы была тёмной
 * насквозь и красила фон прямо в секциях; ровно поэтому вторую тему пришлось
 * бы собирать заново.
 *
 * Токенов ДВА НАБОРА, и это несущее:
 *   --bg/--fg…    обычная поверхность страницы;
 *   --alt-bg/…    КОНТРАСТНАЯ секция (полоса во всю ширину).
 * В светлой теме контраст — тёмно-зелёный, в тёмной — чуть приподнятый
 * почти чёрный. Инвертировать вторую нельзя: белая полоса посреди тёмной
 * страницы бьёт по глазам, а ритм задаёт не «противоположность», а перепад.
 */
:root {
  color-scheme: light;

  /* ⚠️ ЗНАЧЕНИЕ ЖИВЁТ В `--surface-*`, А `--fg`/`--bg` НА НЕГО ССЫЛАЮТСЯ, и это
     не украшение. Контрастная секция переопределяет `--fg` и `--bg` у себя
     внутри — значит светлая КАРТОЧКА, стоящая в тёмной полосе, наследует
     светлый текст и становится белым по белому (так и было с формой в конце
     страницы: заголовок «Оставьте почту» читался как погашенный). Вернуть
     обычные цвета можно только сославшись на значение, которого полоса не
     трогает; дублировать числа по месту нельзя — две темы разъедутся. */
  --surface-bg:     #F7F5F0;   /* фон страницы */
  --surface-bg-2:   #FFFFFF;   /* карточка, поле ввода */
  --surface-bg-3:   #EFEBE2;   /* приглушённая плашка */
  --surface-fg:     #101614;   /* основной текст */
  --surface-fg-2:   #5C665F;   /* вторичный */
  --surface-fg-3:   #8B948C;   /* подписи, надзаголовки */
  --surface-line:   #E4E0D6;
  --surface-line-2: #D4CEC1;

  --bg:      var(--surface-bg);
  --bg-2:    var(--surface-bg-2);
  --bg-3:    var(--surface-bg-3);
  --fg:      var(--surface-fg);
  --fg-2:    var(--surface-fg-2);
  --fg-3:    var(--surface-fg-3);
  --line:    var(--surface-line);
  --line-2:  var(--surface-line-2);

  --alt-bg:   #0C1712;  /* контрастная секция */
  --alt-fg:   #F2EFE8;
  --alt-fg-2: #A8B3AB;
  --alt-fg-3: #74807a;
  --alt-line: rgba(242, 239, 232, .13);

  --accent:      #2F7A4F;
  --accent-soft: #E7F3EC;
  --on-accent:   #FFFFFF;
  --warn:        #C0492B;
  --ok:          #2F7A4F;

  /* Кнопка-действие: на светлом — тёмная, на тёмном — светлая. */
  --btn-bg: #16301F;
  --btn-fg: #F5F2EC;
  --btn-bg-hover: #1E4029;

  --glow: rgba(47, 122, 79, .10);
  --shadow-app:  0 30px 70px -24px rgba(16, 22, 20, .30), 0 0 0 1px var(--line);
  --shadow-card: 0 16px 38px -16px rgba(16, 22, 20, .22);
  --shadow-pop:  0 40px 90px -20px rgba(16, 22, 20, .38);
}

[data-theme="dark"] {
  color-scheme: dark;

  --surface-bg:     #070B09;
  --surface-bg-2:   #101915;
  --surface-bg-3:   #16211B;
  --surface-fg:     #F2EFE8;
  --surface-fg-2:   #A8B3AB;
  --surface-fg-3:   #6C7972;
  --surface-line:   rgba(242, 239, 232, .10);
  --surface-line-2: rgba(242, 239, 232, .19);

  --bg:      var(--surface-bg);
  --bg-2:    var(--surface-bg-2);
  --bg-3:    var(--surface-bg-3);
  --fg:      var(--surface-fg);
  --fg-2:    var(--surface-fg-2);
  --fg-3:    var(--surface-fg-3);
  --line:    var(--surface-line);
  --line-2:  var(--surface-line-2);

  --alt-bg:   #0C1310;
  --alt-fg:   #F2EFE8;
  --alt-fg-2: #A8B3AB;
  --alt-fg-3: #6C7972;
  --alt-line: rgba(242, 239, 232, .10);

  --accent:      #8FBF9F;
  --accent-soft: rgba(143, 191, 159, .14);
  --on-accent:   #07110B;
  --warn:        #E8795B;
  --ok:          #6FCB92;

  --btn-bg: #F2EFE8;
  --btn-fg: #070B09;
  --btn-bg-hover: #FFFFFF;

  --glow: rgba(143, 191, 159, .13);
  --shadow-app:  0 40px 90px -20px rgba(0, 0, 0, .75), 0 0 0 1px var(--line-2);
  --shadow-card: 0 18px 40px -12px rgba(0, 0, 0, .5);
  --shadow-pop:  0 50px 110px -20px rgba(0, 0, 0, .8);
}

:root {
  --sans: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --container: 1240px;
  --pad: 32px;
  --section-y: 118px;
  --radius: 12px;
  --radius-lg: 16px;
}

@media (max-width: 860px) { :root { --pad: 20px; --section-y: 72px; } }