/* =====================================================
   TehGuys Design-System Component Layer
   Reusable UI primitives built ONLY on theme.css tokens.
   No hardcoded colors or spacing — everything via var(--...).
   ===================================================== */

/* =====================================================
   Card — .ds-card + header / body / footer
   ===================================================== */
.ds-card {
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-card);
  color: var(--text-primary);
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

.ds-card__header {
  font-weight: 600;
  font-size: var(--font-size-lg);
  color: var(--text-primary);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border-dark);
}

.ds-card__body {
  color: var(--text-secondary);
  font-size: var(--font-size-base);
}

.ds-card__footer {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-dark);
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

@media (prefers-reduced-motion: reduce) {
  .ds-card {
    transition: none;
  }
}

/* =====================================================
   Button — .ds-btn + variants + sizes + states
   ===================================================== */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  -webkit-appearance: none;
  appearance: none;
  transition: background var(--transition-fast), border-color var(--transition-fast),
    color var(--transition-fast), box-shadow var(--transition-fast);
}

.ds-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-blue-glow);
}

.ds-btn:disabled,
.ds-btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* Sizes */
.ds-btn--sm {
  padding: var(--space-xs) var(--space-md);
  font-size: var(--font-size-xs);
  border-radius: var(--radius-sm);
}

.ds-btn--lg {
  padding: var(--space-md) var(--space-xl);
  font-size: var(--font-size-base);
  border-radius: var(--radius-lg);
}

/* Variants */
.ds-btn--primary {
  background: var(--accent-blue);
  color: #fff;
  border-color: var(--accent-blue);
}

.ds-btn--primary:hover {
  background: var(--accent-blue-hover);
  border-color: var(--accent-blue-hover);
  color: #fff;
}

.ds-btn--secondary {
  background: var(--surface-light);
  color: var(--text-primary);
  border-color: var(--border-medium);
}

.ds-btn--secondary:hover {
  background: var(--surface-highlight);
  border-color: var(--border-light);
  color: var(--text-primary);
}

.ds-btn--ghost {
  background: rgba(55, 48, 163, 0.04);
  color: var(--text-secondary);
  border-color: var(--border-medium);
}

.ds-btn--ghost:hover {
  background: var(--surface-light);
  color: var(--text-primary);
  border-color: var(--border-light);
}

.ds-btn--danger {
  background: var(--accent-red);
  color: #fff;
  border-color: var(--accent-red);
}

.ds-btn--danger:hover {
  background: var(--accent-red);
  border-color: var(--accent-red);
  color: #fff;
  filter: brightness(0.92);
}

@media (prefers-reduced-motion: reduce) {
  .ds-btn {
    transition: none;
  }
}

/* =====================================================
   Field — .ds-field (label, input, help, error)
   ===================================================== */
.ds-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.ds-field__label {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-secondary);
}

.ds-field__input {
  width: 100%;
  padding: var(--space-md);
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.ds-field__input::placeholder {
  color: var(--text-placeholder);
}

.ds-field__input:focus,
.ds-field__input:focus-visible {
  outline: none;
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px var(--accent-blue-glow);
}

.ds-field__help {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.ds-field__error {
  font-size: var(--font-size-xs);
  color: var(--accent-red);
  font-weight: 500;
}

/* Invalid state */
.ds-field--invalid .ds-field__input {
  border-color: var(--accent-red);
}

.ds-field--invalid .ds-field__input:focus,
.ds-field--invalid .ds-field__input:focus-visible {
  box-shadow: 0 0 0 3px var(--accent-blue-glow);
  border-color: var(--accent-red);
}

@media (prefers-reduced-motion: reduce) {
  .ds-field__input {
    transition: none;
  }
}

/* =====================================================
   Empty state — .ds-empty (icon, title, subtitle, action)
   ===================================================== */
.ds-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-md);
  padding: var(--space-2xl) var(--space-lg);
  color: var(--text-secondary);
}

.ds-empty__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--avatar-lg);
  height: var(--avatar-lg);
  border-radius: var(--radius-full);
  background: var(--surface-light);
  color: var(--text-muted);
  font-size: var(--font-size-4xl);
}

.ds-empty__title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.ds-empty__subtitle {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  max-width: 40ch;
  margin: 0;
}

.ds-empty__action {
  margin-top: var(--space-sm);
}

/* =====================================================
   Avatar — .ds-avatar (sizes sm/md/lg, circle, fallback)
   ===================================================== */
.ds-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--avatar-md);
  height: var(--avatar-md);
  border-radius: var(--radius-full);
  background: var(--gradient-primary);
  color: #fff;
  font-weight: 600;
  font-size: var(--font-size-base);
  overflow: hidden;
  flex-shrink: 0;
  text-transform: uppercase;
  line-height: 1;
}

.ds-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.ds-avatar--sm {
  width: var(--avatar-sm);
  height: var(--avatar-sm);
  font-size: var(--font-size-sm);
}

.ds-avatar--lg {
  width: var(--avatar-lg);
  height: var(--avatar-lg);
  font-size: var(--font-size-3xl);
}

/* =====================================================
   Badge — .ds-badge (default/success/warning/danger + dot)
   ===================================================== */
.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 1;
  background: var(--surface-light);
  color: var(--text-secondary);
  border: 1px solid var(--border-medium);
}

.ds-badge--success {
  background: var(--accent-green);
  color: #fff;
  border-color: var(--accent-green);
}

.ds-badge--warning {
  background: var(--accent-yellow);
  color: var(--text-primary);
  border-color: var(--accent-yellow);
}

.ds-badge--danger {
  background: var(--accent-red);
  color: #fff;
  border-color: var(--accent-red);
}

/* Leading status dot */
.ds-badge__dot {
  display: inline-block;
  width: var(--space-sm);
  height: var(--space-sm);
  border-radius: var(--radius-full);
  background: currentColor;
}