/* Токены темы и минимальная базовая настройка поверх Bootstrap. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --paper: #fbfbf9;
  --surface: #ffffff;
  --surface-2: #f4f3f0;
  --ink: #17161a;
  --ink-2: #56545e;
  --ink-3: #8c8a94;
  --line: #eceae5;
  --line-2: #e1dfd9;
  --accent: #7c5cff;
  --accent-ink: #5a37f0;
  --accent-deep: #4a29d6;
  --accent-tint: #f0ecff;
  --accent-tint2: #e5deff;
  --on-accent: #ffffff;
  --positive: #1f9d63;
  --info: #2e6fcb;
  --info-tint: #e8f0fc;
  --inverse-bg: #17161a;
  --inverse-text: #ffffff;
  --font-head: "Lora", Georgia, serif;
  --font-body: "Golos Text", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --type-page-title: clamp(32px, 4.6vw, 50px);
  --type-section-title: clamp(28px, 3vw, 30px);
  --type-subheading: clamp(22px, 2.4vw, 24px);
  --type-component-title: 22px;
  --type-body: 16px;
  --type-lead: 20px;
  --type-caption: 14px;
  --type-quote: 25px;
  --type-code: 14px;
  --line-page-title: 1.08;
  --line-heading: 1.18;
  --line-body: 1.5;
  --line-lead: 1.5;
  --line-caption: 1.45;
  --line-quote: 1.4;
  --line-code: 1.7;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-pill: 999px;
  --media-radius: var(--r-md);
  --shadow-sm: 0 1px 2px rgba(23, 22, 26, 0.04), 0 1px 1px rgba(23, 22, 26, 0.03);
  --shadow-md: 0 6px 24px -8px rgba(23, 22, 26, 0.12), 0 2px 6px -3px rgba(23, 22, 26, 0.08);
  color-scheme: light;
}

html[data-theme="dark"] {
  --paper: #121119;
  --surface: #1a1822;
  --surface-2: #24212d;
  --ink: #f2efea;
  --ink-2: #b4afbc;
  --ink-3: #837e8c;
  --line: #2a2734;
  --line-2: #393345;
  --accent: #7c5cff;
  --accent-ink: #b7a2ff;
  --accent-deep: #c9b8ff;
  --accent-tint: rgba(124, 92, 255, 0.16);
  --accent-tint2: rgba(124, 92, 255, 0.28);
  --positive: #36c088;
  --info: #5f9bec;
  --info-tint: #15233a;
  --inverse-bg: #221e2e;
  --inverse-text: #f4f2ff;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 24px -8px rgba(0, 0, 0, 0.55), 0 2px 6px -3px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: var(--line-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background 0.3s ease, color 0.3s ease;
}

.legal-page {
  max-width: 760px;
  padding-top: clamp(64px, 8vw, 112px);
  padding-bottom: clamp(80px, 10vw, 144px);
}

.legal-page h1 {
  margin-bottom: 24px;
  font-family: var(--font-head);
  font-size: var(--type-page-title);
  line-height: var(--line-heading);
}

.legal-page p {
  max-width: 680px;
  font-size: var(--type-lead);
  line-height: 1.55;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--ink);
  font-family: var(--font-head);
  font-weight: 600;
}

pre,
code,
kbd,
samp {
  font-family: var(--font-mono);
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: var(--accent-ink);
  text-decoration: none;
}

a:hover {
  color: var(--accent-deep);
}

::selection {
  background: var(--accent-tint2);
  color: var(--ink);
}

.page-shell {
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
}

.tp-container {
  max-width: 1120px;
}

.tp-article-container {
  max-width: 760px;
}

.min-w-0 {
  min-width: 0;
}

.cursor-pointer {
  cursor: pointer;
}

@media (max-width: 680px) {
  :root {
    --type-lead: 18px;
    --type-quote: 23px;
  }

  .responsive-gutter {
    padding-right: 20px !important;
    padding-left: 20px !important;
  }
}