/* ============================================================
   ДИЗАЙН-ТОКЕНЫ САЙТА — всё, что можно настраивать руками.
   Источник правды — дизайн-система в Figma (файл pnemchenko.ru, страница «Дизайн-система»):
   у каждой переменной там в поле Code syntax стоит имя отсюда, например «кнопка/высота» → var(--btn-h).
   Поменяли в Figma — меняем здесь то же значение (или просим Claude: «забирай»).

   Система — как у Apple: фиксированная шкала на брейкпоинт, отступы кратны 5, кнопки-капсулы.
   Режимы Figma ↔ брейкпоинты сайта:
     «Компьютер» — large, 1069–1919 px: базовые значения (блок :root)
                   xlarge, от 1920 px: на ступень крупнее; medium, 735–1068 px: на ступень мельче
     «Телефон»   — раскладка «столбик» (телефон и планшет в портрете): кнопки 52, панель внизу;
                   small, до 734 px: телефонная шкала шрифтов
     «Светлый фон» / «Тёмный фон» — тон фона: на цветном фоне проекта сайт сам ставит «тёмный» (body[data-tone="dark"])

   Админка («Настройки сайта» → «Стиль») кладёт поверх только цвета, насыщенность, скругления
   и множители размеров (100% — ровно как здесь).
   ============================================================ */

:root{
  /* ---------- палитра ---------- */
  --paper:#F4F6F6;          /* фон сайта */
  --ink:#1D1D1F;            /* текст и кнопки на светлом */
  --ink-dark:#F4F6F6;       /* текст на тёмном фоне проекта */
  --mute-l:#616263;         /* вторичный текст на светлом: --ink на 70% поверх --paper */
  --heart:#FF4D6A;          /* лайк */
  --glow-light:#5B7FFF;     /* свечение выбранной карточки на светлом фоне проекта */

  /* ---------- смысловые цвета (зависят от тона фона — см. body[data-tone="dark"] в style.css) ---------- */
  --btn-bg:var(--ink);       /* кнопка/основная — тёмная на любом фоне, как в макете */
  --btn-fg:var(--paper);
  --btn-light-bg:var(--paper);   /* кнопка/светлая — «К голове» в каталоге на телефоне */
  --btn-light-fg:var(--ink);

  /* ---------- шрифты ---------- */
  --font:'Arial Narrow','Arimo Narrow PN',Arial,sans-serif;                                   /* шрифт/узкий: заголовки, факты, реплики */
  --font-text:'Roboto PN',Roboto,system-ui,-apple-system,'Segoe UI',Arial,sans-serif;      /* шрифт/текст: тексты и кнопки */
  --w-title:400; --w-text:400; --w-lead:300; --w-btn:400;     /* насыщенность (слоган — Light, как в макете) */
  --tr-title:0em;            /* трекинг заголовков */
  --lh-narrow:1.15;          /* межстрочный узкого шрифта */
  --lh-body:1.25;            /* межстрочный текста */
  --lh-lead:1.4;             /* межстрочный слогана */

  /* ---------- кегли (Figma: «кегль/…») ---------- */
  --fs-cat-title:56px;       /* название проекта в каталоге */
  --fs-h2:40px;              /* заголовок раздела кейса */
  --fs-fact:40px;            /* факт в карточке фактов */
  --fs-subs:32px;            /* реплика головы */
  --fs-lead:24px;            /* слоган в обложке кейса */
  --fs-body:20px;            /* основной текст */
  --button-fs:14px;          /* кегль/кнопка (в стилях — var(--btn-fs) с множителем из админки) */
  --fs-caption:14px;         /* мелкие подписи, подвал */

  /* ---------- отступы (Figma: «отступ/…»): только кратные 5 ---------- */
  --sp-5:5px; --sp-10:10px; --sp-15:15px; --sp-20:20px; --sp-25:25px; --sp-30:30px;
  --sp-40:40px; --sp-50:50px; --sp-60:60px; --sp-80:80px; --sp-100:100px; --sp-120:120px;
  --pad-x:60px;              /* поле/страница */
  --cat-pad:60px;            /* поле каталога слева: текст проекта и лента */
  --hdr-top-hero:30px;       /* шапка главной: над логотипом */
  --hdr-top-cat:50px;        /* шапка каталога: над логотипом */
  --hdr-bottom-cat:20px;     /*                 и под ним */
  --hdr-top:50px;            /* шапка кейса: над кнопками */
  --hdr-bottom:20px;
  --logo-cat:227px;          /* ширина логотипа в каталоге */
  --logo-case:197px;         /* ширина логотипа в кейсе */
  --case-w:1206px;           /* ширина содержимого кейса */

  /* ---------- кнопки (Figma: «Кнопка») ---------- */
  --button-height:48px;      /* кнопка/высота */
  --button-sm-height:46px;   /* кнопка/высота-малая — ссылки в конце кейса */
  --button-px:24px;          /* кнопка/поле */
  --button-sm-px:20px;
  --button-stroke:1px;       /* кнопка/обводка */
  --gap-btn:20px;            /* кнопка/между */
  --radius-btn:100px;        /* капсула */

  /* ---------- карточки и плитки ---------- */
  --radius-card:56px;        /* радиус/карточка */
  --card-w:287px; --card-h:208px;                 /* карточка в ленте каталога (при экране 1440×803) */
  --card-active-w:364px; --card-active-h:287px;   /* выбранная */
  --gap-cards:20px;          /* между карточками */
  --strip-bottom:33px;       /* лента от низа экрана */
  --glow-blur:132px;         /* свечение/размытие */
  --subs-w:654px;            /* реплика/ширина */

  /* ---------- телефон: стеклянная панель ---------- */
  --bar-bottom:30px;         /* от низа экрана (на iPhone — не меньше «полоски» + 10) */
}

/* ---------- xlarge: большой монитор, от 1920 px ---------- */
@media (min-width:1920px){
  :root{
    --fs-cat-title:70px; --fs-h2:50px; --fs-fact:50px; --fs-subs:40px; --fs-lead:28px; --fs-body:22px; --button-fs:16px; --fs-caption:15px;
    --pad-x:100px; --cat-pad:80px; --hdr-top-cat:70px; --hdr-bottom-cat:25px; --hdr-top:60px; --logo-cat:300px; --logo-case:240px; --case-w:1400px;
    --button-height:56px; --button-px:28px; --button-sm-height:50px; --subs-w:820px; --radius-card:64px;
  }
}

/* ---------- medium: планшет и маленький ноутбук, 735–1068 px ---------- */
@media (max-width:1068px){
  :root{
    --fs-cat-title:44px; --fs-h2:34px; --fs-fact:34px; --fs-subs:28px; --fs-lead:21px; --fs-body:18px;
    --pad-x:40px; --cat-pad:40px; --hdr-top-cat:40px; --hdr-top:40px; --logo-cat:190px; --logo-case:170px;
    --radius-card:48px; --subs-w:560px;
  }
}

/* ---------- «Телефон»: раскладка «столбик» (то же условие — в style.css и js/content.js) ---------- */
@media (max-width:760px), (max-width:1024px) and (max-aspect-ratio:17/20){
  /* панель кнопок — ниже, ближе к краю экрана (на iPhone — над строкой Safari или «полоской») */
  :root{ --button-height:52px; --gap-btn:10px; --pad-x:20px; --cat-pad:20px; --radius-card:40px; --bar-bottom:14px; }
}

/* низкий экран телефона (iPhone SE со строкой адреса): панель ближе к краю — высота уходит голове */
@media (max-width:760px) and (max-height:640px){
  :root{ --bar-bottom:10px; }
}

/* ---------- small: телефон, до 734 px — шкала шрифтов «Телефон» ---------- */
@media (max-width:734px){
  :root{
    --fs-cat-title:32px; --fs-h2:28px; --fs-fact:28px; --fs-subs:24px; --fs-lead:19px; --fs-body:16px;
    --subs-w:362px;
  }
}