/* ── СЛОЙ 1: ТОКЕНЫ ─────────────────────────────────────────────────────
   Единственный источник значений палитры. Всё, что читает переменные —
   шапка, подвал, карточки, формы, карта, — перекрашивается отсюда.

   Порядок подключения (layouts/app.blade.php):
       main.css      замороженная сборка вёрстки, её утилиты и дефолты
       content.css   типографика текстов из админки
       tokens.css    этот файл: палитра поверх дефолтов сборки
       site.css      правила блоков поверх всего

   Точки перелома, одно написание на каждую — сверять при правке медиа-запросов:
       до 767px    телефон          (максимум перед md сборки)
       от 768px    планшет и выше   (md сборки)
       до 1023px   телефон+планшет  (максимум перед lg сборки)
       от 1024px   десктоп          (lg сборки)
   Границы те же, что у сборки: она пишет их в rem (48rem, 64rem), но rem в
   медиазапросе считается от начального размера шрифта, а не от текущего
   размера корня, поэтому 48rem и 768px совпадают всегда. */

/* ── Палитра сайта (решение автора 04.09): середина между «тёплым камнем»
   и palette-final. Каждый токен — среднее двух значений; текст не чёрный, а
   графит с едва уловимым синим (#1B1F2B, мокап «Текст 1»), тёмная плашка CTA
   — тем же цветом. Одна палитра на весь сайт (решение автора 04.09): пробные
   страничные наборы — каталог на слоновой кости с navy и «Услуги» на бумаге —
   сняты вместе с меткой data-page. Переопределяем те же переменные, что
   задаёт замороженный main.css, в :root и [data-theme="dark"]; site.css
   подключён позже, поэтому наши значения побеждают при той же специфичности.
   Всё, что читает переменные (шапка, подвал, карточки, формы, карта),
   перекрашивается само.

   Фон нейтральный почти-белый с едва заметной прохладой, tint серо-песочный,
   акцент синий, ссылки Cobalt, CTA — фирменный красный #DA1249 (цвет автора,
   07.09; свечение под кнопкой идёт от того же токена). Кнопки мессенджеров в
   подвале — акцентно-синие: пробовали красным, автор вернул (07.09). Логотип в шапке и подвале — цветом текста #1B1F2B (правка автора
   04.09), а не navy #041133.

   Тёмная тема — тоже середина. Текст на синих кнопках там тёмный: на #426CFF
   он читается лучше белого; логотип идёт цветом текста, navy на тёмном не
   виден.

   08.09 те же значения записаны и в токены самого main.css (:root и
   [data-theme=dark]) — по просьбе автора палитра стала дефолтной, и старый
   «тёплый камень» (бежевый #f3f1ec и др.) не проявится, даже если site.css
   не успел примениться. Источник решений — этот блок; при правке палитры
   менять оба места (скрипт sync_palette.py в истории сессии). */

/* ── Длины в пикселях (решение автора 14.09) ─────────────────────────
   Сборка держит шаг сетки, ширины контейнеров и кегли в rem, и через эти
   токены считаются все утилиты отступов, ширин и кеглей в разметке:
   .p-6 это calc(var(--spacing) * 6), .text-lg это var(--text-lg), .max-w-xl
   это var(--container-xl). Переобъявляем их здесь в пикселях — и разметка
   переводится вместе с нашими слоями, одним местом.

   Значения те же при стандартном размере шрифта: 1rem = 16px. Разница в
   другом: rem следует за размером шрифта в настройках браузера, px нет.

   Токены межстрочного не трогаем: они безразмерные множители вида
   calc(1.75 / 1.125) и от единицы кегля не зависят. */
:root {
    /* Ширина контентной колонки и высота шапки в покое (решение автора 18.09:
       1480×74 вместо 1280×72). Одно место на всё: .shell, .hdr-bar, шит меню,
       прямоугольник каталога, окно галереи и .frame-max в разметке.
       Ниже 1280 колонка упирается во вьюпорт, и телефон с планшетом остаются
       как в main: шапка 72 (уточнение автора 18.09 — мобилку не трогаем). */
    --shell-max: 1480px;
    --hdr-h: 72px;
    --spacing: 4px; /* было .25rem */
    --container-xs: 320px; /* было 20rem */
    --container-sm: 384px; /* было 24rem */
    --container-md: 448px; /* было 28rem */
    --container-lg: 512px; /* было 32rem */
    --container-xl: 576px; /* было 36rem */
    --container-2xl: 672px; /* было 42rem */
    --container-3xl: 768px; /* было 48rem */
    --container-5xl: 1024px; /* было 64rem */
    --text-xs: 12px; /* было .75rem */
    --text-sm: 14px; /* было .875rem */
    --text-base: 16px; /* было 1rem */
    --text-lg: 18px; /* было 1.125rem */
    --text-xl: 20px; /* было 1.25rem */
    --text-2xl: 24px; /* было 1.5rem */
}

@media (min-width: 1280px) {
    :root {
        --hdr-h: 74px;
    }
}

:root {
    --bg: #F1F2F4;
    --bg-warm: #E6E8EA;
    --bg-subtle: #E6E8EA;
    --surface: #FFFFFF;
    --surface-hover: #E6E8EA;
    --tint: #E6E8EA;
    /* Поля фильтра на десктопе: светлее фона на 60% (выбор автора 08.09 —
       30%, затем 50%; правка 10.09 — «светлее на 20%», то есть доля белого
       умножена на 1.2). Выходит #F9FAFB против #F8F8FA: светлота 95,5%
       вместо 94,0 при фоне страницы 88,7%. Больше в светлой теме взять
       негде — до белого остаётся 4,5 пункта. */
    --field-bg: color-mix(in srgb, var(--bg), white 60%);
    --fg: #1B1F2B;
    --fg-muted: #6B7079;
    --fg-subtle: #9AA0AA;
    --fg-inverse: #FFFFFF;
    --border: rgba(12, 21, 42, .1);
    --border-strong: rgba(12, 21, 42, .22);
    --accent: #2D5BF2;
    --accent-hover: #1E42C9;
    --accent-fg: #FFFFFF;
    --accent-subtle: rgba(45, 91, 242, .1);
    --accent-graphic: #2D5BF2;
    --link: #1E42C9;
    --cta: #DA1249;
    --cta-hover: #BB0F3F;
    --cta-fg: #FFFFFF;
    --contrast: #1B1F2B;
    --on-contrast: #F1F2F4;
    --brand-deep: #1E42C9;
    --brand-deep-fg: #FFFFFF;
    --logo-color: #1B1F2B; /* логотип цветом текста, не navy (правка автора 04.09) */
    --map-fill: #E6E8EA;
    --map-stroke: #2D5BF2;
    --sh-card: 0 1px 2px rgba(27, 31, 43, .05), 0 4px 16px rgba(27, 31, 43, .06);
    --sh-hover: 0 2px 4px rgba(27, 31, 43, .07), 0 12px 32px rgba(27, 31, 43, .1);
    --sh-modal: 0 24px 64px rgba(27, 31, 43, .18);

/* Плавная смена цветов: тот же набор свойств, что у утилиты transition-colors
   из сборки. Три переменные градиента в списке ничего не анимируют, но стоят
   там же, где стояли, чтобы вычисленное значение совпадало с прежним. */
--tr-colors: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
/* Длительность и кривая по умолчанию, те же, что у всех переходов сборки.
   Имя без «colors»: они общие, ими же пользуются переходы трансформации. */
--tr-duration: .15s;
--tr-ease: cubic-bezier(.4, 0, .2, 1);
}

[data-theme="dark"] {
    --bg: #0E0F11;
    --bg-warm: #212126;
    --bg-subtle: #212126;
    --surface: #19191D;
    --surface-hover: #212126;
    --tint: #212126;
    /* Поля фильтра: светлее фона на 18% (правка автора 08.09 — 10%, затем
       20%, затем 15%; правка 10.09 — «светлее на 20%», доля белого умножена
       на 1.2). Выходит #393A3C против #323335. */
    --field-bg: color-mix(in srgb, var(--bg), white 18%);
    --fg: #EEEFEF;
    --fg-muted: color-mix(in srgb, #EEEFEF 66%, #0E0F11);
    --fg-subtle: color-mix(in srgb, #EEEFEF 44%, #0E0F11);
    --fg-inverse: #141820;
    --border: rgba(255, 255, 255, .12);
    --border-strong: rgba(255, 255, 255, .24);
    --accent: #426CFF;
    --accent-hover: #6786FF;
    --accent-fg: #FFFFFF;
    --accent-subtle: rgba(66, 108, 255, .16);
    --accent-graphic: #426CFF;
    --link: #FF4D7D;
    --link-hover: #FF7AA0;
    --cta: #DA1249;
    --cta-hover: #EE2E63;
    --cta-fg: #FFFFFF;
    --contrast: #19191D;
    --on-contrast: #EEEFEF;
    --brand-deep: #426CFF;
    --brand-deep-fg: #FFFFFF;
    --logo-color: #EEEFEF;
    --map-fill: #212126;
    --map-stroke: #426CFF;
    --sh-card: 0 1px 2px #0006, 0 4px 16px #00000080;
    --sh-hover: 0 2px 4px #00000073, 0 12px 32px #0009;
    --sh-modal: 0 24px 64px #000000b3;
}