/* Значення кольорів — з docs/design/system/bgshelf.css (світла тема — .bgs,
   темна — .bgs--dk). Токен-генератор не чіпаємо: тут лише копія трьох значень. */
:root {
  --primary: #C9452F; /* з bgshelf.css */
  --text: #2F3340;    /* з bgshelf.css */
  --bg: #FFFFFF;      /* з bgshelf.css */
  --muted: color-mix(in srgb, var(--text) 64%, var(--bg));
  --line: color-mix(in srgb, var(--text) 10%, var(--bg));
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary: #F58A73; /* з bgshelf.css, .bgs--dk */
    --text: #E8E9ED;    /* з bgshelf.css, .bgs--dk */
    --bg: #121316;      /* з bgshelf.css, .bgs--dk */
  }
}

html {
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.55;
}

body {
  margin: 0 auto;
  max-width: 42rem;
  padding: 16px;
}

a { color: var(--primary); }

.lang-switch {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.9rem;
}

.lang-switch [aria-current] { color: var(--text); font-weight: 600; }

h1 { font-size: 1.75rem; line-height: 1.25; }
h2 { font-size: 1.3rem; margin-top: 2rem; }
h3 { font-size: 1.1rem; margin-top: 1.5rem; }

code {
  background: var(--line);
  padding: 0 0.25em;
  border-radius: 4px;
  overflow-wrap: anywhere;
}

main { overflow-wrap: break-word; }