@layer mtb-components {
  .mtb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--mtb-space-2);
    padding: var(--mtb-space-3) var(--mtb-space-4);
    border-radius: var(--mtb-radius-md);
    font-weight: 600;
    font-size: var(--mtb-fs-sm);
    line-height: 1.2;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 150ms ease;
  }

  .mtb-btn-primary {
    background: var(--mtb-accent-teal-a);
    color: var(--mtb-bg-0);
    box-shadow: var(--mtb-shadow-card);
  }
  .mtb-btn-primary:hover {
    background: #33ecff;
    box-shadow: var(--mtb-shadow-hover);
    transform: translateY(-1px);
  }
  .mtb-btn-primary:active {
    transform: translateY(0);
    box-shadow: var(--mtb-shadow-card);
  }

  .mtb-btn-secondary {
    background: transparent;
    border-color: #4B5563;
    color: var(--mtb-text-strong);
  }
  .mtb-btn-secondary:hover {
    background: rgba(15, 23, 42, 0.85);
    border-color: #6B7280;
  }

  .mtb-btn-gradient {
    background:
      linear-gradient(var(--mtb-bg-1), var(--mtb-bg-1)) padding-box,
      var(--mtb-grad-teal-yellow) border-box;
    border: 1px solid transparent;
    color: var(--mtb-text-strong);
    border-radius: var(--mtb-radius-pill);
    padding: var(--mtb-space-2) var(--mtb-space-4);
  }
  .mtb-btn-gradient:hover {
    box-shadow: 0 0 12px rgba(250, 204, 21, 0.25);
  }

  .mtb-btn-icon {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: var(--mtb-radius-pill);
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid #1F2937;
    color: var(--mtb-text-muted);
  }
  .mtb-btn-icon:hover {
    background: rgba(15, 23, 42, 0.95);
    color: var(--mtb-accent-teal-a);
  }

  /* Generic button helpers (global) */
  .button-primary {
    background-color: var(--accent-teal, var(--mtb-accent-teal-a));
    color: var(--bg-base, var(--mtb-bg-0));
    padding: var(--space-sm, var(--mtb-space-3)) var(--space-md, var(--mtb-space-4));
    border: none;
    border-radius: var(--radius-md, var(--mtb-radius-md));
    font-weight: 500;
    box-shadow: 0 8px 18px rgba(0,229,255,0.35);
    transition: all 0.2s ease;
  }
  .button-primary:hover {
    filter: brightness(1.05);
    box-shadow: 0 8px 24px rgba(0,229,255,0.45);
  }
  .button-outline {
    background: transparent;
    color: var(--text-strong, var(--mtb-text-strong));
    border: 1px solid var(--border-lines, var(--mtb-line));
    padding: var(--space-sm, var(--mtb-space-3)) var(--space-md, var(--mtb-space-4));
    border-radius: var(--radius-md, var(--mtb-radius-md));
  }
}