/* ============================================================
   Forge — тёмная «Ось» с горячей палитрой (oklch + hex fallback)
   Scope: main.article-main.theme-os-dark
   Дизайн: Кира (designer agent), 2026-05-18
   ============================================================ */

body:has(main.theme-os-dark) {
  background: #1A1714;
  background: oklch(0.16 0.012 60);
}

main.article-main.theme-os-dark {
  /* ---- Нейтралы ---- */
  --bg-page:        oklch(0.16 0.012 60);
  --bg-surface:     oklch(0.20 0.013 60);
  --bg-elevated:    oklch(0.25 0.014 60);
  --bg-sunken:      oklch(0.13 0.010 60);

  --fg-primary:     oklch(0.94 0.012 75);
  --fg-secondary:   oklch(0.78 0.015 70);
  --fg-muted:       oklch(0.62 0.012 65);

  --border-soft:    oklch(0.30 0.014 60);
  --border-strong:  oklch(0.40 0.016 60);

  /* ---- Горячие акценты ---- */
  --accent-straw:   oklch(0.86 0.13 92);
  --accent-solar:   oklch(0.78 0.17 65);
  --accent-flame:   oklch(0.68 0.20 45);
  --accent-ember:   oklch(0.55 0.18 30);
  --accent-coal:    oklch(0.45 0.12 35);

  --link:           var(--accent-solar);
  --link-hover:     var(--accent-straw);

  /* ---- Типографика ---- */
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-meta: clamp(0.75rem, 0.72rem + 0.15vw, 0.81rem);
  --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.13rem);
  --fs-lead: clamp(1.13rem, 1.05rem + 0.4vw, 1.31rem);
  --fs-h3:   clamp(1.31rem, 1.20rem + 0.55vw, 1.56rem);
  --fs-h2:   clamp(1.69rem, 1.45rem + 1.2vw, 2.25rem);
  --fs-h1:   clamp(2.25rem, 1.85rem + 2vw, 3.5rem);
  --fs-stat: clamp(2rem, 1.6rem + 2vw, 3rem);

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px;

  background: var(--bg-page);
  color: var(--fg-primary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-feature-settings: 'cv11';
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-9);
}

/* ============ Breadcrumbs (выше .article-content) ============ */
main.theme-os-dark .breadcrumbs { color: var(--fg-muted); font-size: var(--fs-meta); }
main.theme-os-dark .breadcrumbs a { color: var(--fg-secondary); }
main.theme-os-dark .breadcrumbs a:hover { color: var(--accent-solar); }

/* ============ Текст ============ */
main.theme-os-dark p { max-width: 68ch; margin: 0 0 1.25em; color: var(--fg-primary); }
main.theme-os-dark a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .15s, text-decoration-thickness .15s;
}
main.theme-os-dark a:hover {
  color: var(--link-hover);
  text-decoration-thickness: 2px;
}
main.theme-os-dark strong { color: var(--fg-primary); font-weight: 600; }
main.theme-os-dark em { font-style: italic; color: var(--fg-secondary); }

/* ============ Заголовки ============ */
main.theme-os-dark h1,
main.theme-os-dark .article-content h1 {
  font-size: var(--fs-h1);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 var(--sp-5);
  color: var(--fg-primary);
}

main.theme-os-dark h2 {
  font-size: var(--fs-h2);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: var(--sp-8) 0 var(--sp-5);
  color: var(--accent-solar);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border-soft);
}
main.theme-os-dark h3 {
  font-size: var(--fs-h3);
  line-height: 1.25;
  font-weight: 600;
  margin: var(--sp-6) 0 var(--sp-4);
  color: var(--fg-primary);
}

/* Категория (kicker) */
main.theme-os-dark .article-content > p:first-child {
  font-family: var(--font-mono);
  color: var(--accent-solar) !important;
  letter-spacing: 0.1em;
}

/* Мета — дата/чтение/просмотры */
main.theme-os-dark .article-meta {
  color: var(--fg-muted) !important;
  font-size: var(--fs-meta);
  font-family: var(--font-mono);
}

/* ============ Lead ============ */
main.theme-os-dark .lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--fg-secondary);
  max-width: 65ch;
  margin: 0 0 var(--sp-7);
  font-weight: 400;
}
main.theme-os-dark .lead strong { color: var(--accent-straw); font-weight: 500; }

/* ============ Blockquote ============ */
main.theme-os-dark blockquote {
  margin: var(--sp-6) 0;
  padding: var(--sp-5) var(--sp-6);
  background: var(--bg-elevated);
  border-left: 3px solid var(--accent-flame);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-style: italic;
  font-size: 1.13em;
  color: var(--fg-secondary);
}
main.theme-os-dark blockquote p:last-child { margin-bottom: 0; }
main.theme-os-dark blockquote em { color: var(--accent-straw); }

/* ============ Code ============ */
main.theme-os-dark code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-sunken);
  color: var(--accent-straw);
  padding: 2px 6px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-soft);
}
main.theme-os-dark pre {
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  overflow-x: auto;
  font-size: 0.92em;
  line-height: 1.55;
  margin: var(--sp-6) 0;
}
main.theme-os-dark pre code {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--fg-primary);
}

/* ============ Stat-row ============ */
main.theme-os-dark .stat-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  margin: var(--sp-6) 0;
}
@media (min-width: 600px)  { main.theme-os-dark .stat-row { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 900px)  { main.theme-os-dark .stat-row { grid-template-columns: repeat(4, minmax(0,1fr)); } }

main.theme-os-dark .stat-box {
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  min-width: 0;
}
main.theme-os-dark .stat-box__value {
  font-size: var(--fs-stat);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--accent-flame);
  font-family: var(--font-mono);
  font-feature-settings: 'tnum';
  margin-bottom: var(--sp-2);
}
main.theme-os-dark .stat-box__label {
  font-size: var(--fs-meta);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
  font-weight: 500;
}

/* ============ Callouts ============ */
main.theme-os-dark [class*="callout--"] {
  background: var(--bg-surface);
  border-left: 3px solid var(--border-strong);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--sp-5);
  margin: var(--sp-6) 0;
  color: var(--fg-primary);
}
main.theme-os-dark [class*="callout--"] p:last-child { margin-bottom: 0; }
main.theme-os-dark [class*="callout--"] h3 { margin-top: 0; }
main.theme-os-dark .callout--success { border-left-color: var(--accent-straw); }
main.theme-os-dark .callout--warning { border-left-color: var(--accent-flame); }
main.theme-os-dark .callout--info    { border-left-color: var(--accent-solar); }
main.theme-os-dark .callout--danger  { border-left-color: var(--accent-ember); }

/* Info-box (legacy) */
main.theme-os-dark .info-box,
main.theme-os-dark .info-box-highlight {
  background: var(--bg-surface);
  border-left: 3px solid var(--accent-solar);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--sp-5);
  margin: var(--sp-6) 0;
  color: var(--fg-primary);
}

/* ============ Tables ============ */
main.theme-os-dark .overflow-x-auto {
  overflow-x: auto;
  margin: var(--sp-6) 0;
  border-radius: var(--r-md);
  border: 1px solid var(--border-soft);
}
main.theme-os-dark .comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95em;
  background: var(--bg-page);
}
main.theme-os-dark .comparison-table th {
  text-align: left;
  padding: var(--sp-4);
  font-size: var(--fs-meta);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
  color: var(--fg-muted);
  border-bottom: 1px solid var(--border-strong);
  background: var(--bg-surface);
  white-space: nowrap;
}
main.theme-os-dark .comparison-table td {
  padding: var(--sp-4);
  border-bottom: 1px solid var(--border-soft);
  vertical-align: top;
  color: var(--fg-primary);
}
main.theme-os-dark .comparison-table tr:nth-child(even) td { background: var(--bg-surface); }
main.theme-os-dark .comparison-table tr:hover td { background: var(--bg-elevated); }
main.theme-os-dark .comparison-table tr:last-child td { border-bottom: 0; }

/* ============ FAQ ============ */
main.theme-os-dark .faq-list { margin: var(--sp-6) 0; }
main.theme-os-dark .faq-item { border-bottom: 1px solid var(--border-soft); }
main.theme-os-dark .faq-item:first-child { border-top: 1px solid var(--border-soft); }
main.theme-os-dark .faq-question {
  width: 100%;
  background: none;
  border: 0;
  padding: var(--sp-5) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  font: inherit;
  font-size: 1.06em;
  font-weight: 500;
  color: var(--fg-primary);
  text-align: left;
  cursor: pointer;
  min-height: 44px;
  transition: color .15s;
}
main.theme-os-dark .faq-question:hover { color: var(--accent-solar); }
main.theme-os-dark .faq-toggle {
  flex: 0 0 24px;
  width: 24px; height: 24px;
  color: var(--accent-solar);
  font-size: 24px;
  line-height: 1;
  transition: transform .25s;
  display: flex; align-items: center; justify-content: center;
}
main.theme-os-dark .faq-item.open .faq-toggle { transform: rotate(45deg); }
main.theme-os-dark .faq-answer {
  max-height: 0;
  overflow: hidden;
  color: var(--fg-secondary);
  transition: max-height .3s ease, padding .3s ease;
}
main.theme-os-dark .faq-item.open .faq-answer {
  max-height: 2000px;
  padding: 0 0 var(--sp-5);
}

/* ============ Price ============ */
main.theme-os-dark .price {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum';
  color: var(--accent-flame);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ============ Hero / images ============ */
main.theme-os-dark .article-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  border: 1px solid var(--border-soft);
  display: block;
}
main.theme-os-dark figure { margin: var(--sp-6) 0; }
main.theme-os-dark figcaption {
  font-size: var(--fs-meta);
  color: var(--fg-muted);
  margin-top: var(--sp-3);
  text-align: center;
}

/* ============ CTA-блок (override стандартного зелёного градиента) ============ */
main.theme-os-dark .article-cta {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--r-xl) !important;
  padding: var(--sp-7) var(--sp-6) !important;
  color: var(--fg-primary) !important;
}
main.theme-os-dark .article-cta h2 {
  color: var(--fg-primary) !important;
  border-top: 0 !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}
main.theme-os-dark .article-cta p {
  color: var(--fg-secondary) !important;
}
main.theme-os-dark .article-cta a {
  background: var(--accent-flame) !important;
  color: var(--bg-page) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: background .15s, transform .15s;
}
main.theme-os-dark .article-cta a:hover {
  background: var(--accent-ember) !important;
  color: var(--fg-primary) !important;
  transform: translateY(-1px);
}

/* ============ Списки ============ */
main.theme-os-dark ul, main.theme-os-dark ol {
  padding-left: var(--sp-5);
  margin: 0 0 1.25em;
  color: var(--fg-primary);
}
main.theme-os-dark li { margin-bottom: var(--sp-2); }
main.theme-os-dark ul li::marker { color: var(--accent-flame); }
main.theme-os-dark ol li::marker { color: var(--accent-solar); font-family: var(--font-mono); }

/* ============ Selection ============ */
main.theme-os-dark ::selection {
  background: var(--accent-flame);
  color: var(--bg-page);
}

/* ============ A11y focus ============ */
main.theme-os-dark a:focus-visible,
main.theme-os-dark button:focus-visible,
main.theme-os-dark .faq-question:focus-visible {
  outline: 2px solid var(--accent-straw);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ============ Related (нижняя секция «Читайте также») ============ */
body:has(main.theme-os-dark) section[style*="padding:48px 0 80px"] {
  background: oklch(0.13 0.010 60) !important;
}
body:has(main.theme-os-dark) section[style*="padding:48px 0 80px"] h2 {
  color: oklch(0.94 0.012 75) !important;
}
body:has(main.theme-os-dark) section[style*="padding:48px 0 80px"] a[href^="/blog/"] {
  background: oklch(0.20 0.013 60) !important;
  border-color: oklch(0.30 0.014 60) !important;
  color: oklch(0.94 0.012 75) !important;
}
body:has(main.theme-os-dark) section[style*="padding:48px 0 80px"] a[href^="/blog/"] h3 {
  color: oklch(0.94 0.012 75) !important;
}
body:has(main.theme-os-dark) section[style*="padding:48px 0 80px"] a[href^="/blog/"] span {
  color: oklch(0.78 0.17 65) !important;
}