/* ==========================================================================
   БСК · Дизайн-система — ТОКЕНЫ
   Единственный источник правды. Ни один компонент не имеет права
   объявить цвет, шрифт, отступ или радиус мимо этого файла.

   Источник значений: макеты «Desktop — 1920» и «Mobile — 320»
   (значения извлечены из векторов PDF, не подобраны на глаз).

   Hallmark · macrostructure: Stat-Led + Long Document (гибрид ЖК-лендинга)
   · theme: studied-DNA (source: Desktop-1920.pdf / Mobile-320.pdf / bccr.ru)
   · observed-paper: oklch(100% 0 0) · observed-accent: oklch(65.1% 0.176 42.4)
   · pre-emit критика: P5 H5 E5 S5 R4 V4
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------
     1. ЦВЕТ
     Формат — OKLCH (перцептивно ровный: осветление не «выцветает» в серое).
     В комментарии — исходный HEX из макета для сверки с Figma.
     --------------------------------------------------------------------- */

  /* Фирменный синий БСК — база всей системы */
  --color-primary-900 : oklch(25.2% 0.113 261.6);  /* #001B57 — прижатый, для градиентов */
  --color-primary     : oklch(34.0% 0.163 262.5);  /* #002B8A — ОСНОВНОЙ. 12.26:1 на белом */
  --color-primary-600 : oklch(41.1% 0.177 262.2);  /* #0A3FA8 — hover */
  --color-primary-400 : oklch(56.6% 0.137 262.9);  /* #4A73C6 — disabled / вторичный текст на синем */
  --color-primary-100 : oklch(88.0% 0.043 259.0);  /* — рамки на светлом */

  /* Оранжевый — акцент действия. Никогда не фон больших плоскостей. */
  --color-accent      : oklch(65.1% 0.176 42.4);   /* #E46225 — бренд-оранжевый, крупные элементы */
  --color-accent-strong: oklch(58.0% 0.176 42.4);  /* #CA4C00 — ЗАЛИВКА КНОПОК. См. правило A11Y ниже */
  --color-accent-700  : oklch(52.0% 0.166 41.4);   /* #AF4100 — active/pressed */
  --color-accent-100  : oklch(93.0% 0.045 45.0);   /* — мягкая подложка бейджа */

  /* Поверхности. Три ступени голубого + два «рассветных» тинта из макета. */
  --color-paper       : oklch(100.0% 0 0);         /* #FFFFFF */
  --color-surface     : oklch(93.1% 0.022 256.7);  /* #DFE9F7 — плашка секции, ленты, формы */
  --color-surface-2   : oklch(96.0% 0.012 259.8);  /* #EDF2FA — карточка на белом */
  --color-surface-3   : oklch(97.3% 0.011 243.7);  /* #F0F7FD — самый светлый голубой */
  --color-tint-lavender: oklch(96.0% 0.012 301.3); /* #F3F0F9 — правый край градиентных полос */
  --color-tint-rose   : oklch(95.4% 0.018 323.0);  /* #F6ECF7 — дальний край градиента */

  /* Текст и линии */
  --color-ink         : oklch(22.6% 0 0);          /* #1C1C1C — основной текст. 17:1 на белом */
  --color-ink-2       : oklch(40.9% 0 0);          /* #4A4A4A — вторичный текст. 9.2:1 */
  /* Подписи и «мелочь». Значение выбрано так, чтобы пройти AA не только
     на белом (6.0:1), но и на голубой плашке --color-surface (4.9:1):
     подсказки форм лежат именно на ней. Светлее делать нельзя. */
  --color-ink-3       : oklch(50.0% 0 0);          /* #636363 */
  --color-line        : oklch(79.8% 0 0);          /* #BDBDBD — разделители */
  --color-line-soft   : oklch(90.0% 0.010 259.0);  /* — рамка карточки на светлом */

  /* Системные состояния */
  --color-success     : oklch(56.0% 0.130 155.0);
  --color-warning     : oklch(72.0% 0.150 75.0);
  --color-error       : oklch(55.0% 0.200 25.0);
  --color-focus       : oklch(61.7% 0.208 258.5);  /* #247FFF — только кольцо фокуса, не текст */

  /* Ссылки — синий БСК, НЕ #247FFF (тот даёт 3.78:1 на белом и не проходит AA) */
  --color-link        : var(--color-primary);
  --color-link-hover  : var(--color-accent-700);

  /* Фирменные градиенты из макета (диагональ «рассвет»: голубой → лаванда → роза) */
  --gradient-dawn: linear-gradient(107deg,
      var(--color-surface-3) 0%,
      var(--color-tint-lavender) 62%,
      var(--color-tint-rose) 100%);
  --gradient-primary: linear-gradient(180deg,
      var(--color-primary) 0%,
      var(--color-primary-900) 100%);
  /* Затемнение под текстом на фотогерое — обязательно, см. гайдлайны §4.3 */
  --gradient-hero-scrim: linear-gradient(180deg,
      oklch(25.2% 0.113 261.6 / 0.72) 0%,
      oklch(25.2% 0.113 261.6 / 0.28) 45%,
      oklch(25.2% 0.113 261.6 / 0.70) 100%);

  /* ---------------------------------------------------------------------
     2. ТИПОГРАФИКА
     Дисплей — геометрический гротеск фьючура-школы (как в макете):
     круглая «а», круглая «о», геометрическая «м». Кириллица обязательна.
     Текст — нейтральный гротеск с большим x-height.
     Замена коммерческого шрифта: подставьте своё имя ПЕРВЫМ в стеке,
     остальное оставьте как fallback — метрики близки.
     --------------------------------------------------------------------- */
  --font-display: "Jost", "Futura PT", "TT Norms Pro", system-ui, sans-serif;
  --font-text   : "Golos Text", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono   : "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;

  /* Кегли. Плавные clamp() между макетом 320 и макетом 1920 —
     промежуточных брейкпоинтов для типографики не нужно вообще. */
  --text-display     : clamp(34px, 20.40px + 4.2500vw, 102px); /* «ЖК ИЛЬЮШИН» */
  --text-display-num : clamp(42px, 30.00px + 3.7500vw, 102px); /* «100 000 ₽» */
  --text-ticker      : clamp(20px, 10.00px + 3.1250vw, 70px);  /* бегущая лента */
  --text-h1          : clamp(30px, 21.60px + 2.6250vw, 72px);
  --text-h2          : clamp(20px, 16.00px + 1.2500vw, 40px);
  --text-h3          : clamp(18px, 16.40px + 0.5000vw, 26px);
  --text-lead        : clamp(17px, 15.60px + 0.4375vw, 24px);
  --text-body        : clamp(15px, 14.40px + 0.1875vw, 18px);
  --text-small       : clamp(13px, 12.40px + 0.1875vw, 16px);
  --text-label       : clamp(12px, 11.60px + 0.1250vw, 14px);

  --leading-tight : 1.05;  /* дисплей */
  --leading-snug  : 1.18;  /* H2, H3 */
  --leading-normal: 1.45;  /* текст */
  --leading-loose : 1.60;  /* длинные абзацы, юридические тексты */

  --tracking-display: -0.02em;
  --tracking-normal : 0em;
  --tracking-label  : 0.08em; /* КАПС-метки: «ВЫБРАТЬ КВАРТИРУ», «СТАРТ ПРОДАЖ» */

  --weight-regular : 400;
  --weight-medium  : 500;
  --weight-semibold: 600;
  --weight-bold    : 700;

  --measure: 68ch; /* максимальная длина строки абзаца */

  /* ---------------------------------------------------------------------
     3. ПРОСТРАНСТВО — шкала 4pt
     --------------------------------------------------------------------- */
  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs : 8px;
  --space-sm : 12px;
  --space-md : 16px;
  --space-lg : 24px;
  --space-xl : 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-5xl: 128px;

  /* Вертикальный ритм секции — на мобильном втрое плотнее, чем на десктопе */
  --section-y: clamp(48px, 24px + 7.5vw, 144px);
  /* Боковой отступ полосы. На 320 — 16px, дальше растёт. */
  --gutter   : clamp(16px, 8px + 2.5vw, 60px);
  --container: 1400px;   /* контентная колонка внутри 1920 макета */
  --container-narrow: 860px; /* текстовые/юридические страницы */

  /* ---------------------------------------------------------------------
     4. ФОРМА — радиусы измерены по векторам макета
     --------------------------------------------------------------------- */
  --radius-xs  : 4px;
  --radius-sm  : 8px;
  --radius-md  : 16px;  /* карточка и изображение на мобильном */
  --radius-lg  : 24px;  /* карточка на десктопе (в макете 25–28px @1920) */
  --radius-xl  : 32px;  /* крупные панели, формы */
  --radius-pill: 999px; /* кнопки, поля ввода, чипы — в макете все pill */

  --border-hairline: 1px;
  --border-strong  : 2px;
  --rule-accent    : 4px;  /* вертикальная синяя черта у надзаголовка */

  /* ---------------------------------------------------------------------
     5. ГЛУБИНА
     В макете тени мягкие и почти без цвета — карточка «лежит», не «парит».
     --------------------------------------------------------------------- */
  --shadow-none: none;
  --shadow-sm  : 0 1px 2px oklch(25.2% 0.113 261.6 / 0.06);
  --shadow-md  : 0 4px 16px oklch(25.2% 0.113 261.6 / 0.08);
  --shadow-lg  : 0 12px 32px oklch(25.2% 0.113 261.6 / 0.10);
  --shadow-focus: 0 0 0 3px oklch(61.7% 0.208 258.5 / 0.45);

  /* ---------------------------------------------------------------------
     6. ДВИЖЕНИЕ
     Анимируем только transform и opacity. Никогда — width/height/top.
     --------------------------------------------------------------------- */
  --dur-instant: 90ms;
  --dur-fast   : 160ms;
  --dur-base   : 240ms;
  --dur-slow   : 420ms;
  --dur-ticker : 32s;

  --ease-out   : cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in    : cubic-bezier(0.64, 0, 0.78, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---------------------------------------------------------------------
     7. СЛОИ
     --------------------------------------------------------------------- */
  --z-base    : 0;
  --z-sticky  : 100;
  --z-header  : 200;
  --z-drawer  : 300;
  --z-modal   : 400;
  --z-toast   : 500;

  /* Минимальная зона касания. Ниже 44px не опускается ничего кликабельного. */
  --tap-min: 44px;
}

/* Плотные интерфейсы (таблицы квартир, шахматка) — уменьшенный ритм.
   Ставится на контейнер, не на :root. */
[data-density="compact"] {
  --section-y: clamp(32px, 16px + 4vw, 72px);
  --radius-lg: 16px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 1ms;
    --dur-fast   : 1ms;
    --dur-base   : 1ms;
    --dur-slow   : 120ms;
    --dur-ticker : 0s;
  }
}