@import '../../styles/variables.scss';

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--tk-gap-2xl) var(--tk-gap-xl);
}

.empty-state-icon-wrap {
  width: var(--tk-gap-2xl);
  height: var(--tk-gap-2xl);
  border-radius: 50%;
  background: $surface-alt;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--tk-gap-lg);
}

.empty-state-icon-char {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: var(--tk-font-hero);
  font-weight: 600;
  color: $tx3;
}

.empty-state-text {
  font-size: var(--tk-font-num);
  color: $tx2;
  margin-bottom: var(--tk-gap-xs);
}

.empty-state-hint {
  font-size: var(--tk-font-h2);
  color: var(--tk-text-secondary);
  margin-bottom: var(--tk-gap-xl);
}

.empty-state-action {
  background: var(--tk-pri);
  border-radius: 40px;
  padding: var(--tk-gap-md) var(--tk-gap-2xl);
}

.empty-state-action-text {
  font-size: var(--tk-font-body-lg);
  color: $white;
}