/* cn3-plus / foundation: общие переменные, типографика, адаптивность */

:root {
  /* ===== Переменные, которые ждут шаблоны, но тема их нигде не задавала =====
     Без них в тёмной теме карточки были прозрачными, а рамки белыми. Значения следуют теме:
     lightColor, mainColor, hoverColor уже переключаются между светлой и тёмной. */
  --headColor: var(--mainColor);
  --textColor: var(--mainColor);
  --bgColor: var(--lightColor);
  --bgLight: var(--greyBg);
  --accentColor: var(--hoverColor);
  --accent-color: var(--hoverColor);
  --darkCard: #1e202c;
  --darkBorder: #3b3f55;
  --darkText: #eceef6;
  --darkBg: #14151f;

  /* подписи мелким шрифтом: серый темы в тёмном режиме слишком тусклый */
  --cn3Muted: var(--greyColor);
  /* приглушённый акцент вместо ярких цветов */
  --cn3Accent: #8c4a3c;

  /* ===== Типографика: единый стандарт =====
     Интерфейс и текст: Commissioner (в теме загружены только начертания 400, 500, 600).
     Шрифт заголовков по умолчанию тот же. Чтобы вернуть шрифт с засечками, достаточно заменить
     значение --headFont на var(--serifFont). */
  --serifFont: Georgia, 'PT Serif', 'Times New Roman', serif;
  --monoFont: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --headFont: var(--primeFont);

  /* шкала размеров по ролям. Корневой размер темы 19px (18px на ноутбуках, 17px на планшетах, 15px на телефонах),
     поэтому размеры в rem масштабируются вместе со страницей. Назначение ролей: assets/plus/typography.css */
  --t-label: .65rem;    /* метки над заголовками, бейджи */
  --t-meta: .78rem;     /* даты, города, счётчики, подписи */
  --t-ui: .88rem;       /* кнопки, меню, фильтры, текст в карточках */
  --t-body: 1rem;       /* основной текст */
  --t-card: .95rem;     /* заголовок карточки */
  --t-card-lg: 1.15rem; /* крупная карточка */
  --t-h3: 1.2rem;       /* подраздел */
  --t-h2: 1.5rem;       /* заголовок раздела */
  --t-h1: clamp(1.7rem, 3.4vw, 2.4rem);      /* заголовок страницы */
  --t-display: clamp(2rem, 4.6vw, 3.2rem);   /* обложки и главные заголовки */
  --t-c-h2: 1.35rem;    /* h2 внутри статьи */
  --t-c-h3: 1.15rem;    /* h3 внутри статьи */
  --t-c-h4: 1rem;       /* h4–h6 внутри статьи */

  /* прежние названия остаются для совместимости */
  --fs-xs: var(--t-label);
  --fs-sm: var(--t-meta);
  --fs-md: var(--t-body);
  --fs-lg: var(--t-card-lg);
  --fs-xl: var(--t-h3);
  --fs-2xl: var(--t-h2);
  --fs-3xl: var(--t-h1);
  --fs-display: var(--t-display);

  /* межстрочные интервалы */
  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-base: 1.6;
  --lh-read: 1.7;
}

/* ===== Тёмная тема: контрастная палитра =====
   Прежняя палитра сливалась: серый текст имел контраст 3:1 (нужно от 4.5:1), рамки 1.4:1, карточки почти не
   отличались от фона. Теперь: текст 15:1, подписи 7.5:1, акцентные ссылки 7.4:1, рамки видны на фоне.
   Селектор html:root[...] сильнее правил, которые тема выводит из настроек в <head>. */
html:root[data-theme="dark"] {
  --bodyBg: #14151f;       /* фон страницы */
  --lightColor: #1e202c;   /* карточки и панели: светлее фона */
  --sectionBg: #232636;
  --greyBg: #262938;       /* вторичные блоки */
  --borderColor: #3b3f55;  /* рамки и разделители */
  --mainColor: #eceef6;    /* основной текст */
  --greyColor: #aab0cc;    /* подписи и вторичный текст */
  --placeholder: #8c92b3;
  --hoverColor: #7fb0ff;   /* ссылки при наведении, акценты */
  --likesColor: #8c92b3;
  --cn3Muted: #aab0cc;
  --cn3Accent: #d08a7c;
}
html[data-theme="dark"] body { background-color: var(--bodyBg); }

/* места, где цвета были заданы жёстко и не имели тёмного варианта */
html[data-theme="dark"] .tag-post-card { background: var(--lightColor); border: 1px solid var(--borderColor); box-shadow: none; }
html[data-theme="dark"] .card-title { color: var(--mainColor); }
html[data-theme="dark"] .load-more-btn { background: var(--greyBg); color: var(--mainColor); border: 1px solid var(--borderColor); }
html[data-theme="dark"] .load-more-btn:hover { background: var(--sectionBg); }

/* карточки и панели в тёмной теме получают видимую рамку */
html[data-theme="dark"] .re-card,
html[data-theme="dark"] .cn3-card,
html[data-theme="dark"] .cn3-tcard,
html[data-theme="dark"] .cn3-fact-card,
html[data-theme="dark"] .kk-card { border-color: var(--borderColor); }

/* поля форм */
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background-color: var(--greyBg);
  color: var(--mainColor);
  border-color: var(--borderColor);
}
html[data-theme="dark"] ::placeholder { color: var(--placeholder); opacity: 1; }

/* ссылки внутри текста статей читаются на тёмном фоне */
html[data-theme="dark"] .post-content a:not([class]) { color: var(--hoverColor); }

/* кнопки и поля форм по умолчанию не наследуют шрифт */
button, input, select, textarea { font-family: inherit; }

/* ===== Широкие экраны: ноутбуки 1600+, Full HD, 2K/4K, ультраширокие ===== */
@media (min-width: 1600px) {
  :root { --width: 1320px; }
}
@media (min-width: 1920px) {
  :root { --width: 1560px; }
  .blog-grid,
  .home-category__list,
  .feat-posts__list,
  .random-list,
  .re-grid { grid-template-columns: repeat(4, 1fr); }
  .container--single { max-width: 860px; } /* текст статьи остаётся читаемым */
}
@media (min-width: 2560px) {
  html { font-size: 22px; }
  :root { --width: 1900px; }
  .site-wrapper { max-width: 2560px; }
  .container--single { max-width: 960px; }
}

/* ===== Планшеты в альбомной ориентации: не сжимаем контент до 800px ===== */
@media (min-width: 901px) and (max-width: 1100px) {
  .container { max-width: 980px; }
}

/* ===== Телефоны: вырез камеры ===== */
@media (max-width: 1100px) {
  @supports (padding: max(0px)) {
    .container {
      padding-left: max(2rem, env(safe-area-inset-left));
      padding-right: max(2rem, env(safe-area-inset-right));
    }
  }
}

/* ===== Сенсорные экраны: без hover-подпрыгиваний карточек ===== */
@media (hover: none) {
  .re-card:hover,
  .cn3-card:hover { transform: none; }
}

/* ===== Для тех, кто отключил анимации в системе ===== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* заголовок раздела: главная, витрины, блоки вовлечения */
.cn3x-section-title {
  margin: 0 0 1.2rem;
  font-family: var(--headFont, var(--primeFont));
  font-size: var(--fs-2xl, 1.8rem);
  font-weight: var(--bold, 600);
  line-height: var(--lh-snug, 1.3);
  letter-spacing: -.01em;
}