/**
 * @file: design-system.css
 * @description: Семантические ds-* компоненты (бейджи/заголовки карточек/кнопки/табы) на токенах.
 */

@layer components {
  /* ===== DS: Badge ===== */
  .ds-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 0.75rem;
    line-height: 1;
    background: var(--ds-badge-bg, var(--surface-2));
    color: var(--ds-badge-fg, var(--text-primary));
    border: 1px solid var(--ds-badge-border, transparent);
  }

  .ds-badge--primary {
    --ds-badge-bg: var(--primary);
    --ds-badge-fg: var(--on-primary);
  }

  .ds-badge--warning {
    --ds-badge-bg: var(--warning);
    --ds-badge-fg: var(--on-warning);
  }

  .ds-badge--info {
    --ds-badge-bg: var(--info);
    --ds-badge-fg: var(--on-info);
  }

  .ds-badge--success {
    --ds-badge-bg: var(--success);
    --ds-badge-fg: var(--on-success);
  }

  .ds-badge--danger {
    --ds-badge-bg: var(--danger);
    --ds-badge-fg: var(--on-danger);
  }

  /* ===== DS: Card Header (цветные заголовки) ===== */
  .ds-cardHeader {
    background: var(--ds-header-bg, var(--surface-1));
    color: var(--ds-header-fg, var(--text-primary));
    border-bottom: 1px solid var(--border-color);
  }

  .ds-cardHeader :is(h1, h2, h3, h4, h5, h6, .card-title, .card-subtitle, .card-text, i, .bi, span) {
    color: inherit;
  }

  .ds-cardHeader--primary {
    --ds-header-bg: var(--header-primary-bg);
    --ds-header-fg: var(--on-header-primary);
  }

  .ds-cardHeader--warning {
    --ds-header-bg: var(--warning);
    --ds-header-fg: var(--on-warning);
  }

  /* ===== DS: Tabs/Buttons (минимально для проблемных мест) ===== */
  .ds-tabButton {
    border: 1px solid var(--border-color);
    background: var(--surface-1);
    color: var(--text-primary);
    border-radius: var(--radius);
    padding: 0.5rem 0.75rem;
    font-weight: 700;
  }

  .ds-tabButton[aria-selected="true"],
  .ds-tabButton.ds-isActive {
    background: var(--primary);
    color: var(--on-primary);
    border-color: var(--primary);
  }

  .ds-tabButton:hover {
    border-color: var(--border-hover);
  }
}