/*
 * Дизайн-токены.
 *
 * Значения сняты с работающего сайта myeco-club.ru: палитра, типографика,
 * радиусы и тень. Это единственное место, где цвет или размер задаётся числом —
 * во всех остальных файлах используются переменные.
 */

/* --- Шрифты ---------------------------------------------------------------
 * Оба шрифта отдаются со своего домена: без обращений к сторонним CDN страница
 * не зависит от чужой доступности, а у посетителя не утекает referer.
 * font-display: swap — текст читается сразу, не дожидаясь загрузки шрифта.
 */

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

@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-latin.938c6e8019b6.woff2") format("woff2");
  font-weight: 400 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+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "KyivType Sans";
  src: url("../fonts/kyivtype-sans-bold.24e9dddd253c.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Цвет ------------------------------------------------------------- */
  --c-ink: #1a342b;              /* основной текст, тёмно-зелёный */
  --c-ink-muted: rgba(26, 52, 43, 0.62);
  --c-ink-faint: rgba(26, 52, 43, 0.14);
  --c-cream: #fefcf2;            /* фон страницы и текст на тёмном */
  --c-surface: #ffffff;          /* карточки */
  --c-accent: #ff6424;           /* главное действие */
  --c-accent-hover: #ec551a;
  --c-leaf: #b2d172;             /* зелёный акцент */
  --c-leaf-pale: #e0ebbf;        /* мягкая зелёная подложка */
  --c-leaf-wash: rgba(224, 235, 191, 0.32);
  --c-moss: #66824f;             /* приглушённый зелёный: подписи, метки */
  --c-leaf-deep: #3f5c33;        /* текст на leaf-pale: moss на ней бледнит */
  --c-hot-wash: rgba(255, 100, 36, 0.12);  /* подложка срочной метки */
  --c-line: rgba(26, 52, 43, 0.1);         /* разделители строк */
  --c-cream-wash: rgba(254, 252, 242, 0.12); /* наведение и пилюля на тёмной плашке */
  --c-overlay: rgba(26, 52, 43, 0.45);       /* затемнение под модальным окном */

  /* --- Типографика ------------------------------------------------------ */
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "KyivType Sans", "Manrope", system-ui, sans-serif;

  --fs-h1: 44px;
  --fs-h2: 40px;
  --fs-h3: 28px;
  --fs-lg: 18px;
  --fs-md: 16px;
  --fs-base: 15px;
  --fs-sm: 14px;
  --fs-xs: 12px;

  --lh-tight: 1.12;              /* заголовки */
  --lh-base: 1.5;

  --fw-regular: 400;
  --fw-medium: 500;              /* основной вес текста на сайте */
  --fw-semibold: 600;
  --fw-bold: 700;

  /* --- Геометрия --------------------------------------------------------- */
  --r-card: 40px;
  --r-purchase-card: 28px;       /* карточка закупки: r-card при паддинге 24 съедает угол */
  --r-tile: 18px;                /* плитка товара внутри карточки закупки */
  --r-item-card: 24px;           /* плитка позиции на странице закупки */
  --r-item-row: 20px;            /* строка позиции на странице закупки */
  --h-control: 44px;             /* степпер и кнопка в позиции */
  --r-btn: 32px;
  --r-md: 24px;
  --r-sm: 6px;
  --r-pill: 100px;

  --h-progress: 12px;            /* полоса сбора закупки */
  --h-progress-sm: 6px;          /* полоса сбора позиции */

  --shadow-card: 2px 4px 40px rgba(0, 0, 0, 0.06);
  --shadow-card-hover: 2px 8px 48px rgba(0, 0, 0, 0.1);

  /* --- Ритм -------------------------------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  --container: 1128px;
  --container-pad: 24px;
  --header-h: 99px;
  --control-h: 52px;            /* высота кнопок и полей */

  --transition: 0.18s ease;
}

@media (max-width: 900px) {
  :root {
    --fs-h1: 32px;
    --fs-h2: 28px;
    --fs-h3: 22px;
    --r-card: 28px;
    --header-h: auto;
  }
}