/* ============================================================
   ТОКЕНЫ — единственное место, где живут «сырые» значения.
   Источник: переменные и текстовые стили файла Figma «Портфолио».
   Правило: в остальных css-файлах не должно быть хардкода цветов
   и размеров — только var(--…).
   ============================================================ */

:root {

  /* --- Цвет: нейтральная шкала (Figma: Dark_*) --- */
  --dark-100: #232325;   /* основной текст */
  --dark-80:  #444448;   /* разделители на тёмном */
  --dark-60:  #727278;   /* вторичный текст */
  --dark-50:  #8d8d97;   /* подписи, muted */
  --dark-40:  #9999a6;   /* неактивные пункты меню на тёмном */
  --dark-30:  #b9bec4;   /* линии и разделители на светлом, не для текста */
  --dark-20:  #dde2e8;   /* границы, разделители */
  --dark-06:  #f6f7f8;   /* фон страницы */
  --light-100:#ffffff;   /* белый: карточки, текст на тёмном */

  /* --- Цвет: тёмная тема секции Delivery --- */
  --dm-bg:    #1c1c1e;
  --dm-card:  #2c2c2f;

  /* --- Цвет: промо-секция eSIM --- */
  --promo-bg:   #1f8ffb;
  --promo-card: #3b8bf5;

  /* --- Цвет: поверхности --- */
  --surface:        var(--dark-06);
  --surface-card:   var(--light-100);
  --surface-sunken: #eff0f2;                 /* трек переключателя, утопленные зоны */
  --btn-secondary:  #e9eaeb;                 /* кнопка secondary, hover */
  --btn-primary-hover: #0b0b0b;              /* кнопка primary, hover */
  --promo-plate: rgba(255, 255, 255, .10);   /* плашка под макеты в промо-секции */
  --dots-bg: rgba(255, 255, 255, .06);       /* подложка индикатора слайдера */
  --photo-bg: #161616;
  --connector: #c0c0c0;                      /* стрелки между экранами */
  --hero-oval: #b6ddff;                      /* подложка видео-овала на главной */                       /* подложка фото со встречи */
  --accent-blue:    #0088ff;                 /* Accents/Blue — единственный акцент сайта */

  /* --- Цвет: палитра продукта Сравни (для UI-мокапов) --- */
  --main-dark-100: #171d23;
  --main-dark-80:  #002a3a;
  --main-dark-60:  #636f7d;
  --main-dark-40:  #7e8894;
  --main-dark-30:  #99a1ab;
  --main-dark-20:  #b3bac3;
  --main-dark-15:  #dadde2;
  --main-dark-10:  #f5f5f5;
  --main-dark-06:  #f6f5f4;
  --blue-100:   #00afff;
  --blue-300:   #002a3a;
  --green-100:  #0dd149;
  --green-200:  #0f9d44;
  --green-300:  #11693f;
  --green-30:   #c3f4d3;
  --green-06:   #eefcf2;
  --metric-up:  #34c759;   /* рост метрики в заголовке кейса (Apple System Green) */
  --orange-100: #ff9500;

  /* --- Типографика: гарнитура --- */
  --font-sans: "Google Sans", "Golos Text", -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* --- Типографика: стили Figma (размер / интерлиньяж / трекинг) --- */
  --fs-h1: 48px;   --lh-h1: 58px;   --ls-h1: -0.48px;   /* Title desktop/H1 */
  --fs-h2: 40px;   --lh-h2: 48px;   --ls-h2: -0.4px;    /* Title desktop/H2 */
  --fs-h3: 30px;   --lh-h3: 40px;   --ls-h3: 0;         /* Title desktop/H3 */
  --fs-sub-xl: 24px; --lh-sub-xl: 30px;                 /* Subtitle/XL */
  --fs-sub-l: 20px; --lh-sub-l: 28px;                   /* Subtitle/L */
  --fs-m: 16px;    --lh-m: 22px;                        /* Text/M, Subtitle/M */
  --fs-s: 14px;    --lh-s: 20px;                        /* Text/S */
  --fs-xs: 12px;   --lh-xs: 18px;                       /* Text/XS */
  --fs-numb: 12px; --lh-numb: 12px;                     /* System/numb */
  --fs-upper: 13px; --lh-upper: 18px; --ls-upper: 0.65px; /* System/UPPER 13 */

  /* --- Типографика: начертания --- */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* --- Скругления --- */
  --radius-xs: 8px;
  --radius-s: 12px;
  --radius-r: 16px;
  --radius-nav: 24px;
  --radius-card: 24px;
  --radius-pill: 50px;
  --radius-menu: 20px;   /* всплывающее меню на телефоне */
  --radius-xl: 32px;     /* карточки опыта работы */
  --radius-round: 500px;  /* овал видео на главной, капсула парящего меню */

  /* --- Шаг отступов --- */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;     /* стрелки листания: поле кнопки и зазор между ними */
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-80: 80px;

  /* --- Сетка --- */
  --page-max: 1440px;
  --gutter: 48px;      /* поля страницы */
  --col-side: 328px;   /* левая колонка: заголовки и навигация кейса */
  --gap-col: 64px;     /* отступ между колонками */
  --measure: 788px;    /* ширина длинного абзаца в контентной колонке */
  --col-main: 952px;   /* колонка контента кейса */

  /* --- Сетка кейс-стади (светлая версия) --- */
  --case-gutter: 100px;   /* поля страницы кейса и шапки */
  --case-main: 848px;     /* колонка контента */
  --nav-top: 24px;        /* где залипает меню кейса — верхней шапки на сайте нет */

  /* --- Тени --- */
  /* Figma effect style «shadow 2 (mini)» — пять слоёв, значения один в один */
  --shadow-2-mini:
    0 0.89px 1.06px 0 rgba(0, 0, 0, .01),
    0 2.26px 2.69px 0 rgba(0, 0, 0, .02),
    0 4.61px 5.49px 0 rgba(0, 0, 0, .02),
    0 9.49px 11.32px 0 rgba(0, 0, 0, .03),
    0 12px 31px 0 rgba(0, 0, 0, .04);
  --shadow-shot: var(--shadow-2-mini);
  /* Та же «shadow 2 (mini)», но по форме картинки (filter: drop-shadow):
     тень у карточки на PNG с прозрачным фоном, а не у прямоугольника фото */
  --shadow-2-mini-drop:
    drop-shadow(0 0.89px 1.06px rgba(0, 0, 0, .01))
    drop-shadow(0 2.26px 2.69px rgba(0, 0, 0, .02))
    drop-shadow(0 4.61px 5.49px rgba(0, 0, 0, .02))
    drop-shadow(0 9.49px 11.32px rgba(0, 0, 0, .03))
    drop-shadow(0 12px 31px rgba(0, 0, 0, .04));   /* прежнее имя, оставлено для совместимости */

  /* --- Движение --- */
  --ease: cubic-bezier(.2, .6, .2, 1);
  --dur-fast: 160ms;
  --dur: 260ms;
  --ease-nav: ease-in-out;   /* переходы меню кейса, переключателей, слайдера */
  --dur-nav: 300ms;
  --hero-h: 100svh;          /* высота первого экрана главной: доля высоты окна */
  --hero-h-fallback: 100vh;  /* то же для браузеров без svh */
  --hero-min: 760px;         /* ниже этой высоты первый экран главной не сжимается */
  --slide-time: 4s;          /* сколько показывается один слайд */
  --slide-move: 700ms;       /* смена слайда, ease-in-out (задаётся в js/ui.js) */
  --ease-menu: cubic-bezier(.22, 1, .36, 1);   /* меню на телефоне: быстрый старт, мягкая остановка */
  --dur-menu-in: 460ms;
  --dur-menu-out: 240ms;
  --dock-max: 400px;         /* предельная ширина парящего меню на телефоне */

  /* --- Новая главная и обложки кейсов (Figma «Новая главная» 10098:71929) --- */
  --page-edge: 24px;         /* поля страницы: карточки тянутся в края окна */
  --page-edge-m: 12px;       /* то же на телефоне */
  --show-min: 440px;         /* витрина кейса: ниже не сжимается — текст метрик влезает всегда */
  --show-max: 760px;         /* выше не растёт — на 2K/4K не во весь экран */
  --show-fluid: 41.6667vw;   /* 600 px при окне 1440, как в макете */
  --hero-share: 86svh;       /* первый экран главной: 86 % окна — снизу видно начало кейсов */
  --cursor-dot: 6px;         /* точка курсора над кнопкой «Посмотреть» */
  /* градиент первого экрана: новый исходник (Figma 10107:63702) уже контрастный — без фильтра */
  --hero-grad-filter: none;
  --hero-wave-time: 6.5s;      /* один проход волны на первом экране (туда, потом обратно) */
  --hairline: rgba(35, 35, 37, .07);   /* едва заметная обводка (видео Mantle на белом) */
  --stat-card-max: 200px;
  --stat-card-gap-m: 24px;   /* плитка с цифрой на телефоне: от цифры до подписи */
  --exp-side: 180px;         /* колонка «компания, роль, даты» в карточке */
  --exp-indent: 21px;        /* отступ списка в карточке */
  --tg-menu-w: 219px;        /* меню кнопки Telegram (Figma 10456:94216) */    /* плитка с цифрой на телефоне: не больше — иначе пустота внутри */

}

/* Планшет и телефон: айфон в слайдере — как на десктопе (260), но не шире экрана */
@media (max-width: 960px) {
  :root {
    --phone-w: min(260px, calc(100vw - 2 * var(--space-16) - 48px));
  }
}