/* framework-module: styles | version: 427fdc502e22 | copied: 2026-10-22 | источник framework/shared/styles — правки здесь остаются в проекте */
/* ===================================================
   shared/styles/base.css — сброс, типографика, markdown, утилиты
   Только var(--…) из tokens.css. Подключается вторым, после tokens.css.
   Вёрстка от телефона вверх: базовые правила — 360, @media (min-width) — шире.
   =================================================== */

/* --- Сброс --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }   /* атрибут hidden сильнее display компонента */
body {
    font-family:  var(--font);
    font-size:    var(--fs-md);
    line-height:  var(--lh-base);
    background:   var(--color-bg);
    color:        var(--color-text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; height: auto; }

/* --- Ссылки и элементы форм.
   Ссылка в тексте — цвет текста с тонким стальным подчёркиванием:
   акцент текстом не красим — он значит «сюда нажимать» --- */
a {
    color:                     var(--color-text);
    text-decoration:           underline;
    text-decoration-color:     var(--color-accent);
    text-decoration-thickness: 1px;
    text-underline-offset:     var(--underline-offset);
    transition:                color var(--transition), text-decoration-color var(--transition);
}
a:hover { text-decoration-color: var(--color-text); }
button { cursor: pointer; font-family: inherit; font-size: var(--fs-sm); color: inherit; }
input, select, textarea { font-family: inherit; font-size: var(--fs-md); color: inherit; }
:focus-visible { outline: var(--border-thick) solid var(--color-focus); outline-offset: var(--space-05); }

/* --- Заголовки по шкале: на телефоне на ступень меньше --- */
h1, h2 { font-weight: var(--fw-semibold); line-height: var(--lh-tight); letter-spacing: var(--ls-heading); }
h1 { font-size: var(--fs-xl); }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-md); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
@media (min-width: 768px) {
    h1 { font-size: var(--fs-2xl); }
    h2 { font-size: var(--fs-xl); }
}

/* --- Движение: только лёгкое появление, и то выключается по настройке системы --- */
@keyframes reveal {
    from { opacity: 0; transform: translateY(var(--reveal-shift)); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation:  none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* ===================================================
   Markdown-контент: один набор на проект.
   Для текстовых страниц сайта — компонент .prose (components.css).
   =================================================== */
.md-content p        { margin: var(--space-2) 0; }
.md-content p:first-child { margin-top: 0; }
.md-content p:last-child  { margin-bottom: 0; }
.md-content strong   { color: var(--color-text); font-weight: var(--fw-semibold); }
.md-content em       { font-style: italic; }
.md-content ul,
.md-content ol       { padding-left: var(--space-5); margin: var(--space-2) 0; }
.md-content li       { margin: var(--space-1) 0; }
.md-content h1,
.md-content h2,
.md-content h3,
.md-content h4 {
    font-weight: var(--fw-semibold);
    color:       var(--color-text);
    margin:      var(--space-4) 0 var(--space-2);
    line-height: var(--lh-snug);
    letter-spacing: normal;
}
.md-content h1,
.md-content h2 { font-size: var(--fs-lg); }
.md-content h3,
.md-content h4 { font-size: var(--fs-md); }
.md-content hr {
    border:     none;
    border-top: 1px solid var(--color-border);
    margin:     var(--space-4) 0;
}
.md-content blockquote {
    border-left: var(--border-thick) solid var(--color-border);
    margin:      var(--space-3) 0;
    padding:     var(--space-1) var(--space-4);
    color:       var(--color-text-muted);
}
.md-content code {
    font-family:   var(--font-mono);
    background:    var(--color-surface-2);
    padding:       var(--space-05) var(--space-1);
    border-radius: var(--radius-sm);
    font-size:     var(--fs-xs);
}
.md-content pre {
    background:    var(--color-surface-2);
    padding:       var(--space-4);
    border-radius: var(--radius-md);
    overflow-x:    auto;
    margin:        var(--space-3) 0;
}
.md-content pre code { background: none; padding: 0; }
.md-content table {
    border-collapse: collapse;
    width:           100%;
    margin:          var(--space-3) 0;
    font-size:       var(--fs-sm);
}
.md-content th,
.md-content td {
    border:     1px solid var(--color-border);
    padding:    var(--space-2) var(--space-3);
    text-align: left;
}
.md-content th { background: var(--color-surface-2); font-weight: var(--fw-semibold); }

/* ===================================================
   Утилиты — только для мелочей; повторяющийся вид — компонент
   =================================================== */
.text-muted     { color: var(--color-text-muted); }
.text-sm        { font-size: var(--fs-sm); }
.text-xs        { font-size: var(--fs-xs); }
.text-mono      { font-family: var(--font-mono); }
.text-caps      { text-transform: uppercase; letter-spacing: var(--ls-caps); }
.text-success   { color: var(--color-success); }
.text-warning   { color: var(--color-warning); }
.text-danger    { color: var(--color-danger); }
.text-right     { text-align: right; }
.text-center    { text-align: center; }
.text-num       { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.stack   { display: flex; flex-direction: column; gap: var(--space-3); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
/* Текст только для скринридера: подпись кнопки-иконки */
.visually-hidden {
    position:    absolute;
    width:       1px;
    height:      1px;
    margin:      -1px;
    padding:     0;
    overflow:    hidden;
    clip:        rect(0 0 0 0);
    white-space: nowrap;
    border:      0;
}