/*
 * Дизайн-токены маркетингового сайта BronMe.
 * ---------------------------------------------------------------------------
 * Это НЕ те же токены, что у публичного сайта арендатора. Там палитра меняется
 * под каждую организацию (`pages/theme.py` → `--brand-600` и соседние), здесь
 * она постоянная: маркетинговый сайт — сайт самой платформы, а не арендатора.
 * Подмешивать одно в другое нельзя, иначе у одних и тех же классов появится
 * второй смысл.
 *
 * ГЛАВНОЕ ПРАВИЛО КОНТРАСТА (ТЗ, раздел 5.2).
 * #FF7A1A с белым текстом даёт около 2.6:1 и не проходит WCAG AA.
 * Белого текста на оранжевом на сайте нет нигде. Основная кнопка — оранжевая
 * заливка и ТЁМНЫЙ текст (--ink), это около 8:1. Оранжевый как текст допустим
 * только в варианте --brand-deep и только на светлом фоне.
 * Стережёт marketing_site/tests_design.py.
 *
 * ШРИФТЫ.
 * Manrope самохостится (static/css/fonts.css) и покрывает подмножество
 * cyrillic-ext, то есть казахские Ә Ғ Қ Ң Ө Ұ Ү Һ І отрисовываются без подмены
 * системным шрифтом. ТЗ называло ещё Inter и JetBrains Mono — их в репозитории
 * нет, и добавлять два семейства ради одного начертания дороже, чем они стоят:
 * лишние 4 файла woff2 на каждое, а требование «проверить казахские глифы»
 * пришлось бы проверять заново для каждого. Поэтому Manrope и в заголовках, и
 * в тексте, а роль моноширинного (цифры тарифов) закрыта
 * `font-variant-numeric: tabular-nums`.
 */

:root {
  /* --- Бренд ------------------------------------------------------------ */
  /* Значение экземпляра ставит partials/_pwa_head.html из резолвера
     core.services.branding; здесь — запас для зеркал и для страниц,
     собранных без контекста. */
  --brand:        var(--bronme-accent, #FF7A1A);
  --brand-deep:   #B84C00;   /* оранжевый как ТЕКСТ: 4.6:1 на белом */
  --brand-hover:  #E86A0A;   /* наведение, только на заливке */
  --brand-soft:   #FFF1E4;
  --brand-line:   #FFD5B0;

  /* --- Успех: «оплачено», галочки тарифов ------------------------------- */
  --ok:           #1E9E5A;
  --ok-deep:      #14713F;   /* как текст на белом */
  --ok-soft:      #E6F5ED;

  /* --- Каналы: только иконки и кнопки мессенджеров ---------------------- */
  --wa:           #25D366;
  --wa-deep:      #0F7A3D;
  --tg:           #229ED9;
  --tg-deep:      #10688F;

  /* --- Чернила ---------------------------------------------------------- */
  --ink:          #14161C;
  --ink-2:        #3D424E;
  --ink-3:        #61677A;   /* 4.6:1 на белом — минимальный «тихий» текст */

  /* --- Поверхности ------------------------------------------------------ */
  --paper:        #FFFFFF;
  --surface:      #F6F7F9;
  --surface-2:    #ECEEF2;
  --line:         #DEE1E7;
  --line-strong:  #C7CBD4;

  /* --- Тёмная поверхность (финальные призывы, рамка демо) --------------- */
  --night:        #14161C;
  --night-2:      #21242D;
  --night-line:   #343845;
  --on-night:     #FFFFFF;
  --on-night-2:   #B9BECB;

  /* --- Типографика ------------------------------------------------------ */
  --display: Manrope, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --body:    Manrope, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  /* --- Ритм, сетка 4px --------------------------------------------------- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  --radius:      12px;
  --radius-lg:   20px;
  --radius-pill: 999px;

  --wrap:        1180px;
  --wrap-narrow: 760px;
  --gutter:      24px;

  --shadow-sm: 0 1px 2px rgba(20,22,28,.06), 0 2px 8px rgba(20,22,28,.04);
  --shadow-md: 0 4px 12px rgba(20,22,28,.08), 0 12px 32px rgba(20,22,28,.06);
  --shadow-lg: 0 12px 28px rgba(20,22,28,.12), 0 32px 64px rgba(20,22,28,.10);

  --header-h: 68px;

  /* Липкая мобильная полоса: высота нужна и ей самой, и cookie-баннеру,
     который обязан вставать НАД ней, а не под ней (ТЗ, раздел 16.2). */
  --sticky-h: 68px;

  --ease: cubic-bezier(.2, .7, .3, 1);
  --dur:  .22s;
}

/* Уважение к системной настройке: анимаций нет вообще, включая демо. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0.001s; }
}