/* OrgBOS сайт — общий файл токенов тем и шапки. КАНОН.
   Источник: D:\ASM\worklog\2026-10-19-orgbos-site\shared\theme.css (01-SPEC.md, раздел 3).
   В landing\assets\theme.css кладётся байт-в-байт. НЕ ПРАВИТЬ ни одному исполнителю:
   нужна правка — комментарий [ВОПРОС ПО ТЗ] в зонтик, правит архитектор разделом «ИЗМЕНЕНИЕ ТЗ».
   Свои стили каждая дорожка пишет в своих файлах и пользуется только переменными отсюда. */

/* ---------- 0. Шрифт Inter (OFL), свои файлы, без внешних запросов (ИЗМЕНЕНИЕ ТЗ 19.10) ----------
   Файлы кладёт дорожка А в landing/fonts/ (01-SPEC.md, «ИЗМЕНЕНИЕ ТЗ», п.И3). Пока файлов нет —
   работает системный шрифт из --font, вёрстка не ломается. ₽ и ≈ в эти поднаборы не входят и
   рисуются системным шрифтом — это нормально. */
@font-face {
  font-family: "OrgBOS Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/fonts/inter-cyrillic-wght-normal.woff2") format("woff2-variations"),
       url("/fonts/inter-cyrillic-wght-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "OrgBOS Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2-variations"),
       url("/fonts/inter-latin-wght-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;
}

/* ---------- 1. Палитры ---------- */
/* Светлая — по умолчанию без JS и при data-theme="light". */
:root,
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f2ee;            /* фон страницы, тёплый светлый */
  --bg-2: #ebe8e2;          /* фон чередующихся разделов */
  --card: #ffffff;          /* карточки, панели */
  --ink: #141414;           /* основной текст (16,5:1 к --bg) */
  --ink-2: #3a3733;         /* вторичный текст */
  --muted: #5e5952;         /* приглушённый текст, подписи (6,2:1 к --bg) */
  --line: #d9d4cc;          /* линии, рамки */
  --accent: #5b42e4;        /* ЕДИНСТВЕННЫЙ акцент: заливка кнопок, метки, обводки */
  --accent-hover: #4c35d0;  /* наведение на заливку акцента */
  --accent-ink: #4c35d0;    /* акцент для мелкого текста и ссылок (6,9:1 к --bg) */
  --on-accent: #ffffff;     /* текст на заливке акцента (6,3:1) */
  --accent-soft: rgba(91, 66, 228, .10);
  --ok: #17724a;
  --bad: #c62f3a;
  --warn: #9c4d00;
  --frame: #e3dfd8;         /* рамка вокруг слепка кабинета */
  --shadow: 0 20px 50px rgba(40, 30, 20, .12);
  --header-bg: rgba(244, 242, 238, .86);
}

/* Тёмная — основная. Без JS включается по системной настройке, с JS — по data-theme.
   Два блока ниже одинаковы по значениям: первый работает без JS, второй — после выбора в шапке. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #121110; --bg-2: #1a1918; --card: #1e1d1b;
    --ink: #ece9e3; --ink-2: #c9c4bc; --muted: #a29c93; --line: #2e2d2a;
    --accent: #5b42e4; --accent-hover: #6a53ee; --accent-ink: #a597ff; --on-accent: #ffffff;
    --accent-soft: rgba(165, 151, 255, .12);
    --ok: #3ddc84; --bad: #ff6b6b; --warn: #f0a04b;
    --frame: #2a2927; --shadow: 0 30px 80px rgba(0, 0, 0, .6);
    --header-bg: rgba(18, 17, 16, .82);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121110; --bg-2: #1a1918; --card: #1e1d1b;
  --ink: #ece9e3; --ink-2: #c9c4bc; --muted: #a29c93; --line: #2e2d2a;
  --accent: #5b42e4; --accent-hover: #6a53ee; --accent-ink: #a597ff; --on-accent: #ffffff;
  --accent-soft: rgba(165, 151, 255, .12);
  --ok: #3ddc84; --bad: #ff6b6b; --warn: #f0a04b;
  --frame: #2a2927; --shadow: 0 30px 80px rgba(0, 0, 0, .6);
  --header-bg: rgba(18, 17, 16, .82);
}

/* ---------- 2. Шрифт, шкала, отступы ---------- */
:root {
  /* Inter со своего домена (раздел 0), дальше системный: кириллица везде.
     Веса: 400 / 600 / 700, для H1 и H2 — 800 (Inter переменный, рисует любой вес). */
  --font: "OrgBOS Inter", "Segoe UI Variable Display", "Segoe UI", -apple-system, BlinkMacSystemFont,
          "SF Pro Display", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", monospace;
  --fs-hero: clamp(40px, 6.2vw, 84px);   /* H1 первого экрана */
  --fs-h2: clamp(32px, 4.6vw, 64px);     /* заголовки разделов */
  --fs-h3: clamp(20px, 1.8vw, 24px);
  --fs-lead: clamp(17px, 1.5vw, 20px);   /* подзаголовки */
  --fs-body: 17px;
  --fs-small: 14px;
  --fs-kick: 13px;                       /* надзаголовок «01 · Как внедряем» */
  --fs-stat: clamp(40px, 5vw, 64px);     /* большие цифры */
  --lh-tight: 1;
  --lh-body: 1.55;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 40px; --sp-7: 64px;
  --section-y: clamp(64px, 10vw, 140px); /* вертикальный отступ раздела */
  --container: 1200px;
  --gutter: 16px;
  --radius-sm: 12px; --radius: 18px; --radius-lg: 28px; --radius-pill: 999px;
  --header-h: 64px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: .45s;
}
@media (min-width: 768px) { :root { --gutter: 24px; } }

/* ---------- 3. База ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: var(--fs-body); line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
h1, h2 { font-weight: 800; letter-spacing: -.04em; line-height: var(--lh-tight); }
h3 { font-weight: 600; font-size: var(--fs-h3); line-height: 1.25; }
img, svg, video, iframe { max-width: 100%; }
a { color: var(--accent-ink); }
:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 3px; border-radius: 6px; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.only-narrow { display: none; }
@media (max-width: 559px) { .only-wide { display: none; } .only-narrow { display: inline; } }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Надзаголовок раздела: <p class="kick"><span>01</span> · Как внедряем</p> */
.kick { font-size: var(--fs-kick); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.kick span { color: var(--accent-ink); }

/* Кнопки */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 48px; padding: 0 22px; border-radius: var(--radius-pill); border: 1px solid transparent;
  font: 600 16px/1 var(--font); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .15s var(--ease), background-color .15s var(--ease), border-color .15s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink-2); }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: 15px; }

/* «Пропустить ↓» под тяжёлыми блоками: <a class="skip-link" href="#id-следующего-раздела">Пропустить ↓</a> */
.skip-link { display: inline-block; margin-top: var(--sp-4); font-size: var(--fs-small); color: var(--muted); text-decoration: none; }
.skip-link:hover { color: var(--ink); }

/* ---------- 4. Шапка (разметка — shared/header.html; одна и та же на / и /demo/) ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50; height: var(--header-h);
  background: var(--header-bg); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header__in { height: 100%; display: flex; align-items: center; gap: var(--sp-5); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 19px; letter-spacing: -.01em; }
.brand svg { width: 28px; height: 28px; flex: none; color: var(--accent-ink); }
.site-nav { display: flex; gap: var(--sp-5); }
.site-nav a { color: var(--ink-2); text-decoration: none; font-size: 15px; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); }
.site-header__right { margin-left: auto; display: flex; align-items: center; gap: var(--sp-3); }
.site-header__login { color: var(--ink-2); text-decoration: none; font-size: 15px; }
.theme-switch { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--line); border-radius: var(--radius-pill); }
.theme-switch button {
  min-width: 32px; height: 30px; padding: 0 10px; border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--muted); font: 600 13px/1 var(--font); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.theme-switch button svg { width: 16px; height: 16px; }
.theme-switch button[aria-pressed="true"] { background: var(--accent-soft); color: var(--ink); }
@media (max-width: 1099px) { .site-nav { display: none; } }   /* И8, решение ведущего 19.10: на 900–1099 меню не помещалось */
@media (max-width: 559px) {
  .site-header__login { display: none; }
  .theme-switch button[data-theme-mode="auto"] { display: none; }
  .site-header__in { gap: var(--sp-2); }
  .site-header__right { gap: var(--sp-2); }
  .brand { font-size: 17px; }
}

/* ---------- 5. Подвал (разметка — shared/footer.html) ---------- */
.site-footer { border-top: 1px solid var(--line); padding: var(--sp-6) 0; color: var(--muted); font-size: var(--fs-small); }
.site-footer__in { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-6); justify-content: space-between; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); }
.site-footer a { color: var(--ink-2); }

/* ---------- 6. Меньше движения ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}