/**
 * Привязка компонентов main/каталога к токенам темы (перекрывает жёсткие цвета в legacy CSS).
 * Работает с /api/site/theme.css — без отдельного [data-color-mode].
 */

/* Scrollbar */
* {
  scrollbar-color: var(--color-border-default) var(--color-bg-page);
}

::-webkit-scrollbar-track {
  background: var(--color-bg-page);
}

::-webkit-scrollbar-thumb {
  background: var(--color-border-default);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-accent);
}

::-webkit-scrollbar-corner {
  background: var(--color-bg-page);
}

/* Layout */
.sidebar,
.sidebar-header {
  background: var(--color-bg-page);
}

.sidebar-toggle:hover,
.category-header:hover,
.sidebar-item:hover {
  background: var(--color-bg-surface-muted);
}

.category-header.active {
  background: var(--color-accent-soft);
}

.sidebar-item.active,
.nav-item.active {
  background: var(--color-bg-surface-muted);
  color: var(--color-accent);
}

/* Toolbar & search */
.toolbar {
  background: color-mix(in srgb, var(--color-bg-page) 94%, transparent);
}

.sort-select,
.search-input {
  background: var(--input-bg);
  color: var(--color-text-primary);
  border-color: var(--color-border-default);
}

.view-btn.active {
  background: var(--color-accent-soft);
}

/* Cards & stats */
.stat-card {
  background: var(--color-bg-surface-muted);
}

.stat-value,
.stat-label {
  color: var(--color-text-primary);
}

.stat-label {
  color: var(--color-text-muted);
}

.project-card {
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
}

/* Table & compact */
.projects-table th:hover {
  background: var(--color-bg-surface-muted);
}

.projects-table tr:hover {
  background: var(--color-bg-surface-muted);
}

.compact-item {
  background: var(--color-bg-surface);
}

.compact-item:hover {
  background: var(--color-bg-surface-muted);
}

/* Panels */
.right-sidebar {
  background: var(--color-bg-page);
}

.mobile-category-bar {
  background: var(--color-bg-page);
}

.mobile-category-btn.active {
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

/* Modal */
.modal-content {
  background-color: var(--color-bg-surface);
  color: var(--color-text-primary);
}

.modal-close:hover {
  color: var(--color-text-primary);
}

/* Tags & filters */
.tech-tag {
  background: var(--color-bg-surface-muted);
  color: var(--color-text-secondary);
}

.filter-btn.active {
  color: var(--color-on-accent, var(--color-bg-page));
}

/* Buttons */
.btn-nvidia,
.btn-nvidia-sm {
  color: var(--color-text-primary);
}

/* Footer */
.footer {
  background: var(--color-bg-page);
  border-color: var(--color-border-default);
  color: var(--color-text-muted);
}

/* Loading */
.loading-spinner {
  color: var(--color-text-muted);
}

/* Catalog (non-shadow) */
.project-card--catalog,
.featured-strip-card {
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  border-color: var(--color-border-default);
}

.project-card--catalog .project-card-name {
  color: var(--color-text-primary);
}

.project-card--catalog .project-card-desc,
.project-card-desc--rich .desc-rich-p,
.project-card-desc--rich .desc-rich-lead {
  color: var(--color-text-secondary);
}

.project-card-desc--rich .desc-rich-h {
  color: var(--color-text-primary);
}

.project-card-desc--rich .desc-rich-flow > li {
  color: var(--color-text-secondary);
  border-color: var(--color-border-default);
  background: color-mix(in srgb, var(--color-bg-surface-muted) 85%, transparent);
}

.project-card-desc--rich .desc-rich-sub {
  color: var(--color-text-muted);
}

.catalog-tag-chip {
  border-color: var(--color-border-default);
  color: var(--color-text-secondary);
  background: var(--color-bg-surface);
}

.catalog-tag-chip.is-active {
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
  border-color: var(--color-accent);
}

.featured-strip-title {
  color: var(--color-text-secondary);
}

/* Hero section */
.hero-section {
  border-bottom-color: var(--color-border-default);
}

.hero-section .hero-description {
  color: var(--color-text-secondary);
}

.hero-brand-main,
.hero-brand-line--single {
  color: var(--color-text-primary);
}

.hero-brand-studio {
  color: var(--color-accent);
}

/* Sidebar brand on dark sidebar strip — keep readable */
.sidebar-brand .brand-main {
  color: var(--color-text-primary);
}

[data-color-mode='light'] .sidebar,
[data-color-mode='light'] .sidebar-header {
  background: var(--color-bg-surface);
  border-color: var(--color-border-default);
  box-shadow: 1px 0 0 var(--border-subtle);
}

[data-color-mode='light'] .right-sidebar {
  background: var(--color-bg-surface-muted);
}

[data-color-mode='light'] .stat-card {
  background: var(--color-bg-surface);
}

[data-color-mode='light'] .filter-btn.active,
[data-color-mode='light'] .mobile-category-btn.active {
  color: var(--color-on-accent, #0f172a);
}