/* ============================================================================
   PROFiL landing page — design tokens
   ----------------------------------------------------------------------------
   Источник: Figma «PROFiL_landing-page», фрейм `landing page_1920` (node 2:10)
   https://www.figma.com/design/3TkAUr22bvDzwdqtd33XAM/PROFiL_landing-page?node-id=2-10

   ВАЖНО: в Figma-файле НЕТ переменных (variables) и НЕТ стилей
   (paint/text/effect styles) — get_variable_defs вернул пустой результат,
   локальные коллекции и стили тоже пусты. Все значения в макете захардкожены.
   Поэтому ИМЕНА переменных ниже НЕ импортированы из Figma, а назначены вручную.
   ЗНАЧЕНИЯ извлечены из макета обходом всех 183 узлов фрейма.
   Если в Figma позже появятся настоящие variables — имена следует
   синхронизировать с ними.

   В комментариях указано число использований значения в макете.
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------------
     ЦВЕТА — сырая палитра
     -------------------------------------------------------------------------- */

  --color-white: #fefefe;              /* 45× — доминирующий светлый */
  --color-white-pure: #ffffff;         /*  1× — единичный чистый белый (вероятно рассинхрон с --color-white) */
  --color-charcoal: #1f1c17;           /* 15× — тёплый почти-чёрный */
  --color-orange: #f15f22;             /* 30× — акцент бренда PROFiL */
  --color-stone: #d8d4ce;              /*  5× — светлый тёплый нейтральный */
  --color-cream: #f6f1ed;              /*  1× — тёплый кремовый (в макете с alpha 0.7) */
  --color-black: #000000;              /*  2× — только как затемняющий оверлей с alpha 0.2 */

  /* Цвета с прозрачностью — как заданы в макете */
  --color-white-70: rgb(254 254 254 / 0.7);   /* 11× — приглушённый светлый текст */
  --color-white-03: rgb(254 254 254 / 0.03);  /*  2× — «стеклянная» подложка */
  --color-cream-03: rgb(242 241 238 / 0.03);  /* второй оттенок той же подложки: мобильная
                                                 панель элементов и кнопка-стрелка (24:177) */
  --color-cream-70: rgb(246 241 237 / 0.7);   /*  1× */
  --color-black-20: rgb(0 0 0 / 0.2);         /*  2× — оверлей поверх изображений */

  /* --------------------------------------------------------------------------
     ЦВЕТА — семантические алиасы
     -------------------------------------------------------------------------- */

  --color-bg: var(--color-white);
  --color-bg-inverse: var(--color-charcoal);
  --color-bg-muted: var(--color-stone);
  --color-bg-glass: var(--color-white-03);
  --color-overlay: var(--color-black-20);

  --color-text: var(--color-charcoal);
  --color-text-inverse: var(--color-white);
  --color-text-muted: var(--color-white-70);

  --color-accent: var(--color-orange);
  --color-accent-text: var(--color-white);

  --color-border: var(--color-white);          /* 6× обводок */
  --color-border-accent: var(--color-orange);  /* 4× обводок */

  /* --------------------------------------------------------------------------
     ТИПОГРАФИКА
     В макете одно семейство и один набор метрик: line-height 120 %
     и letter-spacing −2 % применены ко всем 45 текстовым узлам без исключений.
     -------------------------------------------------------------------------- */

  --font-family-base: "Noto Sans", sans-serif;

  --font-weight-light: 300;      /* Noto Sans Light — мелкие подписи, копирайт */
  --font-weight-regular: 400;    /* Noto Sans Regular — основной текст */
  --font-weight-medium: 500;     /* Noto Sans Medium — заголовки секций 48px */
  --font-weight-semibold: 600;   /* Noto Sans SemiBold — h1, подзаголовки, кнопки, меню */
  --font-weight-bold: 700;       /* Noto Sans Bold — 40px, единично */

  --font-size-3xl: 64px;         /* h1 hero и телефон в футере */
  --font-size-2xl: 48px;         /* заголовки секций */
  --font-size-xl: 40px;          /* подзаголовки секций */
  --font-size-lg: 20px;          /* крупный вводный текст */
  --font-size-md: 18px;          /* основной текст */
  --font-size-sm: 16px;          /* телефон в шапке */
  --font-size-xs: 14px;          /* кнопки, меню, поля, подписи */
  --font-size-2xs: 12px;         /* текст чекбокса согласия */

  --line-height-base: 1.2;       /* 120 % — единственное значение в макете */
  --letter-spacing-base: -0.02em; /* −2 % — единственное значение в макете */

  /* --------------------------------------------------------------------------
     ОТСТУПЫ
     Значения gap/padding собраны с 20 auto-layout контейнеров макета.
     -------------------------------------------------------------------------- */

  --space-0: 0;        /* 2× gap */
  --space-1: 1px;      /* 6× gap — разделители внутри групп */
  --space-2: 10px;     /* 9× gap — самый частый; и горизонтальный padding иконочных кнопок */
  --space-3: 16px;     /* вертикальный padding всех CTA */
  --space-4: 20px;     /* 2× gap */
  --space-5: 30px;     /* 1× gap */
  --space-6: 32px;     /* горизонтальный padding основных CTA */
  --space-section: 120px; /* вертикальный отступ секций в макете 1920 */

  /* Готовые составные padding кнопок — ровно как в макете */
  --padding-cta: var(--space-3) var(--space-6);       /* 16px 32px — 4 CTA */
  --padding-cta-compact: var(--space-3) var(--space-2); /* 16px 10px — 5 элементов */

  /* Макетная сетка (из координат фрейма, auto-layout на секциях не используется) */
  --layout-page-width: 1920px;   /* ширина макета */
  --layout-gutter: 100px;        /* боковой отступ контента, слева и справа */
  --layout-column-text: 634px;   /* ширина текстовой колонки */
  --layout-column-heading: 1010px; /* ширина колонки заголовков */

  /* --------------------------------------------------------------------------
     РАДИУСЫ
     В макете скруглений нет: у всех 116 узлов, поддерживающих cornerRadius,
     значение 0. Токен оставлен для полноты и как единая точка изменения.
     -------------------------------------------------------------------------- */

  --radius-none: 0;
  --radius-base: var(--radius-none);

  /* --------------------------------------------------------------------------
     ОБВОДКИ, РАЗМЫТИЯ, ГРАДИЕНТЫ
     Добавлено после разбора design context: этих значений не видно
     при обходе узлов, они заданы на уровне эффектов и заливок.
     -------------------------------------------------------------------------- */

  --border-width-hairline: 0.5px;  /* все обводки в макете — 0.5px */
  --border-hairline-accent: var(--border-width-hairline) solid var(--color-accent);
  --border-hairline-light: var(--border-width-hairline) solid var(--color-white);

  --blur-glass: 10px;              /* backdrop-filter стеклянных панелей (Figma radius 20) */

  --color-white-0: rgb(254 254 254 / 0);
  /* Затухание hero в белый фон страницы */
  --gradient-hero-fade: linear-gradient(
    178.74deg,
    var(--color-white-0) 5.99%,
    var(--color-white) 65.33%
  );

  /* --------------------------------------------------------------------------
     ПОПАПЫ
     Источник: фреймы `form_popup` (2:217), `form_popup_focus_error` (2:243)
     и `popup_thanks` (2:234) того же файла. Это отдельные кадры шириной 1440,
     поэтому часть значений не встречается в основном макете 1920.
     -------------------------------------------------------------------------- */

  --color-red: #f12222;        /* 2× — рамка незаполненного поля и текст ошибки */
  --color-error: var(--color-red);

  --border-hairline-dark: var(--border-width-hairline) solid var(--color-charcoal);
  --border-hairline-error: var(--border-width-hairline) solid var(--color-error);

  --space-7: 50px;             /* 2× — от вводного текста до формы и верхний отступ «Закрити» */
  --layout-gutter-popup: 60px; /* боковой отступ «Закрити» в кадре 1440 */

  /* --------------------------------------------------------------------------
     ЦВЕТА ВОДОСТОКА
     Источник: переключатель цветов на 5-м слайде `5 slide` (2:337).
     Это не палитра интерфейса, а образцы самого изделия, поэтому они вынесены
     в отдельную группу и не участвуют в семантических алиасах выше.
     Названия — как в примечании дизайнера (16:139), латиницей.
     -------------------------------------------------------------------------- */

  --color-pipe-brick: #8e402a;
  --color-pipe-graphite: #44494f;
  --color-pipe-brown: #331a13;
  --color-pipe-red: #871420;
  --color-pipe-black: #0e0e0e;
  --color-pipe-white: var(--color-white-pure);  /* единственное место, где нужен чистый белый */

  --border-width-selected: 2px;  /* рамка выбранного образца — единственная не-hairline обводка макета */

  /* --------------------------------------------------------------------------
     АДАПТИВНОСТЬ
     Боковой отступ уменьшается на планшете и мобильном.
     Переопределяется в @media внутри style.css.

     Значения выше — метрики макета 1920. Они не переключаются ступеньками,
     а плавно интерполируются на всём диапазоне: 375 → 1024 → 1920. Обе
     формулы лежат в style.css — до 1024 в :root, дальше в блоке «ДЕСКТОП
     1024+». Поэтому --layout-gutter здесь задан макетным значением 100px,
     а в вёрстке никогда не берётся напрямую как константа.

     --layout-gutter-tablet больше не нужен: планшетная ступенька растворилась
     в общей кривой, и на 768 боковое поле теперь получается из неё (~37px).
     -------------------------------------------------------------------------- */

  /* Остался только для модального меню: оно всегда «мобильное» по оформлению */
  --layout-gutter-mobile: 20px;
}