/* ==========================================================================
   WHITE — светлая тема «чернила на бумаге».
   Палитра снята с клипа assets/video/0921.mp4: синий пигмент расходится в
   воде. В кадре всего две ноты — бумага, на которой он плавает, и сам
   пигмент, — поэтому и тема построена на двух: холодная бумага (#eef1f8,
   это же поле и в самом клипе) и синие чернила от акцента #2f63e6 до
   глубокого #0a1734. Ни одного нейтрального серого и ни одного чёрного:
   самый тёмный тон сайта — это тот же пигмент, уведённый вниз.

   Подключается ПОСЛЕ остальных стилей и ничего в них не меняет: уберите
   <link> на white.css — вернётся исходная тема.
   ========================================================================== */
:root {
  --w-canvas:  #eef1f8;   /* основной фон: бумага клипа */
  --w-band:    #e2e9f7;   /* широкие подложки секций — светлая заливка размытия */
  --w-white:   #ffffff;   /* карточки — самая светлая точка кадра */
  --w-paper:   #eef2fb;   /* бумага: текст и обводки на глубоких чернилах */
  --w-ink:     #0a1734;   /* глубокие чернила: тёмные карточки, подвал, текст */
  --w-blue:    #2f63e6;   /* акцент: пигмент клипа, уведённый до AA на белом тексте */
  --w-blue-2:  #1c46bd;   /* глубже: наведение, плейсхолдеры */
  --w-azure:   #4f83ec;   /* сам пигмент клипа: чипы, точки, иконки, заливки */
  --w-pale:    #d7e4fb;   /* бледно-синий: второстепенные кнопки, метки */
  --w-line:    #cfdaee;   /* линии */
  --w-dim:     #9db0d6;   /* приглушённые фрагменты заголовков */

  --color--1: var(--w-line);
  --color--2: var(--w-azure);
  --color--3: var(--w-blue);
  --color--5: #e4eaf6;
  --color--6: var(--w-canvas);
  --color--7: var(--w-ink);
  --color--7-rgb: 10, 23, 52;
  --color--9: var(--w-blue-2);
  --base--background-color: var(--w-canvas);
  --base--text-color: var(--w-ink);
  --outline-color: var(--w-blue);
}
::selection { background: var(--w-blue); color: #fff; }

/* ---- Кнопки: везде синий пигмент --------------------------------------- */
.u-btn--1 {
  --button-text-background: var(--w-blue);
  --button-text-background-hover: var(--w-blue-2);
  --button-text-color: #fff;
  --button-text-color-hover: #fff;
  --button-blob-background: var(--w-pale);
  --button-blob-background-hover: var(--w-ink);
}
.u-btn--2, .u-btn--4 {
  --button-blob-background: var(--w-pale);
  --button-blob-background-hover: var(--w-blue);
}
.u-btn--3 {
  --button-background: var(--w-blue);
  --button-text-color: #fff;
  --button-background-hover: var(--w-blue-2);
  --button-text-color-hover: #fff;
}
.c-header .header_inline .cta {
  --button-background-hover: var(--w-blue-2);
  --button-text-color-hover: #fff;
}
:is(.c-services, .c-usp-cards) .slider_btn:not([disabled]):hover { color: #fff; }

/* Знак в шапке: клип светлый, поэтому над ним те же чернила, что и на
   остальной странице — переключение «белый над видео» больше не нужно. */
@media (min-width: 1025px) {
  html.has-loaded:has(.c-hero-xl:nth-child(1)) .c-header:not(.has-scrolled) .header_inline,
  html.invert-logo .c-header .header_inline {
    --header-inline-logo-fill: var(--w-ink);
  }
}
.c-header .header_inline {
  --header-inline-menu-button-background: var(--w-blue);
  --header-inline-menu-button-border-color: var(--w-blue);
  --header-inline-menu-button-icon-color: #fff;
}

/* ---- Поверхности -------------------------------------------------------- */
.c-hgroup, .c-contact { --block-color-background: var(--w-canvas) !important; }
.c-posts-grid { --block-color-background: var(--w-band) !important; }
/* The dimmed half of the .c-hgroup heading needs no rule here: the colour
   lives on the span in the markup and the reveal script carries it over to
   the words it splits that span into (see splitWords in main.js). A selector
   like `span[style]` would catch the word boxes themselves — they carry an
   inline z-index — and grey out the whole heading. */

/* ---- Карточки: белая, синяя, глубокие чернила -------------------------- */
.e-post-thumb, .e-post-feature { --post-background-color: var(--w-white); --post-text-color: var(--w-ink); }
.c-posts-grid .posts .e-post-thumb:nth-child(3n+2),
.c-services .slider_item:nth-child(3n+2) .e-post-thumb {
  --post-background-color: var(--w-blue);
  --post-text-color: #fff;
  --post-category-background-color: rgba(255, 255, 255, 0.16);
  --button-blob-background: #fff;
  --button-blob-background-hover: var(--w-ink);
}
.c-posts-grid .posts .e-post-thumb:nth-child(3n),
.c-services .slider_item:nth-child(3n) .e-post-thumb {
  --post-background-color: var(--w-ink);
  --post-text-color: #fff;
  --post-category-background-color: rgba(255, 255, 255, 0.14);
  --button-blob-background: #fff;
  --button-blob-background-hover: var(--w-blue);
}

/* ---- Панели задач: бумага, пигмент, глубокие чернила ------------------- */
/* Сами цвета панелей заданы инлайном в разметке; здесь только оговорка про
   светлый текст на тёмных панелях — она уже задана классами
   `-text-brightness--*` в sections.css, поэтому переопределять нечего. */

/* ---- Страницы плагинов / услуг / контакты ------------------------------ */
.ghost { border-color: var(--w-blue); color: var(--w-blue); }
.ghost:hover { background: var(--w-blue); color: #fff; }
.crumb { color: var(--w-blue); }
.crumb:hover { color: var(--w-blue-2); }
.video_card { background: var(--w-ink); }
.dl_card, .contact_card { background: var(--w-white); }
.field input, .field textarea { background: var(--w-canvas); border-color: var(--w-line); }
.field input:focus, .field textarea:focus { outline-color: var(--w-blue); }
.spec, .spec:first-child, .contact_list a, .contact_list a:first-child { border-color: var(--w-line); }

/* Глубокая карточка — чернила целиком: метка без серой заливки, тонкая рамка. */
.c-posts-grid .posts .e-post-thumb:nth-child(3n) .meta_type,
.c-services .slider_item:nth-child(3n) .e-post-thumb .meta_type {
  --post-category-background-color: transparent;
  background-color: transparent;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}