/* ==========================================================================
   Easy Logic — base.css
   Шрифты, токены дизайн-системы, сброс, базовая типографика, утилиты.
   Подключается первым, до всех остальных стилей.
   ========================================================================== */

/* ==========================================================================
   1. ШРИФТЫ
   Все три шрифта — вариативные (variable fonts). Это значит, что один файл
   содержит сразу все начертания от тонкого до жирного, а не отдельный файл
   на каждый вес. Поэтому в font-weight указан диапазон, например 200 800.

   Каждый шрифт разбит на два файла по алфавитам (латиница и кириллица).
   Свойство unicode-range говорит браузеру, какие символы лежат в файле,
   и браузер скачивает только то, что реально встретилось на странице.

   font-display: swap — пока шрифт грузится, текст показывается запасным
   шрифтом, а не остаётся невидимым. Читатель начинает читать сразу.
   ========================================================================== */

/* --- Manrope: заголовки ---------------------------------------------------- */

@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-cyrillic.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* --- Inter: основной текст ------------------------------------------------- */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-cyrillic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* --- JetBrains Mono: код --------------------------------------------------- */

@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-latin.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-cyrillic.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ==========================================================================
   2. ТОКЕНЫ ДИЗАЙН-СИСТЕМЫ
   Токен — это переменная с однажды принятым решением: цвет, отступ,
   скругление. Дальше по всему сайту используется только имя переменной.
   Меняется значение здесь — меняется везде.
   ========================================================================== */

:root {
  /* --- Цвет: бренд ------------------------------------------------------- */
  --c-blue-100: #E8F2FF;
  --c-blue-300: #8FC0FF;
  --c-blue-500: #2E8BFF;  /* основной акцент: фоны кнопок, графика */
  --c-blue-700: #1565D8;  /* синий ТЕКСТ и ссылки */

  --c-green-100: #E6F8EE;
  --c-green-300: #9AE7BA;
  --c-green-500: #5FD68A; /* вторичный акцент, графика */
  --c-green-700: #1E8A4C; /* зелёный ТЕКСТ на белом (4,9:1) */
  --c-green-800: #157043; /* зелёный текст на зелёной подложке #E6F8EE (5,6:1) */

  /* Два акцентных цвета выше нельзя брать для мелкого текста на белом:
     не хватает контраста. Для текста есть пара -700. */

  /* --- Цвет: текст ------------------------------------------------------- */
  --c-ink:       #2F3A42; /* основной текст и заголовки */
  --c-ink-soft:  #5A6873; /* вторичный текст, подписи */
  --c-ink-muted: #8A97A1; /* третичный текст, плейсхолдеры */

  /* --- Цвет: поверхности ------------------------------------------------- */
  --c-bg:      #FFFFFF;
  --c-bg-soft: #F5F9FC;   /* чередование секций */
  --c-bg-tint: #EEF6FF;   /* выделенные блоки */
  --c-border:  #E3EAF0;

  /* Тёмная поверхность: шапка раздела, плашки. Тот же цвет, что фон блоков
     кода, — на сайте про вёрстку тёмное поле уже означает «здесь код». */
  --c-ink-deep:     #1E2733;
  --c-on-deep:      #FFFFFF; /* заголовки на тёмном */
  --c-on-deep-soft: #C2D0DC; /* весь остальной текст на тёмном */

  /* Текст поверх яркого --grad-brand. Ни белый, ни --c-ink-deep по нему
     не проходят: на синем конце они дают 3,4:1 и 4,49:1 при норме 4,5:1.
     Этот оттенок держит 5,2:1 в худшей точке градиента. */
  --c-on-brand: #101A24;

  /* Более тусклого оттенка для текста на тёмном нет намеренно: поверх
     цветного пятна #93A5B4 даёт 3,96:1 при норме 4,5:1. Посчитано
     вручную — axe на градиенте измерить не может. */

  /* --- Цвет: статусы ----------------------------------------------------- */
  --c-warn:  #E8A33D;
  --c-error: #E0574C;      /* только графика: рамки, значки, полосы */

  /* Красный ТЕКСТ и мелкие залитые значки. --c-error на белом даёт 3,7:1
     при норме 4,5:1 — та же история, что у --c-blue-500 и --c-green-500
     (поймано axe-core на подсказках формы). */
  --c-error-700: #B8362B;  /* текст на белом 5,8:1, на --c-error-100 5,2:1 */
  --c-error-100: #FCEEED;  /* подложка сообщения об ошибке */

  /* --- Градиенты ---------------------------------------------------------
     --grad-brand — для графики: фоновых пятен, иллюстраций, логотипа, полос.
     Текст поверх него ставить нельзя: на зелёном конце белые буквы дают
     контраст 1,8:1 при норме 4,5:1.

     --grad-brand-deep — тот же сине-зелёный переход, но в затемнённых
     оттенках. Он рассчитан под белый текст: контраст не опускается ниже
     4,9:1 ни в одной точке. Используется на кнопках и плашках с надписями. */
  --grad-brand:      linear-gradient(135deg, #2E8BFF 0%, #5FD68A 100%);
  --grad-brand-deep: linear-gradient(135deg, #1565D8 0%, #17804A 100%);
  --grad-soft:       linear-gradient(135deg, #E8F2FF 0%, #E6F8EE 100%);

  /* --- Шрифты ------------------------------------------------------------ */
  --ff-head: "Manrope", "Segoe UI", system-ui, sans-serif;
  --ff-text: "Inter", "Segoe UI", system-ui, sans-serif;
  --ff-mono: "JetBrains Mono", Consolas, monospace;

  /* --- Размеры текста ----------------------------------------------------
     clamp() задаёт размер «резиновым»: минимум, предпочтительное значение
     с оглядкой на ширину экрана и максимум. Отдельные медиазапросы на
     каждый заголовок не нужны. */
  --fs-h1:    clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
  --fs-h2:    clamp(1.6rem, 1.25rem + 1.5vw, 2.5rem);
  --fs-h3:    clamp(1.25rem, 1.1rem + 0.7vw, 1.75rem);
  --fs-h4:    clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
  --fs-lead:  clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --fs-body:  1.0625rem;
  --fs-small: 0.9375rem;
  --fs-tiny:  0.8125rem;

  /* --- Межстрочные интервалы --------------------------------------------- */
  --lh-tight: 1.1;
  --lh-head:  1.25;
  --lh-body:  1.7;

  /* --- Сетка и ширины ----------------------------------------------------- */
  --container: 1200px;
  --gutter: 16px;         /* переопределяется на планшете и десктопе */
  --measure: 68ch;        /* предельная длина строки в тексте статьи */

  /* --- Отступы ------------------------------------------------------------ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* --- Скругления --------------------------------------------------------- */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  /* --- Тени --------------------------------------------------------------- */
  --sh-sm: 0 2px 8px rgba(47, 58, 66, 0.06);
  --sh-md: 0 8px 24px rgba(47, 58, 66, 0.08);
  --sh-lg: 0 16px 48px rgba(46, 139, 255, 0.14);

  /* --- Время анимаций ------------------------------------------------------ */
  --t-fast: 160ms ease;
  --t-base: 240ms ease;

  /* --- Размеры отдельных блоков -------------------------------------------- */
  --header-h: 68px;       /* высота шапки, нужна для отступа под липкое меню */
  --prompt-max-h: 22rem;  /* высота блока промпта до появления скролла */
}

@media (min-width: 768px) {
  :root {
    --gutter: 24px;
  }
}

@media (min-width: 1024px) {
  :root {
    --gutter: 32px;
    --header-h: 76px;
  }
}

/* ==========================================================================
   3. СБРОС
   Браузеры по умолчанию расставляют свои отступы и размеры. Сброс убирает
   их, чтобы вёрстка выглядела одинаково везде и начиналась с нуля.
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Якорь не уезжает под липкую шапку при переходе по ссылке вида #razdel */
  scroll-padding-top: calc(var(--header-h) + var(--space-5));
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--ff-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

/* Списки без маркеров — только там, где они служат разметкой (меню, карточки).
   В тексте статьи маркеры возвращаются, см. раздел 4. */
ul[class],
ol[class] {
  list-style: none;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

/* Атрибут hidden в разметке должен по-настоящему прятать элемент.
   Браузер задаёт для него display: none в своих стандартных стилях, но
   любое наше правило вида `svg { display: block }` его перебивает — стили
   автора всегда сильнее стилей браузера. Из-за этого спрятанный спрайт с
   иконками вылезал пустым блоком на 150 px в начале страницы.
   Здесь !important уместен: hidden — это не оформление, а состояние
   «элемента на странице нет», и спорить с ним ничто не должно. */
[hidden] {
  display: none !important;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

table {
  border-collapse: collapse;
  width: 100%;
}

/* ==========================================================================
   4. БАЗОВАЯ ТИПОГРАФИКА
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--ff-head);
  color: var(--c-ink);
  text-wrap: balance; /* заголовок не оставляет одно слово на последней строке */
}

h1 {
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
}

h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

h3 {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.3;
}

h4 {
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.4;
}

p {
  text-wrap: pretty; /* не оставляет висящее слово в конце абзаца */
}

a {
  color: var(--c-blue-700);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--t-fast), text-decoration-color var(--t-fast);
}

a:hover {
  color: var(--c-blue-500);
  text-decoration-color: var(--c-blue-300);
}

strong,
b {
  font-weight: 600;
}

small {
  font-size: var(--fs-small);
}

code,
kbd,
samp {
  font-family: var(--ff-mono);
  font-size: 0.9em;
}

/* Лигатуры JetBrains Mono склеивают <!-- в одну стрелку, а => в один знак.
   На сайте, который учит разметке, символы обязаны выглядеть ровно так,
   как их набирают на клавиатуре. */
pre,
code,
kbd,
samp {
  font-variant-ligatures: none;
}

/* Инлайновый код переносится по любому месту. Адрес или длинное имя файла
   внутри абзаца — одно слово без пробелов: на 320 px такой кусок вылезал
   за правый край и страница ехала вбок на 7 px (поймано замером).
   Код в блоке (pre) это правило не задевает: там строки не переносятся,
   блок прокручивается внутри себя. */
:not(pre) > code {
  overflow-wrap: anywhere;
}

hr {
  height: 1px;
  margin: var(--space-7) 0;
  border: 0;
  background-color: var(--c-border);
}

::selection {
  background-color: var(--c-blue-100);
  color: var(--c-ink);
}

::placeholder {
  color: var(--c-ink-muted);
  opacity: 1;
}

/* ==========================================================================
   5. ФОКУС
   Обводка появляется только при управлении с клавиатуры (:focus-visible),
   при клике мышью её не видно. Убирать обводку совсем нельзя: без неё
   сайтом невозможно пользоваться без мыши.
   ========================================================================== */

/* border-radius здесь не нужен: он менял бы форму самого элемента, а не
   обводки. Современные браузеры и так ведут обводку по скруглению
   элемента — круглая кнопка получает круглую обводку сама. */
:focus-visible {
  outline: 2px solid var(--c-blue-500);
  outline-offset: 2px;
}

/* ==========================================================================
   6. УТИЛИТЫ
   ========================================================================== */

/* Текст только для скринридеров: визуально скрыт, но программе чтения
   доступен. Нужен для подписей к иконкам и служебных пояснений. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Иконка из спрайта. Размер задаётся здесь, цвет наследуется от текста. */
.icon {
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
}

/* Ограничение длины строки для комфортного чтения */
.measure {
  max-width: var(--measure);
}

/* ==========================================================================
   7. УВАЖЕНИЕ К НАСТРОЙКАМ ПОЛЬЗОВАТЕЛЯ
   Если в системе включено «уменьшить движение» — анимации выключаются.
   Для части людей движение на экране вызывает физическое недомогание.
   ========================================================================== */

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}