/**
 * Дизайн-токени Viking — значення витягнуті з Figma API (файл pprpOcP79nZIe6MhpXvAaZ),
 * не підбирались на око. Полотно макета — 1728px, контент — 1366px (поля по 181px).
 */

@font-face {
  font-family: "MuseoSansCyrl";
  src: url("../fonts/MuseoSansCyrl-100.woff2") format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "MuseoSansCyrl";
  src: url("../fonts/MuseoSansCyrl-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "MuseoSansCyrl";
  src: url("../fonts/MuseoSansCyrl-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Макет намальований на полотні 1728px. Щоб на вужчих екранах усе
   лишалось у тих самих пропорціях (1:1 з Figma), сторінка масштабується
   коефіцієнтом --k, який виставляє скрипт у <head>. Ширше за 1728 — без збільшення. */
html { zoom: var(--k, 1); }

:root {
  /* --- Кольори --- */
  --bg: #1D1D1D;
  --bg-warm: #3C3935;
  --ink: #FFFFFF;
  --accent: #B87333;

  --ink-muted: rgba(255, 255, 255, 0.55);
  --ink-dim: rgba(255, 255, 255, 0.50);
  --line: rgba(255, 255, 255, 0.61);
  --line-soft: rgba(255, 255, 255, 0.45);
  --line-grey: #4F4D4D;
  --accent-line: rgba(184, 115, 51, 0.18);

  --surface-05: rgba(255, 255, 255, 0.05);
  --surface-08: rgba(255, 255, 255, 0.08);
  --veil-66: rgba(29, 29, 29, 0.66);
  --veil-76: rgba(29, 29, 29, 0.76);
  --veil-83: rgba(29, 29, 29, 0.83);
  --veil-89: rgba(29, 29, 29, 0.89);

  --accent-06: rgba(184, 115, 51, 0.06);
  --accent-26: rgba(184, 115, 51, 0.26);

  /* --- Сітка --- */
  --canvas: 1728px;
  --container: 1366px;
  --gutter: 181px;
  --pad: 40px; /* мінімальні поля, коли екран вужчий за макет */

  /* --- Радіуси --- */
  --r: 6px;
  --r-lg: 10px;
  --r-modal: 7px;
  --r-pill: 999px;

  /* --- Типографіка (розмір / інтерліньяж з макета) --- */
  --font: "MuseoSansCyrl", "Helvetica Neue", Arial, sans-serif;

  --fs-h1: 95px;      --lh-h1: 101.7px;
  --fs-h2: 75px;      --lh-h2: 78px;
  --fs-h2-alt: 70px;  --lh-h2-alt: 70px;
  --fs-h3: 50px;      --lh-h3: 64px;
  --fs-price: 40px;   --lh-price: 66.4px;
  --fs-lg: 25px;      --lh-lg: 32px;
  --fs-body: 18px;    --lh-body: 26.5px;
  --fs-body-loose: 18px; --lh-body-loose: 29.9px;
  --fs-num: 48px;     --lh-num: 61.5px;
  --fs-micro: 10.8px; --lh-micro: 13.8px;

  /* --- Кнопки (з макета: висота 78, падінги 30/35, гап 12) --- */
  --btn-py: 30px;
  --btn-px: 35px;
  --btn-gap: 12px;

  /* --- Пункт меню: падінги 13.2/32.4, гап між пунктами 27 --- */
  --nav-py: 13.2px;
  --nav-px: 32.4px;
  --nav-gap: 27px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.28s;
}