/*
 * Переменные оформления сайта — единственный источник значений.
 *
 * Подключается ПЕРВЫМ в каждой странице, до style.css:
 *   <link rel="stylesheet" href="tokens.css">
 *   <link rel="stylesheet" href="style.css">
 *
 * Правила, которые этот файл обязан соблюдать:
 *  - ни одной внешней загрузки: шрифт системный, значков-картинок нет;
 *  - тёмная тема — это переопределение тех же переменных, а не второй набор
 *    правил, иначе два набора со временем разъезжаются;
 *  - здесь только значения. Ни одного правила для тега или класса: оформление
 *    компонентов живёт в style.css, а описание системы — в docs/18-дизайн-сайта.md.
 *
 * Контраст каждой текстовой пары посчитан и выписан в документе (раздел «Цвет»).
 * Минимум по проекту — 4,5:1; ни одна пара ниже не опускается.
 */

:root {
  /* Светлая и тёмная тема по настройке системы. */
  color-scheme: light dark;

  /* ==========================================================================
     1. ТИПОГРАФИКА
     ========================================================================== */

  /* Системный шрифт. Никаких веб-шрифтов: сайт открывается без интернета. */
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Display",
    "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  /* Отдельного шрифта для цифр нет намеренно: моноширинный выбивается из
     страницы. Ровные столбцы цифр даёт не другой шрифт, а --numeric-tabular. */
  --font-num: var(--font-ui);

  /* Цифры одинаковой ширины — для цен, площадей, этажей, таблиц и счётчиков:
     font-variant-numeric: var(--numeric-tabular); */
  --numeric-tabular: tabular-nums;

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

  /* Шкала размеров: от подписи до главного заголовка.
     Крупные ступени текучие — на 360 px они уменьшаются сами, без брейкпоинта.
     Для каждой ступени свои высота строки и межбуквенное расстояние;
     в крупных заголовках оно отрицательное — так набор собирается в плотное
     пятно и читается как заголовок товара, а не как строка документа. */

  /* Главный заголовок страницы: 34 px на телефоне → 56 px на компьютере */
  --fs-hero: clamp(2.125rem, 1.4rem + 3.2vw, 3.5rem);
  --lh-hero: 1.05;
  --ls-hero: -0.028em;

  /* Заголовок раздела: 28 → 40 px */
  --fs-title-1: clamp(1.75rem, 1.35rem + 1.8vw, 2.5rem);
  --lh-title-1: 1.1;
  --ls-title-1: -0.022em;

  /* Заголовок блока: 22 → 28 px */
  --fs-title-2: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --lh-title-2: 1.18;
  --ls-title-2: -0.018em;

  /* Заголовок карточки: 21 px */
  --fs-title-3: 1.3125rem;
  --lh-title-3: 1.28;
  --ls-title-3: -0.012em;

  /* Крупный текст — вводный абзац, важное пояснение: 17 px */
  --fs-body-lg: 1.0625rem;
  --lh-body-lg: 1.5;
  --ls-body-lg: -0.006em;

  /* Основной текст: 15 px */
  --fs-body: 0.9375rem;
  --lh-body: 1.55;
  --ls-body: 0em;

  /* Подпись — второстепенная строка, сноска, единица измерения: 13 px */
  --fs-caption: 0.8125rem;
  --lh-caption: 1.4;
  --ls-caption: 0em;

  /* Мелкая метка — статус, счётчик у флажка: 11 px.
     Положительное межбуквенное расстояние: мелкий кегль без него слипается. */
  --fs-micro: 0.6875rem;
  --lh-micro: 1.3;
  --ls-micro: 0.01em;

  /* Цена — главное число страницы. Отдельные ступени, потому что цена живёт
     по своим правилам: плотнее заголовка и всегда с табличными цифрами. */
  --fs-price-hero: clamp(2rem, 1.5rem + 2.2vw, 2.75rem); /* 32 → 44 px, карточка квартиры */
  --fs-price: 1.5rem;                                     /* 24 px, сводка */
  --fs-price-sm: 1.1875rem;                               /* 19 px, карточка в выдаче */
  --lh-price: 1.05;
  --ls-price: -0.03em;
  --fw-price: var(--fw-semibold);

  /* Характеристика — число в таблице и в плашке факта. */
  --fs-spec: var(--fs-body);
  --fw-spec: var(--fw-medium);

  /* Длина строки для связного текста: дальше глаз теряет начало строки. */
  --measure: 68ch;

  /* ==========================================================================
     2. ЦВЕТ — светлая тема
     Почти монохром: фон, бумага, семь ступеней серого. Ровно один акцент.
     ========================================================================== */

  --c-bg: #f5f5f7;              /* фон страницы */
  --c-surface: #ffffff;         /* фон карточки, панели, шапки */
  --c-surface-raised: #ffffff;  /* приподнятая поверхность: в светлой теме её
                                   поднимает тень (--sh-2), а не другой цвет */
  --c-fill: #ececed;            /* тихая заливка: плашка факта, ячейка, пустое место */

  --c-separator: #e3e3e6;       /* тонкий разделитель в 1 px вместо рамки */
  --c-separator-strong: #d2d2d6;/* обводка поля ввода и вторичной кнопки */

  --c-text: #1d1d1f;            /* основной текст */
  --c-text-secondary: #55555c;  /* второстепенный: подписи полей, описания */
  --c-text-tertiary: #6e6e76;   /* приглушённый: сноски, единицы, служебное */

  /* Акцент — спокойный синий. Используется скупо: действия и цена-ссылка. */
  --c-accent: #0a62d0;
  --c-accent-hover: #0a56b8;
  --c-accent-active: #094a9e;
  --c-accent-soft: #e8f1fd;     /* подложка пилюли фильтра и выбранного состояния */
  --c-on-accent: #ffffff;       /* текст на залитой акцентом кнопке */

  /* Смысловые цвета. Пара «текст + подложка» на каждый смысл. */
  --c-free: #17693f;            /* в продаже */
  --c-free-soft: #e3f4ea;
  --c-booked: #8a5300;          /* забронирована */
  --c-booked-soft: #fdf1dd;
  --c-sold: #a31f26;            /* продана, снята с продажи */
  --c-sold-soft: #fbe8e9;
  --c-unknown: #55555c;         /* статус неизвестен, данные устарели */
  --c-unknown-soft: #ececed;

  /* Честные пометки. Цвета намеренно НЕ рекламные и НЕ тревожные:
     демонстрационные данные — графит и пунктирная обводка, а не оранжевая
     плашка, чтобы пометку не путали ни со статусом «бронь», ни с акцией. */
  --c-demo: #4f4f57;
  --c-demo-border: #b0b0b8;
  --c-approx: #6e6e76;          /* «≈» и время по прямой */
  --c-approx-underline: #b0b0b8;/* точечное подчёркивание под приблизительным */

  /* След фокуса на клавиатуре — виден всегда и на любой подложке. */
  --c-focus: #0a62d0;
  --focus-width: 2px;
  --focus-offset: 2px;

  /* ==========================================================================
     3. РИТМ: отступы, ширины, скругления, тени
     ========================================================================== */

  /* Шаг 4 px, основной ритм — 8 px и его кратные. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* Ширина содержимого и поля страницы. Поля — это воздух, а не остаток:
     на компьютере 40 px, на телефоне 20 px, и ничто не прижимается к краю. */
  --w-content: 1180px;   /* выдача, карточки, таблицы */
  --w-narrow: 820px;     /* страница из одного столбца текста */
  --w-header: 1440px;    /* шапка и подвал — шире содержимого */
  --gutter: 40px;
  --gutter-mobile: 20px;

  /* Вертикальные промежутки между крупными блоками. */
  --stack-tight: var(--sp-4);
  --stack: var(--sp-5);
  --stack-loose: var(--sp-7);
  --section: var(--sp-9);

  /* Скругления. */
  --r-sm: 8px;    /* поле ввода, мелкая плашка */
  --r-md: 14px;   /* карточка, панель */
  --r-lg: 20px;   /* крупный блок, сводка */
  --r-xl: 28px;   /* большая обложка */
  --r-pill: 999px;/* кнопка, пилюля фильтра, метка статуса */

  /* Три уровня глубины. Тени мягкие и широкие, без чёрного края. */
  --sh-1: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 3px rgba(0, 0, 0, .06);
  --sh-2: 0 2px 6px rgba(0, 0, 0, .05), 0 8px 24px rgba(0, 0, 0, .07);
  --sh-3: 0 4px 12px rgba(0, 0, 0, .06), 0 20px 48px rgba(0, 0, 0, .10);

  /* ==========================================================================
     4. ДВИЖЕНИЕ
     Коротко и мягко: наведение почти мгновенно, раскрытие заметно, появление
     самое медленное. Ничего прыгающего.
     ========================================================================== */

  --dur-hover: 120ms;   /* наведение, смена цвета, след фокуса */
  --dur-expand: 220ms;  /* раскрытие группы фильтров, подсказки */
  --dur-enter: 320ms;   /* появление карточек и панелей */

  --ease-out: cubic-bezier(.22, .61, .36, 1);   /* появление, раскрытие */
  --ease-in-out: cubic-bezier(.4, 0, .22, 1);   /* смена состояния */
  --ease-standard: cubic-bezier(.25, .1, .25, 1);

  /* Готовые значения сдвига и нажатия — чтобы отключать их в одном месте. */
  --lift-hover: translateY(-2px);
  --scale-press: .98;

  /* ==========================================================================
     5. СОВМЕСТИМОСТЬ
     Прежние имена переменных, на которые ещё ссылается style.css. Это
     переходный слой: новая вёрстка пишется на --c-*, --sp-*, --fs-*.
     ========================================================================== */

  --bg: var(--c-bg);
  --surface: var(--c-surface);
  --surface-2: var(--c-fill);
  --text: var(--c-text);
  --muted: var(--c-text-secondary);
  --border: var(--c-separator);
  --border-strong: var(--c-separator-strong);
  --accent: var(--c-accent);
  --accent-soft: var(--c-accent-soft);
  --accent-text: var(--c-accent);
  --on-accent: var(--c-on-accent);
  --ok: var(--c-free);
  --ok-soft: var(--c-free-soft);
  --warn: var(--c-booked);
  --warn-soft: var(--c-booked-soft);
  --danger: var(--c-sold);
  --danger-soft: var(--c-sold-soft);
  --radius: var(--r-md);
  --radius-sm: var(--r-sm);
  --shadow: var(--sh-1);
  --gap: var(--sp-4);
  --font: var(--font-ui);
}

/* ============================================================================
   ТЁМНАЯ ТЕМА
   Переопределяются только цвета и тени. В тёмной теме тень не читается,
   поэтому приподнятость передаётся более светлой поверхностью.
   ============================================================================ */

@media (prefers-color-scheme: dark) {
  :root {
    --c-bg: #0b0b0c;
    --c-surface: #161618;
    --c-surface-raised: #1f1f22;
    --c-fill: #232326;

    --c-separator: #2c2c30;
    --c-separator-strong: #3a3a40;

    --c-text: #f5f5f7;
    --c-text-secondary: #a9a9b2;
    --c-text-tertiary: #8e8e98;

    /* В тёмной теме синий светлее, а текст на залитой кнопке — почти чёрный:
       белый на синем в темноте не дотягивает до 4,5:1. */
    --c-accent: #4da3ff;
    --c-accent-hover: #6eb4ff;
    --c-accent-active: #3d92ee;
    --c-accent-soft: #15294a;
    --c-on-accent: #0b0b0c;

    --c-free: #5fd39a;
    --c-free-soft: #10301f;
    --c-booked: #e5b768;
    --c-booked-soft: #33280f;
    --c-sold: #f3888f;
    --c-sold-soft: #3a1c1e;
    --c-unknown: #a9a9b2;
    --c-unknown-soft: #232326;

    --c-demo: #b4b4bc;
    --c-demo-border: #55555c;
    --c-approx: #8e8e98;
    --c-approx-underline: #55555c;

    --c-focus: #7cbaff;

    --sh-1: 0 1px 2px rgba(0, 0, 0, .55);
    --sh-2: 0 2px 6px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .45);
    --sh-3: 0 4px 12px rgba(0, 0, 0, .5), 0 20px 48px rgba(0, 0, 0, .55);
  }
}

/* ============================================================================
   МЕНЬШЕ ДВИЖЕНИЯ
   Настройка системы важнее задумки: длительности обнуляются, сдвиг и нажатие
   становятся пустыми. Правила в style.css остаются прежними — они просто
   перестают двигать.
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-hover: 1ms;
    --dur-expand: 1ms;
    --dur-enter: 1ms;
    --lift-hover: none;
    --scale-press: 1;
  }
}