/* ==========================================================================
   Дизайн-токены — извлечены из Figma «Сайт», node 6:118 («05 Заглушка»),
   фреймы «Coming Soon» (desktop 89:265 / mobile 94:292) + ds_molecules
   (links 97:158). Имена калькируют имена переменных Figma 1:1, переведены
   в kebab-case custom properties.

   Это источник правды по внешнему виду проекта. IDS — только конструктор
   паттернов/структуры (его собственные токены скопированы ниже в этом же
   файле, см. раздел «Из IDS») — о том, как его семантические переменные
   связаны с этими значениями, см. theme.css.

   Значения, помеченные «добавлено», не существуют как переменные в Figma;
   они добавлены по той же схеме именования category/role вместо того,
   чтобы зашиваться прямо в компонент, по правилу дизайн-токенов.
   ========================================================================== */

:root {
  /* --- color / primitive -------------------------------------------------
     gray/1000 — сырая ступень палитры, на неё ссылаются семантические
     цвета ниже */
  --color-gray-1000: #000000;

  /* --- color / semantic ----------------------------------------------------
     category/role[/state] — калька переменных Figma text/, bg/, graphic/ */
  --color-text-default: #000000;         /* text/default */
  --color-text-default-hover: #fa4169;   /* text/default/hover */
  --color-text-default-press: #f91143;   /* text/default/press */
  --color-bg-secondary: #eeeeee;         /* bg/secondary */
  --color-graphic-primary: #000000;      /* graphic/primary */
  --color-graphic-secondary: #ffffff;    /* graphic/secondary */

  /* --- space ---------------------------------------------------------------
     Числовая шкала Space/* из Figma, оставлена как есть (значение = имя / 25, px) */
  --space-0: 0px;
  --space-100: 4px;
  --space-200: 8px;
  --space-300: 12px;
  --space-400: 16px;
  --space-600: 24px;
  --space-800: 32px;
  --space-1200: 48px;
  --space-1600: 64px;
  --space-2400: 96px;
  --space-4000: 160px;
  --space-6700: 268px;
  --space-negative-200: -8px;

  /* --- font / primitives ---------------------------------------------------
     Heading = Times New Roman, используется капсом для единственной роли
     заголовка, встреченной в исходном фрейме. Body = Arial, используется
     для футера/текста. */
  --font-heading-family: "Times New Roman", serif;
  --font-heading-weight: 400;
  --font-heading-size-extra-small: 32px;         /* Heading/Size Extra Small — десктоп */
  --font-heading-size-extra-extra-small: 24px;   /* Heading/Size Extra Extra Small — мобильный */
  --line-height-heading-extra-small: 40px;
  --line-height-heading-extra-extra-small: 36px;

  --font-body-family: Arial, sans-serif;
  --font-body-weight: 400;
  --font-body-size-base: 20px;    /* Body/Size Base — десктоп */
  --font-body-size-small: 16px;   /* Body/Size Small — мобильный */
  --line-height-body-base: 32px;
  --line-height-body-small: 24px;

  /* --- layout --------------------------------------------------------------
     Переменная Figma "Device Width" для каждого адаптивного режима — это
     ширины фреймов, а не порог CSS-брейкпоинта сами по себе. Начиная с
     сессии 2026-08-16 в Figma добавлены ещё два промежуточных фрейма
     (tablet 1024 / regular 1440) между mobile 375 и desktop 1920 —
     см. историю в CLAUDE.md/DESIGN-SYSTEM.md. */
  --layout-device-width-mobile: 375px;
  --layout-device-width-tablet: 1024px;
  --layout-device-width-regular: 1440px;
  --layout-device-width-desktop: 1920px;

  /* Брейкпоинты равны ширинам самих Figma-фреймов (375/1024/1440/1920).
     --breakpoint-tablet какое-то время (сессия 2026-08-16, до перехода на
     плавную интерполяцию отступов/иллюстрации) держался на 768px —
     компромисс, чтобы избежать резкого растягивания мобильной vw-формулы
     иллюстрации guy до 1023px. Теперь size/position guy и все отступы
     интерполируются между реальными Figma-точками через
     --fluid-ratio-mobile-tablet/-tablet-regular/-regular-desktop (см.
     components.css) — интерполяция между двумя известными значениями по
     построению ограничена ими же и не может "раздуться" за пределы, в
     отличие от экстраполяции vw-пропорции, поэтому компромисс больше не
     нужен: порог сдвинут обратно на настоящую ширину tablet-фрейма.
     --breakpoint-tablet используется только для точечных, не
     интерполируемых переключений (art-direction картинки лого,
     margin-hack в футере — см. комментарии на местах). */
  --breakpoint-tablet: 1024px;
  --breakpoint-regular: 1440px;
  --breakpoint-desktop: 1920px;

  /* Добавлено — толщина подчёркивания ссылки в Figma задана как "decoration
     2.5%" прямо на слое, без отдельной переменной. */
  --link-underline-offset: 2.5%;

  /* --- layout / illustration guy — px-координаты силуэта (position:absolute
     внутри .gk__content, см. components.css) на каждом из четырёх
     Figma-фреймов, взяты из get_design_context по каждому фрейму отдельно
     (не общий master-компонент из ds_organisms/brand elements — там другие,
     более грубые размеры). height — не через aspect-ratio: он тоже
     интерполируется линейно, чтобы силуэт не "прыгал" по высоте на стыке
     соседних пропорций (565/452, 650/519, 869/694, 944.318/754 — все очень
     близки к 1.25, но не идентичны). */
  --illustration-guy-mobile-width: 565px;
  --illustration-guy-mobile-right: -198px;
  --illustration-guy-mobile-bottom: -36px;
  --illustration-guy-mobile-height: 452px;

  --illustration-guy-tablet-width: 650px;
  --illustration-guy-tablet-right: 8px;
  --illustration-guy-tablet-bottom: -29.95px;
  --illustration-guy-tablet-height: 519px;

  --illustration-guy-regular-width: 869px;
  --illustration-guy-regular-right: 12px;
  --illustration-guy-regular-bottom: -37.62px;
  --illustration-guy-regular-height: 694px;

  --illustration-guy-desktop-width: 944.318px;
  --illustration-guy-desktop-right: 16px;
  --illustration-guy-desktop-bottom: -60px;
  --illustration-guy-desktop-height: 754px;
}

/* ==========================================================================
   Из IDS (https://github.com/intuition-tech/ids) — перенесено сюда из
   ids/css/tokens/palette.css, tokens/colors.css и tokens/scales.css (папка
   ids/ больше не используется и удалена, эти переменные скопированы как
   есть). Раздел palette/colors/scales, а не project-токены выше: их читают
   theme.css (мост) и вендорные reset/утилиты в base.css. Обновлять вручную
   из апстрима IDS при необходимости — git pull для этого больше не работает. */

:root {
  /* --- palette: сырые цвета, источник правды для --ids__* семантических
     цветов ниже --- */
  --ids__color-white: rgb(255, 255, 255);

  --ids__color-gray-100: rgb(238, 240, 242);
  --ids__color-gray-200: rgb(220, 221, 223);
  --ids__color-gray-400: rgb(153, 156, 160);
  --ids__color-gray-500: rgb(115, 120, 125);
  --ids__color-gray-600: rgb(85, 88, 92);
  --ids__color-gray-700: rgb(55, 58, 62);
  --ids__color-gray-800: rgb(32, 33, 36);
  --ids__color-gray-900: rgb(18, 18, 20);
  --ids__color-gray-950: rgb(5, 5, 5);

  --ids__color-blue-450: rgb(60, 130, 250);
  --ids__color-blue-500: rgb(0, 100, 240);

  --ids__color-green-450: rgb(40, 215, 40);
  --ids__color-green-500: rgb(0, 200, 0);
  --ids__color-green-600: rgb(30, 170, 60);

  --ids__color-red-450: rgb(255, 70, 95);
  --ids__color-red-500: rgb(253, 47, 75);

  --ids__color-yellow-500: rgb(255, 225, 0);

  /* --- colors: семантические цвета IDS. text/link/hover/background
     переопределены мостом в theme.css значениями дизайн-системы проекта;
     accent/code/mark/surface/border/error/success мостом не тронуты —
     остаются дефолтами IDS, ими пользуется вендорная типографика ниже
     (component ids.css в base.css). --- */
  color-scheme: light;

  --ids__text: var(--ids__color-gray-950);
  --ids__text-caption: var(--ids__color-gray-600);
  --ids__link: var(--ids__color-blue-500);
  --ids__hover: var(--ids__color-green-500);
  --ids__accent: var(--ids__color-red-500);
  --ids__code: var(--ids__color-gray-500);
  --ids__mark: var(--ids__color-yellow-500);
  --ids__surface: var(--ids__color-gray-100);
  --ids__background: var(--ids__color-white);

  --ids__border: color-mix(in srgb, var(--ids__text) 20%, transparent);

  --ids__error: var(--ids__color-red-500);
  --ids__success: var(--ids__color-green-600);

  /* --- scales: шкалы отступов/радиусов/тайминга для вендорных утилит и
     типографики. --ids__density задан в base.css (settings.css IDS), но
     custom properties резолвятся лениво — порядок файлов тут не важен. --- */
  --ids__spacer-s: calc(var(--ids__density) * 0.7rem);
  --ids__spacer-m: calc(var(--ids__density) * 1.4rem);
  --ids__spacer-l: calc(var(--ids__density) * 2.4rem);
  --ids__spacer-xl: calc(var(--ids__density) * 4rem);

  --ids__gap-s: 0.5rem;
  --ids__gap-m: 1rem;
  --ids__gap-l: 1.5rem;

  --ids__radius-s: 0.2em;
  --ids__radius-m: 0.3em;
  --ids__radius-pill: 9999px;
  --ids__radius: 1.5em;

  --ids__border-width-s: 1px;
  --ids__border-width-m: 2px;

  --ids__duration-instant: 0s;
  --ids__duration-fast: 0.1s;
  --ids__duration-base: 0.5s;
  --ids__easing-base: ease;
}

.dark {
  color-scheme: dark;

  --ids__text: var(--ids__color-gray-200);
  --ids__text-caption: var(--ids__color-gray-400);
  --ids__link: var(--ids__color-blue-450);
  --ids__hover: var(--ids__color-green-450);
  --ids__accent: var(--ids__color-red-450);
  --ids__code: var(--ids__color-gray-400);
  --ids__mark: var(--ids__color-yellow-500);
  --ids__surface: var(--ids__color-gray-800);
  --ids__background: var(--ids__color-gray-900);

  --ids__error: var(--ids__color-red-450);
  --ids__success: var(--ids__color-green-450);
}