/* Общая основа сайта: шрифт, цвета брендбука, шапка, подвал, кнопки.
   Палитра — брендбук Azia Expert, с. 13. Aeonik Pro коммерческий, пока нет
   лицензии вместо него Onest (OFL). */
@font-face { font-family: 'Onest'; font-weight: 100 900; font-display: swap; src: url('/fonts/onest-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Onest'; font-weight: 100 900; font-display: swap; src: url('/fonts/onest-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20BD, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --blue: #3B2EA4; --blue-deep: #2C2180; --phlox: #E52EF8; --lavender: #E2C1FF;
  --frost: #FEFEFE; --black: #020202;
  --ink-2: #55526b; --line: #e4e0f0; --mist: #f5f3fb;
  /* Роли цветов: тема меняет только их, см. css/themes/ */
  --page-bg: var(--frost); --page-ink: var(--black); --link: var(--blue);
  --hero-bg: var(--blue); --hero-ink: var(--frost); --hero-sub: var(--lavender);
  --btn-bg: var(--frost); --btn-ink: var(--blue); --btn-hover: var(--lavender);
  --btn2-ink: var(--frost); --btn2-line: rgba(254,254,254,.45);
  --rc-bg: var(--frost); --rc-ink: var(--black); --rc-sub: var(--ink-2); --rc-line: var(--line); --rc-total: var(--phlox);
  --sec-alt: var(--mist); --table-bg: var(--frost); --pro-col: #efeafd; --step: var(--blue); --ok-ink: var(--good);
  --grad: linear-gradient(115deg, #3B2EA4, #E52EF8); --go-bg: linear-gradient(115deg, #3B2EA4, #9A2DDB);
  --final-bg: var(--blue); --final-ink: var(--frost); --final-sub: var(--lavender);
  --bar-bg: var(--black); --bar-ink: var(--frost); --bar-sub: var(--lavender); --bar-line: rgba(254,254,254,.4);
  --foot-bg: var(--black); --foot-ink: #bdb8cc; --foot-link: var(--lavender);
  --good: #0e7d4c; --mid: #8f5f00; --bad: #c02f2a;
  --font: 'Onest', Arial, sans-serif;
  --gutter: clamp(16px, 5vw, 72px);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font); color: var(--page-ink); background: var(--page-bg); line-height: 1.5; font-size: 17px; }
img { max-width: 100%; display: block; }
a { color: var(--link); }
:focus-visible { outline: 3px solid var(--phlox); outline-offset: 2px; border-radius: 4px; }
.hidden { display: none !important; }

.btn-main, .btn-line {
  display: inline-block; padding: 15px 26px; border-radius: 4px; font: 500 16px/1.2 var(--font);
  text-decoration: none; cursor: pointer; border: 2px solid transparent;
}
.btn-main { background: var(--btn-bg); color: var(--btn-ink); }
.btn-main:hover { background: var(--btn-hover); }
.btn-line { color: var(--btn2-ink); border-color: var(--btn2-line); }
.btn-line:hover { border-color: var(--btn2-ink); }
[aria-disabled="true"] { cursor: not-allowed; }

/* Шапка рабочих страниц */
.topbar { display: flex; align-items: center; gap: 28px; padding: 14px var(--gutter); background: var(--bar-bg); color: var(--bar-ink); flex-wrap: wrap; }
.topbar .logo img { height: 22px; width: auto; }
.topbar nav { display: flex; gap: 20px; flex-wrap: wrap; }
.topbar nav a { color: var(--bar-sub); text-decoration: none; font-size: 15px; font-weight: 500; }
.topbar nav a:hover, .topbar nav a[aria-current] { color: var(--bar-ink); }
.topbar .who { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 14px; color: var(--bar-sub); }
.topbar .who button { background: none; border: 1px solid var(--bar-line); color: var(--bar-ink); border-radius: 8px; padding: 6px 12px; font: 500 14px var(--font); cursor: pointer; }

.foot { background: var(--foot-bg); color: var(--foot-ink); padding: 36px var(--gutter); font-size: 14px; }
.foot-in { display: flex; gap: 24px 40px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.foot a { color: var(--foot-link); }
.foot p { margin: 14px 0 0; max-width: 70ch; }
.foot img { height: 20px; width: auto; }

/* Текстовые страницы: политика, условия, API */
.doc { max-width: 760px; margin: 0 auto; padding: 48px var(--gutter) 80px; }
.doc h1 { font-size: clamp(30px, 5vw, 42px); line-height: 1.1; letter-spacing: -.02em; margin: 0 0 16px; }
.doc h2 { font-size: 22px; margin: 36px 0 8px; }
.doc pre { background: var(--black); color: var(--frost); padding: 16px; border-radius: 8px; overflow-x: auto; font-size: 14px; line-height: 1.5; }
.doc code { font-size: .92em; }
.doc .draft { background: #fff5d9; border-left: 4px solid #d8a400; padding: 12px 16px; margin: 0 0 24px; }
.doc table { border-collapse: collapse; width: 100%; font-size: 15px; }
.doc td, .doc th { border-bottom: 1px solid var(--line); padding: 8px 8px 8px 0; text-align: left; vertical-align: top; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }