/* OSNOVA · общий слой для страниц B2B и Edra: шрифты, токены, шкала текста.
   Значения — с главной osnovaedu.uz (репозиторий osnova-site: css/tokens.css, base.css, home.css, stub.css).
   Префикс --o- / .o- — чтобы не задеть собственные токены B2B (--ink, --lime) и Edra (--ink, --signal).
   Подключается в <head> раньше стилей страницы: /osnova-ui.css, затем /edra/edra.css. */

/* ── шрифты: те же файлы, что на главной (Onest.woff2 84 084 Б, Unbounded-700.woff2 21 212 Б).
   Главная отдаёт их с access-control-allow-origin: * и cache-control immutable — один файл в кэше на все сайты.
   Имена файлов на главной не меняются: новая версия шрифта — новое имя файла. ── */
@font-face {
  font-family: "Onest";
  src: url("https://osnovaedu.uz/fonts/Onest.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Unbounded";
  src: url("https://osnovaedu.uz/fonts/Unbounded-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF;   /* в файле нет кириллицы: «Edra» всегда латиницей */
}

:root {
  /* цвет: то, что нужно тексту, кнопкам и фокусу (tokens.css) */
  --o-ink: #111218;
  --o-white: #FFFFFF;
  --o-blue: #2A3CFF;
  --o-lime: #D3FE00;
  --o-edra-core: #3140E0;
  --o-edra-navy: #070B3A;
  --o-ink-55: rgba(17, 18, 24, .64);   /* имя с главной; значение в коде .64 */
  --o-ink-12: rgba(17, 18, 24, .12);
  --o-ink-08: rgba(17, 18, 24, .08);
  --o-white-70: rgba(255, 255, 255, .7);
  --o-white-16: rgba(255, 255, 255, .16);
  --o-focus: var(--o-blue);            /* на светлом; на тёмном — лайм, в мире Edra — edra-core */

  /* шрифт */
  --o-font: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --o-font-edra: "Unbounded", var(--o-font);

  /* шкала: плавно от 390 до 1440 px (tokens.css); межстрочный заголовков = кегль + 4 px */
  --o-fs-h1: clamp(40px, calc(40px + 36 * (100vw - 390px) / 1050), 76px);
  --o-lh-h1: clamp(44px, calc(44px + 36 * (100vw - 390px) / 1050), 80px);
  --o-fs-h2: clamp(34px, calc(34px + 22 * (100vw - 390px) / 1050), 56px);
  --o-lh-h2: clamp(38px, calc(38px + 22 * (100vw - 390px) / 1050), 60px);
  --o-fs-h3: clamp(22px, calc(22px + 6 * (100vw - 390px) / 1050), 28px);
  --o-fs-body: clamp(17px, calc(17px + 3 * (100vw - 390px) / 1050), 20px);
  --o-lh-body: clamp(26px, calc(26px + 4 * (100vw - 390px) / 1050), 30px);
  --o-fs-edra: clamp(44px, calc(44px + 44 * (100vw - 390px) / 1050), 88px);

  /* форма */
  --o-radius: 20px;
  --o-radius-sm: 12px;
  --o-radius-xs: 8px;

  /* движение (tokens.css) */
  --o-ease: cubic-bezier(.2, .8, .2, 1);
  --o-t-hover: 200ms;
  --o-t-in: 400ms;
}

/* ── типографика: веса 400 / 500 / 600; Unbounded 700 — только слово «Edra» ── */
.o-h1 { font-family: var(--o-font); font-size: var(--o-fs-h1); line-height: var(--o-lh-h1); font-weight: 600; letter-spacing: -0.03em; text-wrap: balance; }
.o-h2 { font-family: var(--o-font); font-size: var(--o-fs-h2); line-height: var(--o-lh-h2); font-weight: 600; letter-spacing: -0.025em; text-wrap: balance; }
.o-h3 { font-family: var(--o-font); font-size: var(--o-fs-h3); line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; }
.o-card-title { font-size: 19px; line-height: 1.3; font-weight: 600; letter-spacing: -0.015em; }
.o-body { font-size: var(--o-fs-body); line-height: var(--o-lh-body); font-weight: 400; }
.o-text { font-size: 17px; line-height: 26px; font-weight: 400; }
.o-small { font-size: 15px; line-height: 1.45; font-weight: 400; }
.o-meta { font-size: 13px; line-height: 1.4; font-weight: 400; color: var(--o-ink-55); }
.o-muted { color: var(--o-ink-55); }
.o-edra { font-family: var(--o-font-edra); font-weight: 700; letter-spacing: -0.02em; line-height: 1; }

/* ── кнопки: одна система ──
   пилюля 999px; Onest 500; без тени и блика; иконка — стрелка главной «M5 12h14M13 6l6 6-6 6», обводка 2.
   размеры: L 52 / 0 24 / 16px (home.css .dx__cta), M 44 / 0 18 / 15px (home.css .btn), S 40 / 0 16 / 14px. */
.o-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 18px; border: 0; border-radius: 999px;
  font-family: var(--o-font); font-size: 15px; line-height: 1; font-weight: 500; letter-spacing: 0;
  white-space: nowrap; text-decoration: none; cursor: pointer;
  background: var(--o-ink); color: var(--o-white); box-shadow: none;
  transition: background-color var(--o-t-hover) var(--o-ease), color var(--o-t-hover) var(--o-ease), box-shadow var(--o-t-hover) var(--o-ease);
}
.o-btn svg { width: 18px; height: 18px; flex: none; stroke-width: 2; transition: transform var(--o-t-hover) var(--o-ease); }
.o-btn:hover { background: var(--o-blue); color: var(--o-white); }
.o-btn:hover .o-btn__arrow { transform: translateX(3px); }
.o-btn:active { transform: translateY(1px); }
.o-btn[disabled] { opacity: .7; cursor: progress; }
.o-btn--l { height: 52px; padding: 0 24px; font-size: 16px; }
.o-btn--s { height: 40px; padding: 0 16px; font-size: 14px; }
.o-btn--block { width: 100%; }

/* secondary на светлом: белая пилюля с линией ink-12; при наведении линия — ink */
.o-btn--secondary { background: var(--o-white); color: var(--o-ink); box-shadow: inset 0 0 0 1px var(--o-ink-12); }
.o-btn--secondary:hover { background: var(--o-white); color: var(--o-ink); box-shadow: inset 0 0 0 1.5px var(--o-ink); }

/* на тёмном: primary — белая → лайм (home.css), secondary — контур 1.5px белый → белая (stub.css) */
.o-dark { --o-focus: var(--o-lime); }
.o-dark .o-btn, .o-btn--inverse { background: var(--o-white); color: var(--o-ink); }
.o-dark .o-btn:hover, .o-btn--inverse:hover { background: var(--o-lime); color: var(--o-ink); }
.o-dark .o-btn--secondary, .o-btn--line { background: transparent; color: var(--o-white); box-shadow: inset 0 0 0 1.5px var(--o-white); }
.o-dark .o-btn--secondary:hover, .o-btn--line:hover { background: var(--o-white); color: var(--o-ink); box-shadow: inset 0 0 0 1.5px var(--o-white); }

/* signal — одна главная кнопка экрана, только L: пилюля + лаймовый круг 36 со стрелкой */
.o-btn--signal { gap: 12px; padding: 0 8px 0 24px; }
.o-btn__circle { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--o-lime); color: var(--o-ink); transition: background-color var(--o-t-hover) var(--o-ease), color var(--o-t-hover) var(--o-ease), transform var(--o-t-hover) var(--o-ease); }
.o-btn--signal:hover .o-btn__circle { transform: translateX(3px); }
.o-btn--signal:hover .o-btn__circle svg { transform: none; }
.o-dark .o-btn--signal:hover .o-btn__circle, .o-btn--inverse.o-btn--signal:hover .o-btn__circle { background: var(--o-ink); color: var(--o-lime); }

/* ссылка-стрелка (base.css) */
.o-link { display: inline-flex; align-items: center; gap: 10px; padding-block: 9px; margin-block: -9px; font-family: var(--o-font); font-size: 17px; font-weight: 500; color: inherit; text-decoration: none; transition: gap var(--o-t-hover) var(--o-ease); }
.o-link svg { width: 20px; height: 20px; flex: none; transition: transform var(--o-t-hover) var(--o-ease); }
.o-link:hover { gap: 14px; }

/* круглая стрелка 48 (44 на телефоне), home.css */
.o-round { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border: 0; border-radius: 50%; background: var(--o-ink); color: var(--o-white); cursor: pointer; transition: transform var(--o-t-hover) var(--o-ease), background-color var(--o-t-hover) var(--o-ease); }
.o-round svg { width: 20px; height: 20px; }
.o-dark .o-round { background: var(--o-white); color: var(--o-ink); }
@media (hover: hover) { .o-round:hover { transform: translateX(4px); } }
@media (max-width: 767px) { .o-round { width: 44px; height: 44px; } }

/* ── чипы: фильтры и выбор в форме ── */
.o-chip { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--o-white); color: var(--o-ink); box-shadow: inset 0 0 0 1px var(--o-ink-12); font-family: var(--o-font); font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer; transition: background-color var(--o-t-hover) var(--o-ease), color var(--o-t-hover) var(--o-ease), box-shadow var(--o-t-hover) var(--o-ease); }
.o-chip:hover { box-shadow: inset 0 0 0 1.5px var(--o-ink); }
.o-chip[aria-pressed="true"], .o-chip.is-on, input:checked + .o-chip { background: var(--o-ink); color: var(--o-white); box-shadow: none; }
.o-chip--m { height: 44px; padding: 0 18px; font-size: 15px; }

/* ── поле: белое 52, радиус 12, линия внутрь ink-12; фокус — линия 2 px цвета фокуса; ошибка — 2 px #DC2626 ── */
.o-field { display: flex; flex-direction: column; gap: 6px; }
.o-field > label, .o-field__label { font-family: var(--o-font); font-size: 14px; line-height: 1.4; font-weight: 500; color: var(--o-ink); }
.o-input { height: 52px; padding: 0 16px; border: 0; border-radius: var(--o-radius-sm); background: var(--o-white); color: var(--o-ink); box-shadow: inset 0 0 0 1px var(--o-ink-12); font-family: var(--o-font); font-size: 16px; transition: box-shadow var(--o-t-hover) var(--o-ease); }
.o-input::placeholder { color: #9a9b95; }
.o-input:hover { box-shadow: inset 0 0 0 1px var(--o-ink-55); }
.o-input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--o-focus); }
.o-field.is-err .o-input { box-shadow: inset 0 0 0 2px #dc2626; }
.o-field__err { display: none; font-size: 13px; line-height: 1.4; color: #dc2626; }
.o-field.is-err .o-field__err { display: block; }

/* ── фокус и reduced motion (base.css): обводка 2 px с отступом 3 px; цвет — по фону, на котором стоит элемент ── */
.o-scope :focus-visible { outline: 2px solid var(--o-focus); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .o-btn, .o-btn svg, .o-btn__circle, .o-link, .o-link svg, .o-round, .o-chip, .o-input { transition: none; }
  .o-btn:active { transform: none; }
}

/* ── шапка на узком экране (до 1023 px): коды RU UZ EN прямо в шапке, бургер из двух линий, меню на весь экран — как на главной (home.css) ── */
.o-langs { display: none; align-items: center; }
.o-langs a { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 44px; padding: 0 4px; font-family: var(--o-font); font-size: 14px; font-weight: 500; letter-spacing: .02em; color: inherit; text-decoration: none; opacity: .66; transition: opacity var(--o-t-hover) var(--o-ease); }
.o-langs a:hover, .o-langs a[aria-current="true"] { opacity: 1; }
.o-langs a[aria-current="true"]::after { content: ""; position: absolute; left: 50%; bottom: 7px; width: 4px; height: 4px; margin-left: -2px; background: var(--o-blue); }
.o-dark .o-langs a[aria-current="true"]::after, body.is-locked .o-langs a[aria-current="true"]::after { background: var(--o-lime); }
.o-burger { display: none; position: relative; width: 44px; height: 44px; margin-right: -11px; padding: 0; border: 0; border-radius: 12px; background: none; color: inherit; cursor: pointer; }   /* линии встают по правому полю */
.o-burger span { position: absolute; left: 11px; top: 21px; display: block; width: 22px; height: 2px; background: currentColor; transition: transform var(--o-t-hover) var(--o-ease); }
.o-burger span:nth-child(1) { transform: translateY(-4px); }
.o-burger span:nth-child(2) { transform: translateY(4px); }
body.is-locked .o-burger span:nth-child(1) { transform: rotate(45deg); }
body.is-locked .o-burger span:nth-child(2) { transform: rotate(-45deg); }
/* меню: весь экран на ink, ссылки 32/500, внизу почта и Telegram; шапка остаётся сверху (z-index выше), Esc и ловушка фокуса — в скрипте страницы */
.o-mnav { position: fixed; inset: 0; z-index: 45; background: var(--o-ink); color: var(--o-white); --o-focus: var(--o-lime); }
.o-mnav[hidden] { display: none; }
.o-mnav__in { height: 100%; height: 100dvh; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 84px 16px max(24px, env(safe-area-inset-bottom)); overflow: auto; }
.o-mnav__links { display: grid; gap: 6px; }
.o-mnav__links a { padding: 8px 0; font-family: var(--o-font); font-size: 32px; line-height: 1.2; font-weight: 500; letter-spacing: -0.02em; color: inherit; text-decoration: none; }
.o-mnav__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 16px; padding-top: 24px; }
.o-mnav__foot a:not([class]) { padding-block: 9px; margin-block: -9px; font-family: var(--o-font); font-size: 17px; color: inherit; text-decoration: none; }
body.is-locked { overflow: hidden; }
@media (max-width: 1023px) { .o-langs { display: flex; } .o-burger { display: block; } }
@media (prefers-reduced-motion: reduce) { .o-langs a, .o-burger span { transition: none; } }