/*
 * Kiln · backend: значения.
 *
 * Размеры повторяют метрики macOS и iPadOS, поэтому заданы в px, а не в
 * rem: нативное окно не масштабируется вместе с кеглем браузера.
 *
 * Имена начинаются с --native-, а не с --site-, намеренно. Половины Kiln
 * не пересекаются на экране: --native-* не встречается в публичных
 * шаблонах, --site-* в админских. Общий префикс сделал бы утечку
 * незаметной.
 */

:root {
    /* Размеры текста: основной, заголовки секций, панель инструментов. */
    --native-text: 13px;
    --native-text-section: 11px;
    --native-text-toolbar: 15px;

    /*
     * Готовый текст в инспекторе. Мельче основного: превью стоит в узкой
     * колонке рядом со свойствами и не должно спорить с ними за внимание.
     * Строка выше, чем у интерфейса: сплошной текст читается абзацами.
     */
    --native-text-prose: 12px;
    --native-line-prose: 1.5;

    /*
     * Отбивки готового текста. Просвет перед подзаголовком больше, чем
     * после: заголовок принадлежит тексту под собой, а не над.
     */
    --native-prose-space: 8px;
    --native-prose-space-title: 12px;
    --native-prose-space-under: 6px;
    --native-prose-space-image: 10px;
    --native-prose-space-item: 3px;
    --native-prose-list-gutter: 18px;

    /* Высоты хром-элементов окна. Высота строки задаётся ячейкой таблицы. */
    --native-toolbar-height: 52px;
    --native-status-bar-height: 26px;

    /* Ширина боковых колонок. */
    --native-sidebar-width: 256px;
    --native-inspector-width: 340px;

    /*
     * Поле окна. Одно на все колонки: сайдбар, таблица, инспектор. От него
     * считаются остальные отбивки, поэтому строка таблицы, её шапка и пункт
     * сайдбара начинаются на одной вертикали. Меняется в одном месте.
     */
    --native-gutter: 20px;

    /*
     * Отбивки сайдбара. Поле пункта меньше поля колонки: подложка выбранного
     * раздела не должна упираться в её края.
     */
    --native-sidebar-gutter: var(--native-gutter);
    --native-sidebar-item-gutter: 8px;
    --native-sidebar-item-space: 6px;
    --native-sidebar-gap: 8px;

    /* Значок раздела. Крупнее значка внутри контрола: он несёт смысл строки. */
    --native-icon: 16px;

    /* Радиусы: у Apple мелкие контролы скруглены слабее панелей. */
    --native-radius-small: 4px;
    --native-radius-control: 7px;
    --native-radius-panel: 12px;

    /*
     * Отбивки раздела. Поле подзаголовка слева равно внутреннему полю
     * пункта: иначе метка группы не встаёт по одной линии с содержимым.
     */
    --native-section-space: 8px;
    --native-section-label-gutter: 4px;
    --native-section-label-space: 4px;

    /* Строка свойства: просвет между подписью и значением, отбивка строки. */
    --native-row-gap: 12px;
    --native-row-space: 2px;

    /*
     * Мелкие контролы: кнопка, поле поиска. Высота одна на всех, иначе
     * панель инструментов теряет линию.
     */
    --native-control-height: 28px;
    --native-control-gap: 6px;
    --native-control-gutter: 8px;
    --native-search-width: 200px;

    /* Значок внутри контрола. */
    --native-icon-small: 14px;

    /* Поле по краям хром-элементов: панели инструментов, строки состояния. */
    --native-chrome-gutter: 12px;
    --native-toolbar-gap: 8px;

    /*
     * Ячейка таблицы. У шапки отбивка своя: она мельче строки, и одинаковое
     * поле сделало бы её выше содержимого.
     */
    --native-cell-gutter: var(--native-gutter);
    --native-cell-space: 4px;
    --native-cell-space-head: 6px;
    --native-cell-leading-width: 36px;

    /*
     * Таблица уже этой ширины не читается: колонки сжимаются до обрезки
     * каждого значения. Дальше колонка прокручивается по горизонтали.
     */
    --native-table-min-width: 560px;
    --native-table-empty-height: 256px;

    /*
     * Узел дерева. Шаг уровня меньше поля ячейки: вложенность должна быть
     * видна, но не уводить название к середине строки.
     */
    --native-node-step: 16px;
    --native-node-gap: 4px;
    --native-node-toggle: 16px;
    --native-node-chevron: 12px;

    /*
     * Лист инспектора на узком окне. Шире панели-колонки: на узком экране
     * он единственное место, где видны свойства.
     */
    --native-sheet-width: 380px;
    --native-sheet-gutter: 16px;
    --native-sheet-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);

    /*
     * Толщина разделителя. Отдельным значением, а не единицей в правиле:
     * на экране с тройной плотностью линия в один пиксель выглядит толстой,
     * и значение правится здесь один раз на все блоки.
     */
    --native-line: 1px;

    /* Плавность заливки под указателем. */
    --native-transition: 150ms;

    /* Разделители и подложки. */
    --native-separator: rgba(0, 0, 0, 0.09);
    --native-chrome: #f6f6f8;
    --native-content: #ffffff;
    /* Сайдбар темнее контента, инспектор — на полтона светлее сайдбара. */
    --native-sidebar: #ececf0;
    --native-inspector: #fafafc;
    --native-control-fill: rgba(0, 0, 0, 0.055);
    --native-control-fill-hover: rgba(0, 0, 0, 0.08);
    --native-stripe: rgba(0, 0, 0, 0.022);

    /* Акцент выделения — системный синий. */
    --native-accent: #0a72f5;
    --native-accent-foreground: #ffffff;

    /* Текст. */
    --native-label: #1d1d1f;
    --native-label-secondary: rgba(0, 0, 0, 0.55);
    --native-label-tertiary: rgba(0, 0, 0, 0.45);
    --native-label-quaternary: rgba(0, 0, 0, 0.3);
}