@layer components {
  .btn {
    --btn-bg: var(--color-surface);
    --btn-border: var(--color-border);
    --btn-color: var(--color-ink);
    --btn-shadow: var(--shadow-sm);
    --btn-radius: var(--radius-md);
    --btn-padding: 0.6em 1.2em;

    align-items: center;
    background: var(--btn-bg);
    border: 1px solid var(--btn-border);
    border-radius: var(--btn-radius);
    box-shadow: var(--btn-shadow);
    color: var(--btn-color);
    cursor: pointer;
    display: inline-flex;
    font-size: var(--text-sm);
    font-weight: 600;
    gap: 0.5em;
    justify-content: center;
    letter-spacing: -0.01em;
    padding: var(--btn-padding);
    transition: all 150ms ease;
  }

  .btn:hover {
    transform: translateY(-1px);
  }

  .btn:active {
    transform: translateY(0);
  }

  .btn--primary {
    --btn-bg: linear-gradient(135deg, var(--color-emerald-500), var(--color-emerald-400));
    --btn-border: var(--color-emerald-500);
    --btn-color: var(--color-slate-900);
    --btn-shadow: 0 4px 14px -4px rgb(16 185 129 / 50%);
    background: var(--btn-bg);
  }

  .btn--primary:hover {
    --btn-shadow: 0 6px 20px -4px rgb(16 185 129 / 60%);
  }

  .btn--secondary {
    --btn-bg: var(--color-slate-900);
    --btn-border: var(--color-slate-900);
    --btn-color: var(--color-white);
  }

  .btn--outline {
    --btn-bg: transparent;
    --btn-border: var(--color-border);
    --btn-color: var(--color-ink);
    --btn-shadow: none;
  }

  .btn--outline:hover {
    --btn-bg: var(--color-slate-100);
    --btn-border: var(--color-slate-300);
  }

  .btn--ghost {
    --btn-bg: transparent;
    --btn-border: transparent;
    --btn-color: var(--color-ink);
    --btn-shadow: none;
  }

  .btn--danger {
    --btn-bg: var(--color-rose-600);
    --btn-border: var(--color-rose-600);
    --btn-color: var(--color-white);
  }

  .btn--warning {
    --btn-bg: var(--color-amber-50);
    --btn-border: var(--color-amber-200);
    --btn-color: var(--color-amber-700);
    --btn-shadow: none;
  }

  .btn--positive {
    --btn-bg: var(--color-emerald-50);
    --btn-border: var(--color-emerald-200);
    --btn-color: var(--color-emerald-700);
    --btn-shadow: none;
  }

  .btn--info {
    --btn-bg: var(--color-sky-50);
    --btn-border: var(--color-sky-200);
    --btn-color: var(--color-sky-700);
    --btn-shadow: none;
  }

  .btn--light {
    --btn-bg: rgba(255, 255, 255, 0.92);
    --btn-border: rgba(255, 255, 255, 0.7);
    --btn-color: var(--color-emerald-700);
    --btn-shadow: var(--shadow-sm);
  }

  .btn--inverse {
    --btn-bg: transparent;
    --btn-border: rgba(255, 255, 255, 0.3);
    --btn-color: var(--color-white);
    --btn-shadow: none;
  }

  .btn--small {
    --btn-padding: 0.45em 0.85em;
    font-size: var(--text-xs);
  }

  .btn--large {
    --btn-padding: 0.7em 1.2em;
    font-size: var(--text-base);
  }

  .btn--icon {
    --btn-padding: 0;

    aspect-ratio: 1;
    block-size: 2.5rem;
    inline-size: 2.5rem;
    padding: 0;
  }
}