/* saltykov.tech design system: base.css (шрифты, токены, базовая типографика). Подходит любой странице.
   Источник правды: design/ в репо saltykov_tech, правила в design/README.md. Копии не править. */

/* ---------- шрифты: Inter (переменный, с оптическими размерами) и IBM Plex Mono 400/500 ---------- */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(fonts/inter-latin-100-900.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(fonts/inter-cyrillic-100-900.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/ibm-plex-mono-cyrillic-400-normal.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(fonts/ibm-plex-mono-cyrillic-500-normal.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ---------- токены ---------- */
:root {
  color-scheme: light dark;

  /* корпус и линии */
  --bg: #E4E4DF;        /* серый корпус */
  --surface: #EFEFEA;   /* светлее корпуса: ячейки, плашки, наведение */
  --border: #C4C4BD;    /* тонкие линии внутри ячеек */
  --line: #111111;      /* рамки */
  --text: #111111;
  --muted: #55554F;     /* 5.9:1 к корпусу */
  --accent: #0A3DFF;    /* кобальт, единственный акцент */
  --on-accent: #FFFFFF;

  /* статусы: яркие для точек и полос, -ink для текста (AA к корпусу) */
  --ok: #10A34A;   --ok-ink: #087030;
  --warn: #C98A00; --warn-ink: #805800;
  --bad: #D7261E;  --bad-ink: #B81E17;

  /* шрифты */
  --sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  --mono: "Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* кегли: моно-метки не мельче --fs-label */
  --fs-label: 12px;
  --fs-sm: 14px;
  --fs-body: 16px;
  --fs-lead: 17px;
  --fs-title: 22px;
  --fs-h1: clamp(34px, 5vw, 56px);
  --lh: 1.55;
  --measure: 66ch;      /* длина строки текста */

  /* отступы */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 56px;
  --pad: 24px;          /* поле внутри ячейки рамки */
  --frame: 1120px;      /* ширина корпуса */
}
@media (max-width: 760px) { :root { --pad: 16px; } }

/* тёмная: по системе; .ds-dark включает её на любом поддереве */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111110; --surface: #1A1A18; --border: #3A3A36; --line: #D9D9D2;
    --text: #F0F0EA; --muted: #ADADA6; --accent: #7A93FF;  /* muted 8.4:1, accent 6.7:1 */
    --on-accent: #111110;  /* белый на светлом кобальте давал 2.9:1 */
    --ok: #3DDC75;   --ok-ink: #3DDC75;
    --warn: #F2B730; --warn-ink: #F2B730;
    --bad: #FF5A4E;  --bad-ink: #FF6B60;
  }
}
.ds-dark {
  color-scheme: dark; color: var(--text);
  --bg: #111110; --surface: #1A1A18; --border: #3A3A36; --line: #D9D9D2;
  --text: #F0F0EA; --muted: #ADADA6; --accent: #7A93FF; --on-accent: #111110;
  --ok: #3DDC75;   --ok-ink: #3DDC75;
  --warn: #F2B730; --warn-ink: #F2B730;
  --bad: #FF5A4E;  --bad-ink: #FF6B60;
}

/* ---------- база ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: var(--fs-body)/var(--lh) var(--sans);
  font-optical-sizing: auto;
  font-feature-settings: "cv05" 1;  /* l с хвостиком: l, I, 1 различимы */
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::placeholder { color: var(--muted); opacity: 1; }
[hidden] { display: none !important; }

.muted { color: var(--muted); }
.mono { font-family: var(--mono); }
.num { font-variant-numeric: tabular-nums; }

/* EN/RU: тексты парами <span class="en">/<span class="ru">, язык в html[lang] (site /js/lang.js) */
html[lang="ru"] .en, html:not([lang="ru"]) .ru { display: none; }