/* =======================================================================
   Слой дизайна поверх tokens.css.

   Здесь живут уточнения, пришедшие из Claude Design (проект «ЮрГид24»):
   более мягкие границы, крупные радиусы, тени с подъёмом, градиенты действия
   и «кольцо» выбранного варианта. Отдельным файлом — чтобы core/sync.py
   продолжал сверять tokens.css с продом дословно, а дельта была видна и
   могла позже уехать в прод-токены целиком.
   ======================================================================= */
:root {
  /* Границы мягче прод-значений */
  --color-border-card: #e9edf2;
  --color-border-soft: #e0e6ec;
  --color-border-hover: #b8c6cf;
  /* Точка-разделитель в строке фактов профиля (Б1). Значения в прод-токенах не было. */
  --color-dot: #cfd8e0;
  /* Волосяная линия между секциями. Из дизайн-прогона листинга: мягче,
     чем граница карточки, и не спорит с крупной типографикой. */
  --color-hairline: #eef2f6;

  /* Радиусы: карточка формы, карточка выбора, контрол */
  --r-form: 24px;
  --r-choice: 14px;
  --r-control: 12px;
  --r-sub: 8px;

  /* Тени */
  --sh-form: 0 1px 2px rgba(17, 17, 27, .04), 0 18px 48px -18px rgba(17, 17, 27, .18);
  --sh-cta: 0 8px 20px -8px rgba(20, 167, 160, .65);
  --sh-cta-hover: 0 12px 26px -8px rgba(20, 167, 160, .75);

  /* Градиенты */
  --grad-topline: linear-gradient(90deg, #147595 0%, #13aaa1 51%, #42e3b4 100%);
  --grad-cta: linear-gradient(90deg, #147595 0%, #13aaa1 51.31%, #147595 100%);

  /* Выбранный вариант: кольцо внутрь + лёгкая заливка */
  --ring-choice: inset 0 0 0 1.5px var(--color-action-primary), 0 6px 18px -10px rgba(20, 167, 160, .9);
  --wash-choice: rgba(20, 167, 160, .06);

  --ease-ui: 150ms ease-in-out;
}

/* Тёмная тема наследует ту же геометрию, меняются только поверхности. */
.wb-frame[data-theme='dark'] {
  --color-border-card: #23353a;
  --color-border-soft: #2f4750;
  --color-border-hover: #3c5a63;
  --sh-form: 0 1px 2px rgba(0, 0, 0, .3), 0 18px 48px -18px rgba(0, 0, 0, .6);
  --wash-choice: rgba(46, 197, 189, .10);
  --ring-choice: inset 0 0 0 1.5px var(--color-action-primary), 0 6px 18px -10px rgba(46, 197, 189, .55);
}