/* ============================================================
   ДИЗАЙН-ТОКЕНЫ САЙТА — всё, что можно настраивать руками.
   Система — как у Apple (apple.com): фиксированная шкала шрифтов на каждый брейкпоинт,
   а не «резиновые» размеры; отступы кратны 5; кнопки-капсулы 44 px.
   Шрифты и элементы — свои.

   Как править: меняй значение — сохраняй — обновляй страницу. Ничего больше трогать не нужно:
   css/style.css берёт размеры только отсюда.
   Брейкпоинты (как у Apple):
     large   — 1069–1919 px: ноутбук и обычный монитор (базовые значения, блок :root)
     xlarge  — от 1920 px: большой монитор (шрифты и отступы на ступень крупнее)
     medium  — 735–1068 px: планшет, маленький ноутбук
     small   — до 734 px: телефон
   Раскладка «столбик» (телефон и планшет в портрете: кнопки внизу, каталог свайпом) включается
   по своему условию — оно в css/style.css и js/content.js; размеры она берёт отсюда же.

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

:root{
  /* ---------- цвета (по умолчанию; админка может переопределить) ---------- */
  --paper:#FFFFFF;          /* фон сайта */
  --ink:#1D1D1F;            /* текст и кнопки на светлом — «почти чёрный» Apple */
  --ink-dark:#FFFFFF;       /* текст и кнопки на тёмном фоне проекта */
  --mute-l:#6E6E73;         /* второстепенный текст — серый Apple, контраст на белом 5,1:1 (WCAG AA) */
  --heart:#FF4D6A;          /* лайк */

  /* ---------- шрифты ---------- */
  --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:400;             /* описание проекта в каталоге и вводный абзац кейса */
  --w-btn:400;              /* кнопки */
  --tr-title:-.012em;       /* трекинг заголовков */

  /* ---------- шкала шрифтов: large (ноутбук) ---------- */
  --fs-display:64px;  --lh-display:1.05;    /* цифры результатов в кейсе */
  --fs-h1:48px;       --lh-h1:1.08;         /* название проекта: каталог и шапка кейса */
  --fs-h2:32px;       --lh-h2:1.125;        /* заголовки блоков кейса, цитата, призыв в конце кейса */
  --fs-h3:24px;       --lh-h3:1.17;         /* шаги процесса */
  --fs-lead:21px;     --lh-lead:1.38;       /* вводный абзац кейса */
  --fs-body:17px;     --lh-body:1.4;        /* основной текст, описание проекта в каталоге */
  --fs-caption:14px;  --lh-caption:1.43;    /* подписи, факты, подвал */
  --fs-chip:15px;                           /* метка раздела («Цифровые проекты»), теги */

  /* ---------- отступы: только кратные 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:50px;             /* поле страницы слева и справа (шапка, кейс) */
  --cat-pad:50px;           /* поле каталога слева: текст проекта и лента карточек */
  --hdr-top-cat:50px;       /* шапка каталога: воздух над логотипом */
  --hdr-bottom-cat:20px;    /*                 …и под ним */
  --hdr-top:20px;           /* шапка кейса: сверху и снизу */
  --logo-cat:220px;         /* ширина логотипа в каталоге */
  --logo-case:170px;        /* ширина логотипа в кейсе */

  --gap-btn:20px;           /* между кнопками */
  --gap-chip:20px;          /* метка раздела → название проекта */
  --gap-title:20px;         /* название → описание */
  --gap-acts:30px;          /* описание → кнопки */
  --gap-cards:20px;         /* между карточками в ленте каталога */
  --gap-block:100px;        /* между блоками кейса */
  --gap-col:40px;           /* между колонками (результаты, факты, итоги) */
  --gap-para:15px;          /* между абзацами */

  /* ---------- кнопки (как в макете Figma) ---------- */
  --button-height:44px;     /* Hug: 12 + 20 (строка) + 12 */
  --button-px:22px;         /* поле слева и справа */
  --button-fs:17px;         /* Roboto Regular 17, трекинг 0 */
  --button-stroke:2px;      /* обводка у кнопки-контура */
  --cta-height:50px;        /* «Смотреть проект» в каталоге */
  --cta-px:30px;
  --chip-height:30px;       /* метка раздела */
}

/* ---------- xlarge: большой монитор, от 1920 px ---------- */
@media (min-width:1920px){
  :root{
    --fs-display:80px; --fs-h1:56px; --fs-h2:40px; --fs-h3:28px; --fs-lead:24px; --fs-body:19px; --fs-caption:15px; --fs-chip:17px;
    --pad-x:100px; --cat-pad:80px; --hdr-top-cat:70px; --hdr-bottom-cat:25px; --hdr-top:25px; --logo-cat:300px; --logo-case:230px;
    --gap-acts:40px; --gap-cards:30px; --gap-block:120px; --gap-col:50px;
    --button-height:50px; --button-px:25px; --button-fs:19px; --cta-height:60px; --cta-px:35px; --chip-height:35px;
  }
}

/* ---------- medium: планшет и маленький ноутбук, 735–1068 px ---------- */
@media (max-width:1068px){
  :root{
    --fs-display:56px; --fs-h1:40px; --fs-h2:28px; --fs-h3:21px; --fs-lead:19px;
    --pad-x:40px; --cat-pad:40px; --hdr-top-cat:40px; --hdr-top:15px; --logo-cat:170px; --logo-case:140px;
    --gap-block:80px; --gap-col:30px;
  }
}

/* ---------- small: телефон, до 734 px ---------- */
@media (max-width:734px){
  :root{
    --fs-display:48px; --fs-h1:32px; --lh-h1:1.1; --fs-h2:24px; --lh-h2:1.17; --fs-h3:21px; --fs-lead:19px; --lh-lead:1.42;
    --pad-x:20px; --cat-pad:20px;
    --gap-btn:10px; --gap-chip:15px; --gap-title:10px; --gap-acts:25px; --gap-block:60px; --gap-col:20px;
    --cta-height:50px;
  }
}