/* ============================================================================
   Светлая тема дизайн-системы NZT.

   Палитра взята из прототипа krovel (~/projects/krovel, krovel.danifodemo.ru) —
   это и есть светлая редакция NZT: та же plum-доминанта, те же Unbounded + PT Sans,
   те же радиусы. Меняется только палитра и способ показать глубину: в тёмной теме
   её дают волосяные рамки и стекло, в светлой — белая панель с мягкой тенью.

   Подключается ПОСЛЕ /ds/css/nzt-ds.css и ПЕРЕД /shop.css. Внутрь public/ds/
   класть нельзя: этот каталог целиком перезаписывается `npm run vendor-ds`.

   Файл устроен так, чтобы его можно было поднять в саму дизайн-систему: блок
   «Токены» — готовый tokens/theme-light.css, блок «Заплатки» исчезнет, когда
   компоненты системы переведут с примитивов на семантические роли.
   ============================================================================ */

/* ── 1. Токены ────────────────────────────────────────────────────────────── */
/* Переопределяем не только семантические роли, но и примитивы: css/components.css
   в 57 местах обращается к --bone / --ash / --smoke / --plum напрямую, в обход
   ролей, и через одни лишь роли тема бы не переехала. */
:root {
  /* Бумага вместо пустоты */
  --void:       #f6f6f8;   /* фон страницы */
  --bone:       #101016;   /* основной текст — «кость» на светлом читается как тушь */
  --ash:        #33333d;   /* тело текста */
  --smoke:      #63636d;   /* приглушённый / подписи */

  /* Акцент не меняется — он и есть NZT */
  --plum:       #8052ff;
  --plum-dim:   #6a40e0;   /* на светлом это ещё и цвет ТЕКСТА-акцента, см. ниже */
  --amber:      #8a5a00;   /* текстовый янтарь. #ffb829 на белом даёт 1,7:1, а взятый
                              из krovel #a86e00 — 4,29:1, тоже ниже порога AA */
  --amber-bar:  #ffb829;   /* заливочный янтарь — для полос и кнопок */
  --lichen:     #15846e;

  --danger:     #c62f2f;   /* притемнён: #d84343 на белом даёт ~4,0:1 */
  --danger-bar: #d84343;   /* рамки и полосы — им хватает 3:1 */
  --info:       #2f7cd6;   /* вместо #57aaff, который на белом почти не виден */
  --warning:    var(--amber);
  --success:    var(--lichen);

  /* Тинты: подложка активного состояния — plum 10 %, как в krovel */
  --plum-008:   rgba(128, 82, 255, 0.10);
  --plum-006:   rgba(128, 82, 255, 0.07);
  --plum-004:   rgba(128, 82, 255, 0.045);
  --plum-line:  rgba(128, 82, 255, 0.55);   /* рамка активного элемента */
  --amber-010:  rgba(255, 184, 41, 0.16);
  --danger-010: rgba(216, 67, 67, 0.09);
  --info-010:   rgba(47, 124, 214, 0.09);
  --lichen-012: rgba(21, 132, 110, 0.10);

  /* Волосяные линии переворачиваются: тёмные по светлому */
  --hairline:        rgba(10, 10, 22, 0.12);
  --hairline-strong: rgba(10, 10, 22, 0.22);

  /* Поверхности: сплошные, без стекла */
  --fill-card:  #ffffff;
  --fill-panel: #ffffff;
  --fill-soft:  #fafafc;   /* вторая поверхность: шапки таблиц, вложенные плашки */
  --fill-input: #ffffff;

  /* Роли, которым на светлом нужен другой примитив */
  --link-hover:     var(--plum-dim);
  --text-accent:    var(--plum-dim);   /* акцент-ТЕКСТ: #8052ff на белом — 4,60:1, впритык */
  --action:         var(--plum);       /* акцент-ЗАЛИВКА остаётся чистым */
  --action-hover:   var(--plum-dim);
  --action-quiet:   var(--plum-dim);   /* «подробнее →» внутри карточек */
  --status-danger:  var(--danger);
  --status-warning: var(--amber);
  --status-info:    var(--info);

  /* Глубина: в тёмной теме теней нет принципиально, в светлой они и есть иерархия */
  /* Тень карточки едва заметна: krovel-овская 0 12px 30px на каждой мелкой
     поверхности размывала интерфейс — глубину даёт в первую очередь рамка. */
  --shadow-card:  0 1px 2px rgba(10, 10, 30, 0.05), 0 6px 16px rgba(10, 10, 30, 0.05);
  --shadow-pop:   0 14px 34px rgba(10, 10, 30, 0.13);
  --shadow-modal: 0 28px 70px rgba(10, 10, 30, 0.20);
  --shadow-text:  none;    /* поднимало текст над полем частиц, которого у нас нет */
  --ring:         0 0 0 3px rgba(128, 82, 255, 0.22);
  --blur-header:  12px;

  /* Unbounded Light на белом выглядит анемично — в светлой редакции NZT
     дисплейные заголовки набраны Regular (см. krovel: h1,h2 { font-weight: 400 }). */
  --fw-light: 400;
}

/* ── 2. Заплатки на тёмные литералы дизайн-системы ────────────────────────── */
/* css/components.css в 13 местах содержит захардкоженные тёмные значения мимо
   токенов — переопределить их через :root невозможно. Каждое правило ниже
   гасит ровно одно такое место; когда система перейдёт на роли, блок исчезнет. */

/* .nzt-header { background: rgba(0, 0, 0, 0.45) } */
.nzt-header { background: rgba(246, 246, 248, 0.82); }

/* .nzt-cta--ghost:hover { background: rgba(255, 255, 255, 0.05) } */
.nzt-cta--ghost { color: var(--bone); border-color: var(--hairline-strong); }
.nzt-cta--ghost:hover { background: var(--plum-006); border-color: var(--plum); color: var(--plum-dim); }

/* .nzt-cta--amber { --cta-bg: var(--amber) } — текстовый янтарь для заливки слишком тёмный */
.nzt-cta--amber { --cta-bg: var(--amber-bar); color: #2a1d00; }
.nzt-cta--amber:hover { background: #f0a911; }

/* .nzt-footer__credit { color: rgba(255, 255, 255, 0.28) } */
.nzt-footer__credit { color: rgba(10, 10, 22, 0.34); }

/* .nzt-badge { background: rgba(255, 255, 255, 0.02) } */
.nzt-badge { background: var(--fill-soft); }
.nzt-badge--danger { color: var(--danger); border-color: var(--danger-bar); }
/* .nzt-badge--plum красится чистым --plum: на своей же подложке это 4,41:1 */
.nzt-badge--plum { color: var(--plum-dim); border-color: var(--plum-line); }

/* .nzt-skeleton { linear-gradient(…rgba(255,255,255,…)) } — белый шиммер на белом невидим */
.nzt-skeleton {
  background: linear-gradient(90deg,
    rgba(10, 10, 22, 0.05) 25%, rgba(10, 10, 22, 0.11) 37%, rgba(10, 10, 22, 0.05) 63%);
  background-size: 200% 100%;
}

/* Плавающие слои: в тёмной теме — стекло rgba(14,15,22,…), в светлой — белая панель с тенью */
.nzt-dropdown__menu,
.nzt-toast,
.nzt-modal__dialog {
  background: #ffffff;
  border-color: var(--hairline);
  box-shadow: var(--shadow-pop);
}
.nzt-modal__dialog { box-shadow: var(--shadow-modal); }
.nzt-drawer { background: #ffffff; border-left-color: var(--hairline); box-shadow: var(--shadow-modal); }

/* .nzt-tooltip__bubble — тёмная подсказка на светлом фоне уместна, но текст в ней
   красится в --bone, который теперь почти чёрный: возвращаем светлый. */
.nzt-tooltip__bubble { background: #1b1b24; border-color: #1b1b24; color: #ffffff; }

/* .nzt-modal__backdrop rgba(0,0,0,0.7) оставляем: затемняющая подложка верна для обеих тем. */

/* ── 3. Светлые нюансы компонентов ────────────────────────────────────────── */
/* Не литералы, а следствия смены темы: на бумаге глубину даёт тень, а не рамка. */
.nzt-card { box-shadow: var(--shadow-card); }
.nzt-card:hover { border-color: var(--plum-line); background: var(--plum-004); }
.nzt-stat { box-shadow: var(--shadow-card); }
.nzt-table th { background: var(--fill-soft); color: var(--smoke); }
.nzt-tab[aria-selected="true"] { color: var(--plum-dim); }
.nzt-pagination [aria-current] { border-color: var(--plum-line); color: var(--plum-dim); }
.nzt-alert { background: #ffffff; }
.nzt-empty { background: var(--fill-soft); }
::selection { background: var(--plum); color: #fff; }