/* Фирменное поле — форма его градиентов, одна на портал и админку. Здесь только позиции и проценты; цвета остановок
   (--brand-base*, --brand-glow-*) рассчитывает из трёх цветов поля PortalBrandFieldCss, а выводит тот, кто красит поле:
   портал — inline-стилем страницы на :root (App.razor), админка — в style контейнера предпросмотра оформления.
   Свойство со ссылкой на переменную вычисляется там, где объявлено, поэтому форма объявлена и на :root, и на
   .portal-brand-field — элементе, у которого (или у предка которого) свои --brand-*: на :root админки их нет, и
   градиенты героя предпросмотра собираются на нём самом.
   Портал подключает файл в App.razor (@Assets), админка — в index.html. Пользуются: theme.css (герои), login.css и
   portal.css (вход и экран загрузки) портала, _admin.scss (герой предпросмотра). Слои сверху вниз: затемнение под
   текст (shade) и свечения (glow; на телефоне проще). */
:root, .portal-brand-field {
  --brand-field-shade: linear-gradient(90deg,
    color-mix(in srgb, var(--brand-base) 77%, transparent) 0%,
    color-mix(in srgb, var(--brand-base) 25%, transparent) 46%, transparent 77%);
  --brand-field-glow:
    radial-gradient(ellipse at 83% -24%, var(--brand-glow-a) 0%, var(--brand-glow-a-soft) 20%, transparent 58%),
    radial-gradient(ellipse at 13% 135%, var(--brand-glow-b) 0%, var(--brand-glow-b-soft) 22%, transparent 56%),
    linear-gradient(110deg, var(--brand-base-dim) 5%, var(--brand-base-lift) 60%, var(--brand-base));
  --brand-field-glow-phone:
    radial-gradient(ellipse at 100% 0%, var(--brand-glow-b-lift) 0%, transparent 66%),
    radial-gradient(ellipse at 10% 150%, var(--brand-glow-b-mid), transparent 55%),
    var(--brand-base);
  --brand-login-shade:
    radial-gradient(ellipse at 51% 54%,
      color-mix(in srgb, var(--brand-base-deep) 75%, transparent) 0%,
      color-mix(in srgb, var(--brand-base-deep) 19%, transparent) 47%, transparent 75%),
    linear-gradient(0deg, color-mix(in srgb, var(--brand-base-deepest) 60%, transparent), transparent 45%);
  --brand-login-glow:
    radial-gradient(ellipse at 78% 3%, var(--brand-glow-a) 0%, var(--brand-glow-b-mid) 22%, transparent 52%),
    radial-gradient(ellipse at 4% 60%, var(--brand-glow-b-mid) 0%, var(--brand-glow-b-deep) 26%, transparent 56%),
    linear-gradient(135deg, var(--brand-base-deepest) 0%, var(--brand-base) 46%, var(--brand-base-deepest) 100%);
  --brand-login-glow-phone:
    radial-gradient(ellipse at 100% 0%, var(--brand-glow-a-mid) 0%, transparent 58%),
    radial-gradient(ellipse at 0% 90%, var(--brand-glow-b-mid), transparent 60%),
    var(--brand-base-deep);
}