/* ==========================================================================
   ПЗЭМ — дизайн-токены v2.0
   Источник: Figma ee4NZpuqfZG3d5q9VXtVGj, страница «Сайт дизайн».
   Имена цветов в комментариях — имена переменных Figma.
   Правила применения — в DESIGN.md.
   ========================================================================== */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/inter-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/inter-latin.woff2") format("woff2");
  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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---------- Цвет (переменные Figma) ---------- */
  --pz-white: #ffffff;        /* White / Белый — фон страницы, карточки отзывов */
  --pz-black: #232e37;        /* Black — текст, заголовки, подвал. 13.9:1 на белом */
  --pz-gray: #4f5e6a;         /* Gray — подписи, описания. 6.6:1 на белом */
  --pz-gray-2: #979da7;       /* Gray 2 — даты новостей, должность в отзыве, иконки */
  --pz-bg-gray: #f3f3f3;      /* Gray bg — подложки секций, шапка таблицы, кнопки слайдера */
  --pz-blue: #266cb2;         /* Blue 1 — действия, ссылки, основная полоса шапки, секция отзывов */
  --pz-blue-2: #194b7d;       /* Blue 2 — служебная полоса шапки, нижний блок мобильного меню */
  --pz-blue-light: #ccdce5;   /* Blue light — линии: разделители блоков, рамки таблиц */
  --pz-cyan: #4eccf8;         /* Blue-black — активный пункт меню на синем, наведение на ссылку карточки */
  --pz-overlay: rgba(35, 46, 55, 0.5);      /* затемнение под открытым меню каталога */
  --pz-line-on-blue: rgba(255, 255, 255, 0.2); /* линии на синем фоне */

  /* ---------- Шрифт ---------- */
  --pz-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Размеры — из макета */
  --pz-fs-h1: 2.125rem;      /* H1 и заголовки широких секций, прописные (34 px) */
  --pz-fs-h2: 1.875rem;      /* заголовок синей карточки «Оставьте свой отзыв» (30 px) */
  --pz-fs-h3: 1.5rem;      /* название проекта (24 px) */
  --pz-fs-block: 1.25rem;   /* заголовок блока в колонке («Видео»), «Смотреть все проекты» (20 px) */
  --pz-fs-acc: 1.125rem;     /* заголовок раскрывающегося блока, вкладки, значения вариантов (18 px) */
  --pz-fs-body: 1rem;    /* основной текст, меню, ссылки (16 px) */
  --pz-fs-small: 0.875rem;   /* таблицы, хлебные крошки, подвал, подпись логотипа (14 px) */
  --pz-fs-xs: 0.75rem;      /* подпись логотипа в мобильной шапке (12 px) */

  --pz-lh-tight: 1;      /* пункты меню, кнопки */
  --pz-lh-head: 1.2;     /* заголовки, таблицы */
  --pz-lh-card: 1.3;     /* новости, отзывы: имя и должность */
  --pz-lh-body: 1.5;     /* абзацы */

  --pz-fw-regular: 400;
  --pz-fw-medium: 500;
  --pz-fw-bold: 700;

  /* ---------- Отступы (значения из макета) ---------- */
  --pz-sp-4: 4px;
  --pz-sp-8: 8px;
  --pz-sp-16: 16px;
  --pz-sp-20: 20px;      /* шаг сетки карточек, внутренний отступ таблицы */
  --pz-sp-24: 24px;
  --pz-sp-30: 30px;      /* поля контейнера, промежутки блоков боковой колонки */
  --pz-sp-40: 40px;      /* заголовок секции → содержимое */
  --pz-sp-60: 60px;      /* между основной и боковой колонкой */
  --pz-sp-80: 80px;      /* вертикальные поля широкой секции */

  /* ---------- Раскладка ---------- */
  --pz-page: 1440px;         /* ширина макета */
  --pz-container: 1380px;    /* ширина содержимого */
  --pz-gutter: 30px;         /* поля по краям на 1440 */
  --pz-gutter-m: 15px;       /* поля по краям на 360 */
  --pz-col-main: 872px;      /* основная колонка карточки товара */
  --pz-col-side: 448px;      /* боковая колонка карточки товара */
  --pz-topbar-h: 40px;       /* служебная полоса шапки */
  --pz-navbar-h: 82px;       /* основная полоса шапки на 1440 */
  --pz-navbar-h-m: 76px;     /* основная полоса шапки на 360 */

  /* ---------- Скругления ---------- */
  --pz-r-lg: 20px;       /* фото, карточки, таблицы, плашки */
  --pz-r-md: 10px;       /* миниатюры, превью видео, карточка отзыва */
  --pz-r-sm: 8px;        /* кнопки, поля */
  --pz-r-line: 2px;      /* линия под заголовком блока */
  --pz-r-round: 50%;     /* кнопки слайдера, аватар */

  /* ---------- Линии ---------- */
  --pz-line: 1px solid var(--pz-blue-light);
  --pz-line-2: 2px solid var(--pz-blue-light);

  /* ---------- Тень (одна, из карточки отзыва) ---------- */
  --pz-shadow: 0 2px 1px rgba(71, 74, 89, 0.02), 0 2px 4px rgba(71, 74, 89, 0.08);

  /* ---------- Элементы управления ---------- */
  --pz-btn-h: 50px;
  --pz-slider-btn: 40px;
  --pz-icon: 24px;
  --pz-icon-lg: 32px;

  /* ---------- Движение ---------- */
  --pz-dur-fast: 150ms;
  --pz-dur: 200ms;
  --pz-dur-slow: 300ms;
  --pz-ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --pz-ease-in: cubic-bezier(0.4, 0, 1, 1);

  /* ---------- Фокус ---------- */
  --pz-focus: 0 0 0 3px var(--pz-white), 0 0 0 5px var(--pz-blue);
  --pz-focus-on-blue: 0 0 0 2px var(--pz-cyan);
}

@media (prefers-reduced-motion: reduce) {
  :root { --pz-dur-fast: 0ms; --pz-dur: 0ms; --pz-dur-slow: 0ms; }
}