/*
 * Button component styles.
 */
@layer components {
  .btn {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background: var(--color-card-bg);
    color: var(--color-text);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    display: inline-block;
    text-align: center;
  }

  .btn:hover {
    background: var(--color-border);
  }

  .btn-active {
    background: oklch(55% 0.15 250);
    color: white;
    border-color: oklch(55% 0.15 250);
  }

  .btn-active:hover {
    background: oklch(50% 0.15 250);
    border-color: oklch(50% 0.15 250);
  }

  .btn-primary {
    background: oklch(55% 0.15 250);
    color: white;
    border-color: oklch(55% 0.15 250);
  }

  .btn-primary:hover {
    background: oklch(50% 0.15 250);
    border-color: oklch(50% 0.15 250);
  }
}