/* Копия src/products/neom2/brand.css с коммита bd5eae10 (08.10.2026) для прототипа калькулятора — не править, обновлять копированием. */
/* ============================================================================
   brand.css — фирменный облик Neom2 (TASK-183). Попадает только в сборку
   Neom2: файл подключает src/products/neom2.ts.
   Знак и иконки — products/neom2/brand, правила — страница /brandbook.
   Здесь только значения бренда и витрина входа; раскладку входа задаёт ядро.
   ============================================================================ */

:root {
  --neom2-on-dark: #ecebf2;          /* текст на графите */
  --neom2-on-dark-rgb: 236, 235, 242;
  --neom2-glow-rgb: 170, 172, 230;   /* лавандовый свет за знаком */
}

/* --- цвета приложения под бренд ---------------------------------------------
   Акцент — лаванда #666BA3 из знака (двойка логотипа, чуть глубже ради контраста
   белого текста 5:1): главные кнопки, текущее место, активный вид, ссылки и фокус.
   :root:root сильнее токенов ядра при любом порядке подключения стилей. */
:root:root:not([data-theme="dark"]) {
  --raw-accent: #666ba3;
  --raw-accent-hover: #5b6098;
  --raw-accent-soft: #efeff8;
  --raw-fill: #666ba3;
  --raw-fill-hover: #5b6098;
  --raw-fill-active: #51568c;
  --accent-edge: rgba(102, 107, 163, 0.3);
  --surface-focus: rgba(102, 107, 163, 0.1);
  --focus-ring-color: rgba(102, 107, 163, 0.42);
  --elev-current: inset 0 0 0 1px rgba(255, 255, 255, 0.6), var(--glass-shade-sm), 0 0.5px 4px rgba(102, 107, 163, 0.18);
}

/* в тёмной теме акцент — та же лаванда, высветленная до светлоты голубого ядра:
   ссылки, текущее место, активный вид и фокус не уходят в голубой (TASK-203) */
:root:root[data-theme="dark"] {
  --raw-accent: #aeb5fa;
  --raw-accent-hover: #c8cefd;
  --raw-accent-soft: #34364e;
  --accent-edge: rgba(174, 181, 250, 0.36);
  --surface-focus: rgba(174, 181, 250, 0.22);
  --surface-block-selected: rgba(174, 181, 250, 0.2);
  --focus-ring-color: rgba(174, 181, 250, 0.65);
  --raw-fill: #666ba3;
  --raw-fill-hover: #7075ad;
  --raw-fill-active: #5b6098;
}

/* --- вход и установка пароля: белый фон, как холст приложения --------------- */
.auth-page {
  --surface-backdrop: var(--surface-canvas);
  --surface-1: var(--surface-canvas);
}

/* заголовок спокойнее: вес словесного знака, без жирного дисплея */
.auth-page-showcase .auth-title { font-weight: 600; letter-spacing: -0.025em; }
.auth-page-showcase .auth-title i { font-weight: 400; }
.auth-page-showcase .auth-card { width: min(400px, 100%); }

/* --- витрина: графитовая половина со знаком в лавандовом свете --------------- */
.neom2-showcase {
  /* витрина — во весь экран и стоит на месте, форма рядом прокручивается */
  position: sticky;
  top: 0;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 44px 52px;
  overflow: hidden;
  color: var(--neom2-on-dark);
  background:
    radial-gradient(40% 36% at 50% 47%, rgba(var(--neom2-glow-rgb), 0.12), transparent 72%),
    radial-gradient(90% 40% at 50% 104%, rgba(var(--neom2-glow-rgb), 0.07), transparent 70%),
    linear-gradient(165deg, #1e1f23 0%, #121316 55%, #0b0c0e 100%);
}

/* светящаяся кромка у пола */
.neom2-showcase::after {
  content: "";
  position: absolute;
  inset: auto 12% 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--neom2-glow-rgb), 0.42), transparent);
}

.neom2-showcase-mark {
  align-self: center;
  justify-self: center;
  width: auto;
  /* вертикальный логотип: знак прежнего размера (до 290 px), надпись neom² под ним */
  height: clamp(245px, 49vh, 418px);
  filter:
    drop-shadow(0 0 26px rgba(var(--neom2-glow-rgb), 0.2))
    drop-shadow(0 30px 40px rgba(0, 0, 0, 0.55));
}

.neom2-showcase-verbs,
.neom2-showcase-motto {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
}

.neom2-showcase-verbs {
  justify-self: end;
  padding: 0;
  list-style: none;
  color: rgba(var(--neom2-on-dark-rgb), 0.5);
}

.neom2-showcase-motto { color: rgba(var(--neom2-on-dark-rgb), 0.72); }

/* телефон и узкое окно: только форма на белом фоне */
@media (max-width: 900px) {
  .neom2-showcase { display: none; }
}