/* framework-module: styles | version: 427fdc502e22 | copied: 2026-10-22 | источник framework/shared/styles — правки здесь остаются в проекте */
/* ===================================================
   shared/styles/tokens.css — токены дизайн-схемы diconsulting.pro
   Единственное место литералов оформления: цвета, размеры шрифта, отступы,
   скругления, тени, шрифты. Остальной CSS проекта пишет только var(--…) —
   это проверяют CSS-правила arch_check. Значения правит designer.
   Тема одна — светлая, «Крупный графит» с акцентом «Сталь»: почти чёрный текст и
   тёмная полоса, контрастные рамки, крупная шкала заголовков, широкие поля секций.
   Тёмной темы у сайта нет.
   =================================================== */

/* Точки перелома. Вёрстка от телефона (360) вверх: @media (min-width: 768px) —
   планшет, @media (min-width: 1280px) — десктоп. CSS-переменные внутри @media
   не работают, поэтому список живёт здесь строкой — по ней arch_check проверяет
   ширины в @media.
   @breakpoints: 768 1280 */

/* --- Шрифты: self-hosted, файлы кладёт владелец в shared/styles/fonts/.
   Пока файлов нет, браузер берёт запасной системный шрифт из --font / --font-mono.
   Google Fonts не подключать (GDPR). --- */
@font-face {
    font-family:  'Inter';
    src:          url('fonts/InterVariable.woff2') format('woff2');
    font-weight:  100 900;
    font-style:   normal;
    font-display: swap;
}
@font-face {
    font-family:  'JetBrains Mono';
    src:          url('fonts/JetBrainsMono-Regular.woff2') format('woff2');
    font-weight:  400;
    font-style:   normal;
    font-display: swap;
}
@font-face {
    font-family:  'JetBrains Mono';
    src:          url('fonts/JetBrainsMono-Medium.woff2') format('woff2');
    font-weight:  500;
    font-style:   normal;
    font-display: swap;
}

:root {
    /* Цвета по ролям: имя говорит, зачем цвет, а не какой он.
       Контраст (WCAG): text/bg 18.7, text/surface-2 15.2 (бейдж, факт), text-muted/bg 7.9,
       text-muted/surface 7.2, text-muted/surface-2 6.4, on-accent/accent 5.2, on-accent/accent-hover 7.2,
       accent/surface-dark 3.6 (кнопка видна на тёмной полосе), text/accent-soft 15.8,
       on-dark/surface-dark 18.6, on-dark-muted/surface-dark 9.4,
       border-strong/bg 6.0, success 5.3, warning 6.0, danger 6.3 на своих -bg, danger/bg 7.3.
       Акцент «Сталь» — приглушённый серо-синий с белой надписью (выбор владельца). */
    --color-bg:             #ffffff;   /* фон страницы */
    --color-surface:        #F4F4F2;   /* подложки: подвал, принципы, карточка формы */
    --color-surface-2:      #E8E8E5;   /* вторая подложка: шапка таблицы, код, плашки */
    --color-surface-hover:  #EDEDEA;   /* наведение на тихую кнопку, пункт меню */
    --color-surface-dark:   #111315;   /* тёмная полоса: финальный CTA */
    --color-border:         #C9CBCE;   /* линии: разделители секций, рамки карточек — заметные */
    --color-border-strong:  #5F6368;   /* рамки полей ввода и обычной кнопки */
    --color-text:           #111315;   /* основной текст, заголовки, ссылки в тексте */
    --color-text-muted:     #4D5258;   /* подписи, описания карточек, подвал */
    --color-on-dark:        #ffffff;   /* текст на тёмной полосе */
    --color-on-dark-muted:  #B5B9BE;   /* второстепенный текст на тёмной полосе */
    --color-accent:         #4F6F8F;   /* сталь: только главное действие (CTA) и активное состояние */
    --color-accent-hover:   #3E5A76;
    --color-accent-soft:    #E8EDF2;   /* подложка выбранного/открытого состояния */
    --color-on-accent:      #ffffff;   /* надпись на акцентной кнопке — белая */
    --color-success:        #14713F;
    --color-success-bg:     #E5F2EA;
    --color-warning:        #7D5200;
    --color-warning-bg:     #FAF0DA;
    --color-danger:         #A81F14;
    --color-danger-bg:      #FCEBE8;
    --color-overlay:        rgba(17, 19, 21, 0.6);    /* затемнение под модалкой */
    --color-focus:          rgba(79, 111, 143, 0.55); /* обводка фокуса */

    /* Шрифт: крупная шкала — заголовки держат страницу */
    --font:       'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono:  'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    --fs-xs:   14px;   /* юридическая строка, теги, моноширинные метки */
    --fs-sm:   16px;   /* текст карточек, меню, подвал, кнопки */
    --fs-md:   18px;   /* основной текст, подзаголовок hero на телефоне, h3 */
    --fs-lg:   26px;   /* подзаголовок hero, h2 на телефоне, заголовки шагов */
    --fs-xl:   36px;   /* h2 секции, h1 на телефоне */
    --fs-2xl:  64px;   /* h1 hero от 768 */
    --fw-regular:   400;
    --fw-medium:    500;
    --fw-semibold:  650;
    --fw-bold:      750;
    --lh-tight:  1.08;   /* крупные заголовки */
    --lh-snug:   1.3;    /* h3, заголовки карточек, кнопки */
    --lh-base:   1.6;    /* текст */
    --ls-caps:     0.1em;    /* разрядка для надписей капсом */
    --ls-heading: -0.03em;   /* крупные заголовки плотнее */

    /* Отступы: сетка 4px. --space-05 — полшага для плотных мест.
       --space-8 / -9 / -10 — широкие вертикальные поля секций лендинга */
    --space-05:  2px;
    --space-1:   4px;
    --space-2:   8px;
    --space-3:   12px;
    --space-4:   16px;
    --space-5:   20px;
    --space-6:   24px;
    --space-7:   32px;
    --space-8:   56px;
    --space-9:   80px;
    --space-10:  128px;

    /* Форма: углы почти прямые, линии чёткие */
    --radius-sm:    2px;
    --radius-md:    4px;
    --radius-lg:    6px;
    --radius-pill:  999px;
    --border-thick: 3px;      /* толстая линия: полоски иконки меню, активный пункт, линия callout */
    --underline-offset: 0.2em;
    --shadow-sm:  0 1px 2px rgba(17, 19, 21, 0.08);
    --shadow-md:  0 4px 12px rgba(17, 19, 21, 0.12);
    --shadow-lg:  0 16px 40px rgba(17, 19, 21, 0.24);
    --transition: 0.15s ease;
    --opacity-disabled: 0.45;

    /* Появление секций: только лёгкое, выключается при prefers-reduced-motion */
    --reveal-duration: 0.5s;
    --reveal-shift:    12px;

    /* Размеры каркаса и элементов управления */
    --container-max:   1200px;   /* ширина контейнера вместе с боковыми полями */
    --text-max:        700px;    /* длина строки абзаца */
    --title-max:       960px;    /* длина строки крупного заголовка */
    --header-height:   72px;
    --brand-height:    28px;     /* высота wordmark в шапке */
    --control-h:       48px;     /* кнопка и поле — палец попадает на телефоне */
    --control-h-sm:    40px;
    --icon-size:       20px;     /* иконка в кнопке, квадратик галочки (.checkbox) */
    --field-min:       200px;    /* минимальная ширина поля в ряду формы */
    --textarea-h:      160px;
    --portrait-max:    300px;    /* наибольшая ширина фото человека (.media-text) */
    --modal-max:       560px;
    --modal-wide-max:  880px;
    --sheet-max-h:     90vh;     /* модалка-шторка на телефоне */

    /* Значки: рисунок отмеченной галочки (.checkbox:checked) — белая галка цвета
       --color-on-accent на стали (5.2:1). Цвет зашит в рисунок: меняется вместе с on-accent */
    --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    /* Слои */
    --z-sticky:    10;   /* шапка сайта */
    --z-dropdown:  50;
    --z-modal:     100;
}