/* ============================================================
   BOTOVOD / CODE - base
   Ядро дизайн-системы: палитра, сброс, типографические утилиты.
   Подключается ПЕРВЫМ на всех страницах.
   ============================================================ */

:root{
  /* фон */
  --bg:#08060c;
  --bg-2:#0f0a18;
  /* текст */
  --ink:#e9e6f2;
  --muted:#8a8499;
  /* неон-акценты */
  --red:#ff003c;
  --red-2:#ff2a6d;
  --red-dark:#8a0021;
  --red-light:#ff5470;
  --cyan:#05d9e8;
  --gold:#ffb84d;
  /* границы */
  --line:rgba(255,42,109,.18);
  /* ширина читательской колонки (блог) */
  --read:760px;
  /* lucide-иконки, встроены как маски (без библиотеки и CDN) */
  --chevron-right:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
  --chevron-right-bold:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
  --clock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
  --diamond:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M2.7 10.3a2.41 2.41 0 0 0 0 3.41l7.59 7.59a2.41 2.41 0 0 0 3.41 0l7.59-7.59a2.41 2.41 0 0 0 0-3.41L13.7 2.71a2.41 2.41 0 0 0-3.41 0Z'/%3E%3C/svg%3E");
  --menu:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16'/%3E%3Cpath d='M4 6h16'/%3E%3Cpath d='M4 18h16'/%3E%3C/svg%3E");
  --x:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='M6 6l12 12'/%3E%3C/svg%3E");
  --copy:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='14' x='8' y='8' rx='2' ry='2'/%3E%3Cpath d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/%3E%3C/svg%3E");
  --check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

html,body{
  margin:0;padding:0;
  background:var(--bg);color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
body{overflow-x:hidden}

/* ---------- утилиты ---------- */
.wrap{max-width:1200px;margin:0 auto;padding:0 24px;position:relative;z-index:2}
.mono{font-family:'JetBrains Mono',monospace}
.jp{font-family:'Noto Serif JP',serif}
.display{font-family:'Russo One',sans-serif;letter-spacing:.02em;text-transform:uppercase}

/* ---------- бейджи-метки ----------
   Готовые самодостаточные классы. Позиционирование задаётся
   отдельным классом рядом (например .badge-fresh). */
.badge-red{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:1px;padding:5px 11px;border-radius:5px;color:#0a0710;background:linear-gradient(135deg,var(--red-2),var(--red));box-shadow:0 0 18px rgba(255,0,60,.5);white-space:nowrap}
.badge-gold{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:1px;padding:5px 11px;border-radius:5px;color:#0a0710;background:linear-gradient(135deg,var(--gold),#ffd98a);box-shadow:0 0 16px rgba(255,184,77,.55);white-space:nowrap}

/* категорийные бейджи (рубрики): бордер + полупрозрачный фон.
   КЕЙС - золотой, РАЗБОР - голубой. Переиспользуются в ленте и статьях. */
.badge-case,.badge-razbor{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:4px 9px;border-radius:0}
.badge-case{color:var(--gold);border:1px solid rgba(255,184,77,.5);background:rgba(255,184,77,.07)}
.badge-razbor{color:var(--cyan);border:1px solid rgba(5,217,232,.5);background:rgba(5,217,232,.07)}

/* бейдж «Скоро»: голубая обводка, иконка часов (lucide), без скруглений.
   Текст сдвинут на 1px вниз - моношрифт визуально сидит высоко. */
.badge-soon{display:inline-flex;align-items:center;gap:5px;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:1px;padding:5px 10px;border-radius:5px;color:var(--cyan);border:1px solid rgba(5,217,232,.5);background:rgba(8,6,12,.7)}
.badge-soon::before{content:"";width:1em;height:1em;flex:0 0 auto;background:currentColor;-webkit-mask:var(--clock) center/contain no-repeat;mask:var(--clock) center/contain no-repeat}
.badge-soon>span{display:inline-block;transform:translateY(1px)}

/* ---------- иконка-шеврон (lucide chevron-right) ----------
   Наследует цвет текста через currentColor, масштабируется от font-size. */
.icon-chevron{display:inline-block;width:1.05em;height:1.05em;flex:0 0 auto;vertical-align:-.15em;background:currentColor;-webkit-mask:var(--chevron-right) center/contain no-repeat;mask:var(--chevron-right) center/contain no-repeat}

/* ---------- красный неон-акцент для слова в заголовке (готовый класс) ---------- */
.neon-red{color:var(--red-2);text-shadow:0 0 22px rgba(255,42,109,.55)}

@media (max-width:480px){
  .wrap{padding:0 18px}
}

/* ---------- «уменьшить движение» ----------
   Системная настройка ОС. Гасит все анимации разом: и ради доступности,
   и как аварийный тормоз на слабых машинах. Элементы остаются в базовом
   состоянии, вёрстка не меняется. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}