/*
 * Значения макета Focus.Tech, Frame 2 (1:126), дамп версии 2320801508453780751.
 * Переменных Figma в файле нет — всё взято из самих слоёв.
 * Мелкие несостыковки макета (#000 рядом с #0e1116 и т. п.) сохранены намеренно:
 * решение «повторяем как в макете» — docs/plan.md.
 */
:root {
  /* --- Сетка: фрейм 1400, 12 колонок × 60 + промежутки 40 = контейнер 1160, поля 120 */
  --page-width: 1400px;
  --container-max: 1160px;
  --grid-columns: 12;
  --grid-column: 60px;
  --grid-gutter: 40px;
  /*
   * Ширины (docs/mobile-plan.md): ≥ 1024 — десктоп, как макет; 900 — меню сворачивается в бургер;
   * 768–1023 — планшет; < 768 — телефон; минимум 360. Запросы — @container page (ширина страницы).
   */
  /* Поле по краю при сужении (на 1400 поля 120 выходят сами); уже 1024 — в css/main.css. */
  --page-gutter: 40px;
  /*
   * Ширина и левый край контейнера. cqw — от контейнера .page (ширина страницы без полосы
   * прокрутки); подставляются там, где используются, поэтому работают внутри .page.
   */
  --container-width: min(var(--container-max), 100cqw - 2 * var(--page-gutter));
  --container-left: calc((100cqw - var(--container-width)) / 2);

  --header-height: 68px;
  /* Расстояние между соседними секциями — 64 почти везде. */
  --section-gap: 64px;

  /* --- Цвета: фон и текст */
  --color-page: #fafafa;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-text: #0e1116;
  --color-text-secondary: #3a4350;
  --color-placeholder: #9ca3af;
  --color-border: #e5e5e5;

  /* --- Цвета: бренд */
  --color-brand: #0280ec;
  --color-brand-light: #5dc1f7;
  --color-cyan: #07d9ef;
  --color-sky: #80dbf1;
  --color-blue-start: #3faaf0;
  --color-blue-end: #3f53f0;
  --color-glow: #2c6ef2;
  --color-indigo-start: #3f45ef;
  --color-indigo-end: #383c73;
  --color-accent: #ec6e02;
  --color-accent-light: #feb170;

  /* --- Цвета: служебные */
  --color-map-dot: #7e8f9a;
  --color-chip: rgb(255 255 255 / 0.1);
  /* Подложка подвала: #d9d9d9 с непрозрачностью 0.2 поверх фона страницы. */
  --color-footer: rgb(217 217 217 / 0.2);
  --color-page-transparent: rgb(250 250 250 / 0);

  /*
   * Градиенты. Цвета общие, а угол и позиции остановок в Figma заданы
   * относительно размера слоя — CSS для каждого элемента считается отдельно
   * (шаг 6), здесь только пары цветов.
   *   синий:     --color-blue-start → --color-blue-end    блоки, стрелки, текст-акцент
   *   оранжевый: --color-accent-light → --color-accent    кнопки (до 50%), пятна (до 100%)
   *   бренд:     --color-cyan → --color-brand             вкладки
   *   голубой:   --color-blue-start → --color-sky         пятна
   *   свечение:  --color-page-transparent (59%) → --color-glow / --color-sky, радиальный
   */

  /* --- Шрифты */
  --font-raleway: "Raleway", system-ui, sans-serif;
  --font-inter: "Inter", system-ui, sans-serif;

  /* Типографика — для свойства font: вес размер/интерлиньяж семейство. */
  --text-h1: 800 52px/48px var(--font-raleway);
  --text-h2: 700 36px/40px var(--font-raleway);
  --text-title: 600 18px/28px var(--font-raleway);
  --text-lead: 400 18px/28px var(--font-raleway);
  --text-body: 400 16px/24px var(--font-raleway);
  --text-body-bold: 700 16px/24px var(--font-raleway);
  --text-label: 600 14px/20px var(--font-raleway);
  --text-nav: 500 14px/20px var(--font-raleway);
  --text-small: 400 14px/20px var(--font-raleway);
  --text-footer: 400 14px/20px var(--font-inter);
  /* 19.36 в макете — «auto» интерлиньяж Inter для 16 px. */
  --text-input: 400 16px/1.21 var(--font-inter);
  /* Надзаголовок: --text-label + прописные + разрядка. */
  --eyebrow-letter-spacing: 0.35px;
  /* Уже 1024 заголовки плавно уменьшаются: H1 52 → 32, H2 36 → 28 к ширине 360. */
  --h1-size: clamp(32px, calc(32px + 20 * (100cqw - 360px) / 664), 52px);
  --h2-size: clamp(28px, calc(28px + 8 * (100cqw - 360px) / 664), 36px);

  /* --- Радиусы */
  --radius-block: 30px;
  --radius-media: 20px;
  --radius-control: 12px;
  --radius-round: 100px;

  /* --- Размеры элементов управления */
  --control-height-lg: 50px;
  --control-height-md: 36px;

  /* --- Эффекты. Glass в первых итерациях не делаем (отдельный этап).
   * Размытие цветных пятен в Figma — 120; каким blur() это будет в CSS,
   * решается сверкой с эталоном на шаге 6. */
  --stroke-line: 3px;
}