/* ==========================================================================
   Easy Logic — тема подсветки кода для Prism.js
   Написана под палитру проекта вручную, стандартная тема Prism не используется.

   Фон тёмный намеренно: по правилам дизайн-системы голубой #2E8BFF и
   салатовый #5FD68A нельзя использовать для мелкого текста на белом —
   не хватает контраста. На тёмном фоне те же фирменные цвета читаются
   отлично. Все цвета ниже проверены: контраст к фону не ниже 4.5:1.
   ========================================================================== */

/* ==========================================================================
   1. ПЕРЕМЕННЫЕ ТЕМЫ
   ========================================================================== */

:root {
  /* Поверхности блока кода */
  --code-bg:          #1E2733;  /* фон — тёмный «мокрый асфальт» */
  --code-bg-line:     #27313E;  /* подсветка выделенной строки */
  --code-text:        #E3EAF0;  /* обычный текст кода */
  --code-border:      #33404F;  /* рамки и разделители */

  /* Токены подсветки */
  --code-comment:     #8598A6;  /* комментарии */
  --code-punct:       #9AAAB8;  /* скобки, точки, запятые */
  --code-tag:         #8FC0FF;  /* теги HTML, ключевые слова, селекторы */
  --code-string:      #9AE7BA;  /* строки, значения атрибутов */
  --code-attr:        #F0C674;  /* имена атрибутов, свойства CSS, классы */
  --code-func:        #BFD9FF;  /* функции */
  --code-number:      #FF9E8A;  /* числа, константы, логические значения */
  --code-important:   #FF8A7A;  /* important, удалённые строки */

  /* Размеры */
  --code-max-h:       32rem;    /* максимальная высота блока до скролла */
}

/* ==========================================================================
   2. БАЗОВЫЙ БЛОК КОДА
   ========================================================================== */

code[class*="language-"],
pre[class*="language-"] {
  color: var(--code-text);
  background: none;
  font-family: "JetBrains Mono", Consolas, "Courier New", monospace;
  font-size: 0.875rem;
  line-height: 1.7;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  tab-size: 2;
  hyphens: none;
  -webkit-font-smoothing: antialiased;
}

/* Блочный код */
pre[class*="language-"] {
  margin: 0;
  padding: var(--space-5, 24px);
  overflow: auto;
  max-height: var(--code-max-h);
  background: var(--code-bg);
  border-radius: var(--r-md, 16px);
}

/* Блок кода получает tabindex от Prism — значит, нужен видимый фокус */
pre[class*="language-"]:focus-visible {
  outline: 2px solid var(--c-blue-300, #8FC0FF);
  outline-offset: 2px;
}

/* Код внутри строки текста, а не блоком */
:not(pre) > code[class*="language-"] {
  padding: 0.15em 0.4em;
  background: var(--c-bg-tint, #EEF6FF);
  color: var(--c-ink, #2F3A42);
  border-radius: var(--r-sm, 8px);
  white-space: normal;
}

/* ==========================================================================
   3. СКРОЛЛБАР ВНУТРИ БЛОКА КОДА
   ========================================================================== */

pre[class*="language-"] {
  scrollbar-width: thin;
  scrollbar-color: var(--code-border) transparent;
}

pre[class*="language-"]::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

pre[class*="language-"]::-webkit-scrollbar-track {
  background: transparent;
}

pre[class*="language-"]::-webkit-scrollbar-thumb {
  background: var(--code-border);
  border: 2px solid var(--code-bg);
  border-radius: var(--r-pill, 999px);
}

pre[class*="language-"]::-webkit-scrollbar-thumb:hover {
  background: #45566A;
}

/* ==========================================================================
   4. ТОКЕНЫ ПОДСВЕТКИ
   ========================================================================== */

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: var(--code-comment);
  font-style: italic;
}

.token.punctuation {
  color: var(--code-punct);
}

.token.tag,
.token.keyword,
.token.selector,
.token.atrule,
.token.rule,
.token.builtin {
  color: var(--code-tag);
}

.token.string,
.token.char,
.token.attr-value,
.token.inserted,
.token.regex,
.token.url {
  color: var(--code-string);
}

.token.attr-name,
.token.property,
.token.class-name,
.token.symbol,
.token.variable {
  color: var(--code-attr);
}

.token.function {
  color: var(--code-func);
}

.token.number,
.token.boolean,
.token.constant,
.token.entity {
  color: var(--code-number);
}

.token.operator {
  color: var(--code-punct);
}

.token.deleted {
  color: var(--code-important);
}

.token.important,
.token.bold {
  font-weight: 700;
}

.token.italic {
  font-style: italic;
}

.token.namespace {
  opacity: 0.7;
}

/* Подсказка «наведи на сущность» у HTML-мнемоник вроде & */
.token.entity {
  cursor: help;
}

/* ==========================================================================
   5. ПЛАГИН НУМЕРАЦИИ СТРОК
   Номера рисуются псевдоэлементами через CSS-счётчик, поэтому при
   копировании кода они не попадают в буфер обмена.
   ========================================================================== */

pre[class*="language-"].line-numbers {
  position: relative;
  padding-left: 3.5em;
  counter-reset: linenumber;
}

pre[class*="language-"].line-numbers > code {
  position: relative;
  white-space: inherit;
}

.line-numbers .line-numbers-rows {
  position: absolute;
  top: 0;
  left: -3.5em;
  width: 2.7em;
  font-size: 100%;
  letter-spacing: -1px;
  border-right: 1px solid var(--code-border);
  user-select: none;
  pointer-events: none;
}

.line-numbers-rows > span {
  display: block;
  counter-increment: linenumber;
}

.line-numbers-rows > span::before {
  content: counter(linenumber);
  display: block;
  padding-right: 0.8em;
  color: var(--code-comment);
  text-align: right;
}

/* ==========================================================================
   6. ПЕЧАТЬ
   На бумаге тёмный фон не нужен — экономим краску и делаем читаемо.
   ========================================================================== */

@media print {
  pre[class*="language-"] {
    max-height: none;
    overflow: visible;
    background: none;
    border: 1px solid #CCCCCC;
    color: #000000;
  }

  .token.comment,
  .token.prolog,
  .token.doctype,
  .token.cdata,
  .token.punctuation,
  .token.tag,
  .token.keyword,
  .token.selector,
  .token.atrule,
  .token.rule,
  .token.builtin,
  .token.string,
  .token.char,
  .token.attr-value,
  .token.inserted,
  .token.regex,
  .token.url,
  .token.attr-name,
  .token.property,
  .token.class-name,
  .token.symbol,
  .token.variable,
  .token.function,
  .token.number,
  .token.boolean,
  .token.constant,
  .token.entity,
  .token.operator,
  .token.deleted {
    color: #000000;
  }
}