/* ============================================================
   theme.css – дизайн-токены Design.md (светлая и тёмная темы)
   ============================================================ */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/inter-variable.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/inter-variable-italic.woff2") format("woff2");
}

:root {
  /* Палитра (светлая тема) */
  --vp-c-brand-1: #3451b2;
  --vp-c-brand-2: #3a5ccc;
  --vp-c-brand-3: #3e63dd;
  --vp-c-bg: #ffffff;
  --vp-c-bg-alt: #f6f6f7;
  --vp-c-bg-soft: #f6f6f7;
  --vp-c-bg-elv: #ffffff;
  --vp-c-divider: #e2e2e3;
  --vp-c-border: #c2c2c4;
  --vp-c-border-card: #e5e7eb;
  --vp-c-text-1: #3c3c43;
  --vp-c-text-2: rgba(60, 60, 67, .78);
  --vp-c-text-3: rgba(60, 60, 67, .56);
  --vp-c-green-1: #18794e;
  --vp-c-yellow-1: #915930;
  --vp-c-red-1: #b8272c;
  --vp-c-error: #d92d20;

  /* Мягкие заливки custom-block */
  --vp-c-default-soft: rgba(142, 150, 170, .14);
  --vp-c-brand-soft: rgba(100, 108, 255, .14);
  --vp-c-tip-soft: rgba(16, 185, 129, .14);
  --vp-c-warning-soft: rgba(234, 179, 8, .14);
  --vp-c-danger-soft: rgba(244, 63, 94, .14);

  /* Инлайн-код */
  --vp-code-color: var(--vp-c-brand-1);
  --vp-code-bg: var(--vp-c-default-soft);

  /* Директивы версий */
  --vp-ver-added: #10b981;
  --vp-ver-changed: #d97706;
  --vp-ver-removed: #f43f5e;

  /* Токены API-сигнатур */
  --sig-keyword: #9333ea;
  --sig-func: #2563eb;
  --sig-namespace: #64748b;
  --sig-param: #0e7490;
  --sig-operator: #64748b;
  --sig-default: #c2410c;
  --sig-type: #0f766e;

  /* Типографика */
  --vp-font-family-base: "Inter", ui-sans-serif, system-ui, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --vp-font-family-mono: ui-monospace, "Menlo", "Monaco", "Consolas",
    "Liberation Mono", "Courier New", monospace;

  /* Геометрия */
  --vp-nav-height: 64px;
  --vp-sidebar-width: 272px;
  --vp-content-max-width: 688px;
  --vp-layout-max-width: 1440px;

  /* Отступы под «чёлку» и жестовую полосу iPhone (viewport-fit=cover) */
  --vp-safe-top: env(safe-area-inset-top, 0px);
  --vp-safe-bottom: env(safe-area-inset-bottom, 0px);
  --vp-safe-left: env(safe-area-inset-left, 0px);
  --vp-safe-right: env(safe-area-inset-right, 0px);

  /* Тени (минимальные) */
  --vp-shadow-1: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .06);

  color-scheme: light;
}

html.dark {
  --vp-c-brand-1: #a8b1ff;
  --vp-c-brand-2: #5c73e7;
  --vp-c-brand-3: #3e63dd;
  --vp-c-bg: #1b1b1f;
  --vp-c-bg-alt: #161618;
  --vp-c-bg-soft: #202127;
  --vp-c-bg-elv: #202127;
  --vp-c-divider: #2e2e32;
  --vp-c-border: #3c3f44;
  --vp-c-border-card: #2e2e32;
  --vp-c-text-1: rgba(255, 255, 245, .86);
  --vp-c-text-2: rgba(235, 235, 245, .6);
  --vp-c-text-3: rgba(235, 235, 245, .38);
  --vp-c-green-1: #3dd68c;
  --vp-c-yellow-1: #f9b44e;
  --vp-c-red-1: #f66f81;
  --vp-c-error: #f66f81;

  --sig-keyword: #c792ea;
  --sig-func: #82aaff;
  --sig-namespace: #9ca3af;
  --sig-param: #7dd3fc;
  --sig-operator: #9ca3af;
  --sig-default: #f78c6c;
  --sig-type: #5eead4;

  color-scheme: dark;
}

/* ---------- Базовый reset и типографика ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-padding-top: calc(var(--vp-nav-height) + 24px);
  scroll-behavior: smooth;
}

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

body {
  margin: 0;
  font-family: var(--vp-font-family-base);
  font-size: 16px;
  line-height: 28px;
  font-weight: 400;
  color: var(--vp-c-text-1);
  background: var(--vp-c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; }

/* Компактная шапка на мобильных: все привязанные к --vp-nav-height
   отступы (sticky-сайдбар, scroll-padding) пересчитываются сами */
@media (max-width: 959px) {
  :root { --vp-nav-height: 56px; }
}

/* Фон не прокручивается, пока открыт мобильный сайдбар (класс ставит app.js) */
body.vp-scroll-lock { overflow: hidden; }