/* ===========================
   li-theme.css  (LAB-INFO)
   Светлая тема по умолчанию
   Тёмная — по html[data-theme="dark"]
   =========================== */

/* --- БАЗОВЫЕ ТОКЕНЫ: СВЕТЛАЯ (default) --- */
:root {
  /* Палитра */
  --bg:       #ffffff;
  --surface:  #ffffff;
  --text:     #0f172a;   /* основной текст */
  --muted:    #65708a;   /* вторичный текст */
  --heading:  #0b1220;   /* заголовки */
  --brand:    #03dac6;   /* акцент 1 */
  --brand-2:  #00c4b3;   /* акцент 2 / градиент */
  --border:   rgba(15,23,42,.10);
  --shadow:   0 14px 36px rgba(2,6,23,.10);
  --radius:   16px;

  /* Ссылки */
  --link:        color-mix(in srgb, var(--brand) 55%, var(--text));
  --link-hover:  color-mix(in srgb, var(--brand) 75%, var(--text));
  /* фолбэки на случай отсутствия color-mix */
  --link-fallback:        #0ea5a3;
  --link-hover-fallback:  #12b5b3;

  /* Ринги/тени/прозрачные акценты */
  --ring: 0 0 0 2px rgba(3,218,198,.35);
  --brand-alpha-06: rgba(3,218,198,.06);
  --brand-alpha-12: rgba(3,218,198,.12);
  --brand-alpha-18: rgba(3,218,198,.18);
}

/* --- ТЁМНАЯ: ПОД АТРИБУТОМ --- */
html[data-theme="dark"] {
  --bg:       #0b1020;
  --surface:  #0f172a;
  --text:     #e5ebff;
  --muted:    #9aa4bc;
  --heading:  #f3f6ff;
  --brand:    #5b8cff;
  --brand-2:  #22d3ee;
  --border:   rgba(255,255,255,.08);
  --shadow:   0 10px 30px rgba(0,0,0,.30);

  /* ссылки в тёмной */
  --link:        #7dd3fc;
  --link-hover:  #a5f3fc;

  --ring: 0 0 0 2px #5b8cff33;
}

/* --- БАЗОВОЕ ПРИМЕНЕНИЕ --- */
:where(body, .wp-site-blocks) {
  background: var(--bg);
  color: var(--text);
}

/* Текстовые блоки WP — наследуют цвет */
:where(.wp-block-paragraph,
       .wp-block-list,
       .wp-block-table,
       .wp-block-quote,
       .wp-block-code){
  color: inherit;
}

/* Заголовки (включая блоковые) */
:where(h1,h2,h3,h4,h5,h6,
       .wp-block-heading,
       .wp-block-post-title,
       .entry-title){
  color: var(--heading);
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-weight: 800; /* при желании 700 */
}

/* Ссылки по умолчанию (не затрагиваем кнопки/чипы/спец-кнопки блока) */
:where(a):not(.li-btn, .li-chip, .news-btn, .wp-block-button__link){
  color: var(--link, var(--link-fallback));
  text-decoration: underline transparent 1px;
  text-underline-offset: .18em;
  transition: color .15s ease, text-decoration-color .15s ease;
}
:where(a):not(.li-btn, .li-chip, .news-btn, .wp-block-button__link):hover{
  color: var(--link-hover, var(--link-hover-fallback));
  text-decoration-color: currentColor;
}

/* Мягкое выделение */
::selection{
  background: rgba(3,218,198,.28);
  color:#071019;
}
html[data-theme="dark"] ::selection{
  background: rgba(125,211,252,.35);
  color:#06101f;
}

/* --- КОМПОНЕНТЫ И УТИЛИТЫ --- */

/* Карточка (универсальная) */
.li-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: var(--shadow);
  padding: 20px;
  position: relative;
  overflow: hidden;
}
html[data-theme="dark"] .li-card {
  /* немного глубины в тёмной */
  background: linear-gradient(180deg, #101934, #0c142d);
}
.li-card h3, .li-card h2 { margin: 6px 0 8px; }

/* Подписи/вторичный текст */
.li-muted { color: var(--muted); }

/* Кнопки */
.li-btn {
  display: inline-block;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #fff;
  color: #0f172a;
  font-weight: 600;
  text-decoration: none;
  transition: transform .08s ease, box-shadow .2s ease, opacity .2s ease;
}
html[data-theme="dark"] .li-btn {
  background: #13204a;
  color: var(--text);
}
.li-btn:hover { transform: translateY(-1px); }
.li-btn:focus-visible { outline: 0; box-shadow: var(--ring); }

/* Основная кнопка */
.li-btn--primary {
  border: 0;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  color: #03102a;
}

/* Лёгкий hover-акцент для карточек на курсорах мыши */
@media (pointer:fine) {
  .li-card:hover { border-color: rgba(91,140,255,.35); }
}

/* Поверхность/блок с границей — утилита */
.li-surface {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}

/* Бейдж — утилита */
.li-badge {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  background: #eef5f4;
  border: 1px solid rgba(15,118,110,.15);
  color: #0f766e;
}
html[data-theme="dark"] .li-badge {
  background: #0b1533;
  color: #a9b6dc;
  border-color: var(--border);
}
/* --- Подружим пресеты WP с вашими токенами (тема TT4 это уважает) --- */
:root{
  --wp--preset--color--background: var(--bg);
  --wp--preset--color--foreground: var(--text);
  --wp--preset--color--contrast:   var(--heading);
  --wp--preset--color--primary:    var(--link, #0ea5a3);
  --wp--preset--color--secondary:  var(--muted);
  --wp--preset--color--tertiary:   var(--surface);
}

/* --- Заголовки в контенте: принудительно наш цвет --- */
/* (некоторые блоки задают свой цвет/классы, поэтому ставим !important,
   но ограничиваемся только контентной областью) */
.wp-site-blocks :where(h1,h2,h3,h4,h5,h6,.wp-block-heading,.entry-title){
  color: var(--heading) !important;
}

/* --- Кнопки WordPress: “Файл”, обычные кнопки и element-button --- */
:where(.wp-block-file__button,
       .wp-block-button__link,
       .wp-element-button){
  background: linear-gradient(90deg, var(--brand), var(--brand-2)) !important;
  color: #03102a !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 8px 14px !important;
  text-decoration: none !important;
  box-shadow: var(--shadow);
  transition: transform .08s ease, box-shadow .2s ease, opacity .2s ease;
}
:where(.wp-block-file__button,
       .wp-block-button__link,
       .wp-element-button):hover{
  transform: translateY(-1px);
}
:where(.wp-block-file__button,
       .wp-block-button__link,
       .wp-element-button):focus-visible{
  outline: 0 !important;
  box-shadow: var(--ring) !important;
}

/* На всякий: если где-то кнопки принудительно “outline” — сделаем аккуратный обвод */
:where(.is-style-outline) .wp-block-button__link{
  background: transparent !important;
  color: var(--link, #0ea5a3) !important;
  border: 1.5px solid currentColor !important;
}